Emoji Avatar Creator

Unleash Creativity with Personalized Emoji Avatars!

Laiba Qaisar

Last Update 4 months ago

Demo link: https://chakor-demo-4.bubbleapps.io/version-test/emoji_avatar_creator?debug_mode=true
Editor link: https://bubble.io/page?id=chakor-demo-4&tab=Design&name=emoji_avatar_creator&type=page

Introduction:


The Emoji Avatar Creator is a dynamic tool designed to generate fun and customizable emoji-style avatars. It allows users to create unique avatars by selecting various eye and mouth styles, as well as customizing background colors. With options to specify colors in hex format and predefined facial features, this tool ensures you can craft an avatar that perfectly reflects your personality or mood.

Whether you're designing avatars for personal use, branding, or app integration, the Emoji Avatar Creator provides a seamless and creative solution. It's perfect for adding a playful and expressive touch to your digital projects!

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.

Was this article helpful?

0 out of 0 liked this article