How to build chat with emojis in Bubble

The simplest way to build chat with emojis in Bubble is to store messages as normal text (Bubble already supports emojis inside text fields) and add an emoji picker element or popup that inserts the selected emoji into the message input. You don’t need plugins unless you want a nicer emoji selector. Emojis behave like regular characters, so they save to the database and display in repeating groups without extra setup.

Core Idea

Bubble’s text inputs and text fields fully support emojis. Your chat is just a repeating group of Message things, and you append emojis to the text before saving. The only extra work is giving users a way to pick emojis.

• Create a Message data type with a text field (e.g., “body”).
• Use a Repeating Group to show messages sorted by Created Date.
• Use a normal Input for typing messages.
• Add an emoji picker (plugin or custom popup) that inserts the emoji into the Input’s current value.

How to Add Emoji Picker

You have two options: plugin or no‑plugin.

• Using a plugin: Install “Emoji Picker” from Bubble’s plugin store. Place the element next to your message input. Use its workflow event “when emoji is clicked” → “Set state” to add the selected emoji to your input’s value.
• Without plugin: Create a Group Focus that contains a repeating group of emoji characters. When a user clicks an emoji, run a workflow that updates the message input value to “Input Message’s value + this cell’s emoji”.

Workflow Example (No Plugin)

// When emoji cell is clicked
Element Actions → Set another element's value
Value = Input Message's value :append this Cell's Emoji

Saving Message with Emojis

Use your send button to “Create a new Message” with “body = Input Message’s value”. Emojis will save automatically because they are just unicode characters.

Displaying Emojis in Chat

The Repeating Group’s text element will show emojis without extra formatting. Make sure the text element’s font supports emojis (most standard web fonts do).