Simple Ajax Chat Pro (SAC Pro) provides a simple and basic emoji picker that may be enabled for all chat forms or any specific chat form. This quick tutorial shows how to enable the emoji picker, and also explains how to customize the emoji list, so you can add your favorite emojis.

Tip: Just getting started with SAC Pro? Check out the Quick Start Guide »

Enable Emoji Picker

To get a better idea of what the emoji picker looks like, check out the screenshot below.

To enable the emoji picker for all chat forms (globally), visit the SAC Pro settings ▸ General ▸ “Emoji Picker”.

To enable the emoji picker for a specific form, add the emoji_picker attribute to the [sacpro] shortcode:

[sacpro form_id="123" emoji_picker="true"]

The emoji_picker attribute accepts either true or false.

Important: the emoji picker requires jQuery. Everything else in SAC Pro is built with vanilla JavaScript. But for now, the emoji picker is built with jQuery. This is not an issue for 99% of WordPress themes, but there are exceptions and cases where jQuery is not available. So keep this dependency in mind when enabling the emoji picker.

More attributes to customize your chat forms can be found in the SAC Pro shortcode reference.

Tip: if necessary, it’s possible to customize the position of the emoji picker.

Screenshot

Here is a screenshot showing the emoji picker when toggled open. Click image to view full size (opens in new tab or window).

Screenshot of emoji pickerScreenshot of emoji picker displayed on WordPress Twenty Sixteen theme. Chat theme: Hero. Click image for full-size view.

Customize the emoji list

SAC Pro makes it possible to customize the list of emojis. So you can add or remove whatever emojis as you see fit. To do so, visit Appearance ▸ Chat Emojis. There you will find a setting defined with the following emoji hex codes:

x1F642, x1F641, x1f600, x1f601, x1f602, x1f603, x1f604, x1f605, x1f606, x1f607, x1f608, x1f609, x1f60a, x1f60b, x1f60c, x1f60d, x1f60e, x1f60f, x1f610, x1f611, x1f612, x1f613, x1f614, x1f615, x1f616, x1f617, x1f618, x1f619, x1f61a, x1f61b, x1f61c, x1f61d, x1f61e, x1f61f, x1f620, x1f621, x1f622, x1f623, x1f624, x1f625, x1f626, x1f627, x1f628, x1f629, x1f62a, x1f62b, x1f62c, x1f62d, x1f62e, x1f62f, x1f630, x1f631, x1f632, x1f633, x1f634, x1f635, x1f636, x1f637, x1f638, x1f639, x1f63a, x1f63b, x1f63c, x1f63d, x1f63e, x1f63f, x1f640, x1f643, x1f4a9, x1f644, x1F44C, x1F44D, x1F44E, x1F648, x1F649, x1F64A, x231A, x231B, x23F3, x23F0, x26A1, x1F525, x1F4A5

These are the default emojis for every chat form. Customize as you wish. There are tons of great resources for emojis available online. For example, a search for something like emoji hex codes yields many useful (and interesting) results.

When adding new emojis, make sure to follow these important rules:

  • Hex codes only
  • Comma separated
  • Do NOT include the opening &# characters
  • Do NOT include the closing ; character

For example, the hex code for 🎸 guitar emoji is 🎸. So to add it to the list, you would write it as x1F3B8.

Tip: Getting weird results when trying to use chat emojis? Try disabling WordPress emojis should do the trick.