Step 1: Install the Plugin Open your Bubble app.

Go to the Plugins tab.

Click “Add plugins”.

Search for “WGD Emoji Picker Styler” (or install it from a provided plugin link).

Click Install.

Step 2: Add the Emoji Picker and Styler to the Page
In the Design tab, drag the Picmo Emoji Picker (you should have this picker element already installed or integrated).

Add the WGD Emoji Picker Styler element anywhere on the page (e.g., in the same group or nearby).

Step 3: Configure Styling Options
Select the WGD Emoji Picker Styler element and configure the following fields:

secondary_background_color – Color for inner UI sections

background_color – Main background and category bar background

category_icon_color – Default color for category icons (tabs)

selected_category_icon_color – Color of the active/selected icon

category_name_color – Text color for category headers

text_color – General emoji picker text color

text_font – Font family to apply (e.g., "Arial", "Poppins", etc.)

Each value can be static or dynamic (based on user preferences or app theme).

Step 4: Initialize the Picker (Required for Styling)
Make sure your emoji picker has already loaded before applying styles.

In a workflow, after the emoji picker is displayed or initialized:

Use the action: Trigger WGD Emoji Picker Styler's “Apply Styles”

This ensures the plugin grabs the .picmo__picker element and updates its styles.

Tip: You can trigger this using a “Page is loaded”, “Element is visible”, or custom condition.

Step 5: Preview and Test
Run your app in Preview mode.

Open your emoji picker.

Ensure the styles (colors, font, etc.) are correctly applied.

Use the browser dev tools to inspect .picmo__picker if needed for verification.