✅

Link to plugin page: https://zeroqode.com/plugin/native-emoji-picker-+-plugin-for-bubble-1709620498103x609179056642676200

Demo to preview the settings

✅

Demo page: https://timsupport.bubbleapps.io/emojipicker

✅

Bubble Editor: https://bubble.io/page?version=live&id=timsupport&name=emojipicker&tab=Design

Introduction

The most advanced emoji picker for Bubble. It supports native iOS emojis and is a highly reliable, customizable picker.

FEATURES

Add custom images and GIFs!

Automatically bind to input or retrieve in the element state

Supports auto, light and dark themes, with the ability to extend them to create your own

Full support for skin tone variations where applicable

Supports over 30+ locales

Emojis are searchable by name or tags

Remembers recently used emojis

Fully keyboard accessible

Emoji data is loaded once from a CDN and cached in the browser for subsequent sessions.

Auto and custom positioning to the reference element

Smooth and animated

Fully customizable categories, categories order and picker tabs

Three clicks only implementation

Fully responsive

Based on a reliable and lightweight library

Plugin Element Properties

Emoji Picker

Fields:

Title	Description	Type
☑️ Disable emoji picker	Whether or not the emoji picker should be disabled.	Checkbox (yes/no)
	— TRIGGER ELEMENT —
	The element that will trigger the popup.
⚙️ Element ID	The ID of the element that will trigger the popup.	Text (optional)
⚙️ Position	The position of the picker popup regarding the reference element. Available options: auto, top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, left-end	Dropdown
	— INPUT —
	Bind an input to the emoji picker to automatically fill the input with the selected emoji.
☑️ Bind to input	Enable to bind the emoji picker to an input and automatically fill the input with the selected emoji.	Checkbox (yes/no)
Input ID	The HTML ID of the input to which the picker popup will bind	Text (optional)
⚙️ Attach popup to	The reference element to which the picker popup will be attached to. If set to “custom”, you must fill the element ID under the “⚙️ Custom reference element” setting at the bottom. Available options: Reference element, Input	Dropdown
	— PICKER SETTINGS —
🎨 Animate	Whether or not to show animated transitions in the picker.	Checkbox (yes/no)
🎨 Theme	The color theme to use for the picker. Available options: Auto, Light mode, Dark mode	Dropdown
⚙️ Hide on click outside	TODO: Fill in description	Checkbox (yes/no)
⚙️ Hide on emoji select	TODO: Fill in description	Checkbox (yes/no)
⚙️ Hide on escape	TODO: Fill in description	Checkbox (yes/no)
⚙️ Show close button	TODO: Fill in description	Checkbox (yes/no)
	— FEATURES & TABS —
	Select which tabs and features should be enabled.
☑️ Category tab	Whether or not to show the category tabs at the top of the picker.	Checkbox (yes/no)
☑️ Show preview	Whether or not to show the preview area at the bottom of the picker.	Checkbox (yes/no)
☑️ Show recents	Whether or not to show recently used emojis.	Checkbox (yes/no)
☑️ Search bar	Whether or not to show the search box at the top of the picker.	Checkbox (yes/no)
☑️ Show variants	Whether or not to show the variants of an emoji, where supported. If not enabled, the default variant will always be emitted	Checkbox (yes/no)
⚙️ Auto-focus	Specify if the search field will receive focus when opened (Must have “⚙️ Show search” enabled).	Checkbox (yes/no)
	— CATEGORIES —
	This can be used to limit which categories are shown, and in what order.
⚙️ Categories	If specified, only the categories specified on this setting will be shown in the picker, in the order they appear in the setting. The categories array also limits what emojis can be found by searching. Categories need to be comma separated, and can be any of the following: “activities”,“animals-nature”,“custom”,“flags”,“food-drink”,“objects”,“people-body”,“recents”,“smileys-emotion”,“symbols”,“travel-places”	Text (optional)
	— ADVANCED —
	Advanced settings for the emoji picker
⚙️ Locale	The locale to use for emoji data and picker. Available options: da, de, en-gb, en, es-mx, es, et, fi, fr, hu, it, ja, ko, lt, ms, nb, nl, pl, pt, ru, sv, th, uk, zh-hant, zh	Dropdown
⚙️ Max recents	The maximum number of recent emojis to cache locally. Available options: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 50, 75, 100	Dropdown
⚙️ Emoji size	TODO: Fill in description	Text
⚙️ Emojis per rows	Available options: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 50	Dropdown
⚙️ Visible rows	The number of visible rows to show in the emoji grid. Available options: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 50	Dropdown
⚙️ Custom class	Sets any additional CSS classes to be applied to the picker. This is typically used to override theme styles.	Text (optional)
	— CUSTOM EMOJIS —
	Add your own emojis to the picker. This is an advanced feature and we recommend following our documentation.
☑️ Enable	TODO: Fill in description	Checkbox (yes/no)
⚙️ Data type	The data type to use as custom emojis.	App Type (optional)
⚙️ Data source	The data source of the list of emojis as defined above to use as custom emojis.	Item reperesenting ⚙️ Data type (optional)
⚙️ Or use custom JSON instead	Please refer to documentation. “☑️ Enable” parameter from “CUSTOM EMOJIS” must be checked. This parameter will override above custom settings.	Text (optional)
⚪ Image field	The image to be showed in the popup picker, it’s also the image that will be returned in the “Selected	Custom” image state when a custom emoji is picked.
⚪ Tags field	A list of text to be used as search keywords within the picker popup.	Filed of ⚙️ Data type, represent Text, image or file(list) (optional)
⚪ Label field	The label field to be used as the emoji description in the picker preview, it’s also the text that will be returned in the “Selected	Label” state when a custom emoji is picked.
⚪ Data field	An additional data field to be returned as the “Selected	Custom data” state when a custom emoji is picker. Useful to pass a unique ID.
⚪ Emoji field	The text to be returned as the “Selected	Emoji” state when a custom emoji is picker.

Element Actions

Show - shows the emoji popup

Hide - hides the emoji popup

Clear recents - clears recent emojis

Exposed states

Title	Description	Type
Emoji	The Unicode or character representation of the selected emoji. This provides a way to display or use the selected emoji within the application.	text
Hexcode	The hex code of the selected emoji, providing a standard reference to the emoji character in Unicode.	text
Label	A text label or description of the selected emoji. This can be used for accessibility purposes or to provide context to the user about the emoji's meaning or use.	text
Custom image	The URL of the image if a custom emoji is selected. This is useful for applications that need to display custom emojis using their image URLs.	image
Data	Additional data associated with the selected emoji. This could be an identifier, JSON object, or any metadata provided during the emoji configuration.	text
Selected is a custom emoji?	Flags whether a custom emoji was selected. `true` indicates that the selected emoji is a custom emoji, while `false` would indicate a standard emoji selection.	yes/no
Popup picker is ready?	Indicates whether the emoji picker has completed its initialization and is ready for interaction.	yes/no

Element Events

Title	Description
emoji is selected	Fired when an emoji is selected by the user. This event signifies that the user has chosen an emoji and potentially triggers updates or actions within the host application based on the selection.
emoji picker is opened	Emitted when the emoji picker is opened. This can be used to trigger animations, logging, or other actions that should occur when the picker becomes visible.
emoji picker is closed	Emitted when the emoji picker is closed. Similar to the `opened` event, this can trigger actions that should occur when the picker is no longer visible, such as resetting certain UI elements or states.
emoji picker is ready	This event is fired when the picker is fully loaded and ready for interaction, corresponding to the `ready` published state becoming `true`. It is useful for triggering actions that depend on the picker being interactive, such as enabling buttons or inputs associated with the picker.

Configuration

In this section, you will find all the required information to setup the plugin. We strongly recommend following this if you just purchased the plugin.

Getting started

Adding the plugin & basic setup

Using custom emojis

In addition to emojis defined by the Unicode standard, you can add your own custom images to the picker. This is similar to other pickers, such as the ones in Slack or Discord.

💡

Currently custom emojis can be used only like images, for example in an image Bubble element and not in inputs

Default setup (recommended)

Advanced setup using a JSON array

Once the ⚙️ Enable parameter under the custom section is checked, you can fill the ⚙️ Or use custom JSON instead parameter.

You must provide an array of objects as defined below.

json
[{ 
    "emoji":"kitty1", 
    "label": "Cute kitty", 
    "url": "https://placekitten.com/200/200.png", 
    "tags": ["cute", "cat", "kitty"],
    "data": "id"
}]

You can find the reference of each parameter here.

Customising categories

Keyboard interactions

The 🐝 Emoji Picker has full keyboard support.

Searching

When searching, the search results can be closed by pressing the Escape key. This will return to the main emoji grid.

When there are search results, pressing the Enter or Down Arrow key will set focus to the emoji search results.

On the top row of search results, pressing the Up Arrow key will set focus back to the search field.

Category selection

When a category tab is highlighted, the category can be changed by pressing the Left Arrow and Right Arrow keys.

Navigating and selecting emojis

The emoji grid is focusable via the Tab key. When it receives focus, the current emoji will be highlighted. The emoji grid can be navigated with the arrow keys.

An emoji can be selected by pressing Enter or Space. This will cause the emoji to be emitted (or the variant popup to be shown).

When the variant popup is shown, the arrow keys are used to navigate the available variants.

Selected category/focus behavior

Only one emoji in the grid is ever focusable at a given time. Pressing the arrow keys changes which emoji is focusable and then focuses the new emoji.

When a category tab is selected by clicking or using the arrow keys, that category will be the new active category and its first emoji becomes focused.

When navigating the emoji grid with the arrow keys, crossing into a different category will make that category become the new active category.

When a category is automatically highlighted while scrolling, this is a highlight only and does not change the active category. The focused emoji in the actual active category remains focusable.

Variant popup

The variant popup can be closed without selecting an emoji by pressing the Escape key.

Popup picker

A popup picker can be closed by pressing the Escape key from the emoji grid. If search results are currently shown, it will clear the results but will not close the picker. Pressing Escape a second time will then close the picker.

Summary

Anywhere within the picker

Command+S, Control+S: Jump to the search field

Anywhere while search results are shown

Escape: Close search results

Variant popup

Escape: Close variant popup

⬆️, ⬇️, ⬅️, ➡️: Navigate variant grid

Enter, Space: Select variant

Popup picker

Escape: Close popup picker

Category tabs

⬅️, ➡️: Navigate category tabs

Search field

Enter, ⬇️: Focus search results

Escape: Clear search field and return to emoji grid

Search results

⬆️: Focus search field

Emoji grid

⬆️, ⬇️, ⬅️, ➡️: Navigate emoji grid

Enter, Space: Select emoji

Size and layout

Custom theming

The 🐝 Emoji Picker offers three built-in themes:

A light theme with a white background.

A dark theme with a dark background .

An automatic theme that will use the light or dark theme depending on the operating system's setting (if available).

Custom theming

🐝 Emoji Picker theme styling is set with CSS variables. This allows you to create a custom theme for your picker if desired.

To use a custom theme, define a CSS class that sets the desired variables to override. This class name is then passed as the ⚙️ Custom class option.

This theme class is meant to extend a built-in theme. You should select which PicMo theme to extend from, then add your custom overrides to the new class.

For example, to override the background color of the picker, you could define a CSS class like this:

plain text
.my-picker {
  --background-color: red;
}

This class name is passed to the picker as the ⚙️ Custom class option.

NOTE

ℹ️

NOTE Your custom classes are applied to the main picker element. Keep CSS specificity rules in mind when applying the theme. In general, this can be done by either:

Importing your CSS after importing PicMo so that your theme options come second in the cascade.

Making your CSS selector more specific than the built-in theme selector. For example, you can use div.my-picker instead of .my-picker.

If you don't do this, your theme overrides will not take effect.

Theme properties

These are the available CSS variables that can be overridden in your theme:

-accent-color: Used for accented UI elements such as the highlight color of the current category.

-background-color: The background of the main emoji grid area.

-border-color: The color of the outer and inner borders within the picker.

-category-name-background-color: The background of the category name header for each category in the emoji grid area.

-category-name-text-color: The text color of the category name headers.

-error-color: The color to use for errors.

-error-color-dark: Darker error color.

-focus-indicator-color: The outline color of a focused emoji.

-hover-background-color: The background of an emoji shown when hovered over.

-placeholder-background-color: The background color for loading placeholders.

-preview-background-color: The background color of the preview area.

-scrollbar-background-color: The background color of the scrollbar.

-scrollbar-color: The color of the scrollbar.

-search-background-color: The background color of the search input.

-search-focus-background-color: The background color of the search input when it has focus.

-search-icon-color: The color of the search and clear search icons in the search field.

-search-placeholder-color: The color of the placeholder text in the search field.

-secondary-background-color: The background of the other UI elements such as search, category tabs, and preview.

-secondary-text-color: The color to use for secondary text; typically a muted color.

-tag-background-color: The background color to use for tags in the preview area.

-text-color: The primary text color for the picker.

-ui-font: The font to use for UI elements.

-variant-popup-background-color: The background color of the variant popup.

Emoji variants

FAQ

Why are some emojis not rendering correctly?

Native Emoji Picker +

Demo to preview the settings

Introduction

Plugin Element Properties

Emoji Picker

Element Actions

Exposed states

Element Events

Configuration

Getting started

Category keys

Customizing the categories

Searching

Category selection

Navigating and selecting emojis

Selected category/focus behavior

Variant popup

Popup picker

Summary

Anywhere within the picker

Anywhere while search results are shown

Variant popup

Popup picker

Category tabs

Search field

Search results

Emoji grid

Grid size

Emoji size

Custom theming

Theme properties

Variant popup

Variant data

Disabling variants

FAQ

Changelogs

Update 23.07.24 - Version 1.7.0

Update 03.07.24 - Version 1.6.0

Update 14.06.24 - Version 1.5.0

Update 29.04.24 - Version 1.4.0

Update 24.04.24 - Version 1.3.0

Update 07.03.24 - Version 1.2.0

Update 05.03.24 - Version 1.1.0

Update 08.12.23 - Version 1.0.3

Update 10.08.23 - Version 1.0.2

Update 04.08.23 - Version 1.0.1

Update 13.09.22 - Version 1.0.0