Instructions to Use the Emoji Avatar Creator Plugin
The Emoji Avatar Creator plugin provides two workflows: Custom Emoji and Random Emoji. Below is a step-by-step guide to use these workflows effectively.  

Custom Emoji Workflow

1. Add the Emoji Element
  - Drag and drop the Emoji Element onto your Bubble page.  
  - This element will provide the necessary properties (e.g., eye styles, mouth styles, background colors, etc.) that can be accessed by dropdowns for customization.  

2. Configure Dropdowns for User Inputs  
  - Add dropdown elements to your page to allow users to select:  
    - Eye Style  
    - Mouth Style  
    - Background Color  
 
  - Populate these dropdowns with the property values made available by the Emoji Element.  

3. Create a Custom Emoji Action  
  - In your Bubble workflow editor, create a new workflow action for the button or trigger you want to use for generating the custom emoji.  
  - Use the Custom Emoji action from the plugin and map the dropdown inputs to the respective properties:  
    - Eyes → Value from the Eye Style dropdown  
    - Mouth → Value from the Mouth Style dropdown  
    - Background Color→ Value from the Background Color dropdown  

4. Display the Generated SVG
  - Add an HTML Element to your page.  
  - Bind the output SVG from the Custom Emoji workflow action to the inner content of this HTML element.  
  - This will render the generated custom emoji avatar on the page.  

---
Random Emoji Workflow

1. No User Inputs Required
  - Unlike the custom emoji, the random emoji workflow does not rely on user inputs.  

2. Create a Random Emoji Action
  - In your Bubble workflow editor, create a new workflow action for the button or trigger you want to use for generating a random emoji.  
  - Use the Random Emoji action from the plugin.  
  - This action will automatically generate an emoji avatar with random parameters.  

3. Display the Generated SVG  
  - Add an HTML Element to your page.  
  - Bind the output SVG from the Random Emoji workflow action to the inner content of this HTML element.  
  - This will render the randomly generated emoji avatar on the page.  



By following these steps, you can seamlessly integrate both workflows and enhance the user experience with personalized or random emoji-style avatars.

Editor Link:https://bubble.io/page?id=chakor-demo-4&tab=Design&name=emoji_avatar_creator&type=page