How to Use the Thumb Avatar Creator Plugin
The Thumb Avatar Creator plugin allows you to create and customize avatars easily in your Bubble application. Follow these steps to set up and use the plugin effectively:

Install the Plugin
Navigate to the Plugins section in your Bubble dashboard, search for Thumb Avatar Creator, and install it. Once installed, the plugin will be available in your Bubble editor.

Add to Your Page
In the Design tab, locate the "thumb" avatar element in the Elements panel. Drag and drop it onto your page. This element allows users to interact with and customize their avatar in real time.

Customizing Avatars in Real Time
Use dropdown elements or other user inputs on the page to customize properties of the avatar, such as:

Eyes (e.g., Heart Eyes, Closed Eyes, Wink Eyes)
Mouth (e.g., Happy Smile, Cheerful Grin, Subtle Smile)
Shape Color (hex codes for custom colors)
Background Color (hex codes for custom backgrounds)
Flip Orientation (Yes/No to mirror the avatar horizontally)
The avatar will update instantly as the user makes selections, providing a seamless and interactive experience.

Custom Avatar Workflow
If you want to generate an avatar based on user input programmatically:

Navigate to the Workflow tab in your Bubble editor.
Add a new action and select "Thumb Avatar Creator - Create Custom Avatar."
Set the workflow to take parameters from user inputs, such as dropdown values or other form fields.
The plugin will generate an SVG based on these inputs, which you can display.
Random Avatar Generation
To generate a random avatar:

Go to the Workflow tab and add a new action.
Select "Thumb Avatar Creator - Generate Random Avatar."
The plugin will randomly select attributes for the avatar (eyes, mouth, colors, etc.) and return the SVG as output.
Displaying the Avatar
Once an avatar is generated (custom or random):

Use a Bubble HTML element to display the SVG directly on your page.
Alternatively, save the SVG in your database for use as a profile image or other purposes.

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