Thumb Avatar Creator

Create, Customize, and Share Unique Thumb Avatars in Real Time!

Laiba Qaisar

Last Update 2 years ago

Demo Link: https://chakor-demo-4.bubbleapps.io/version-test/thumb_avatar_creator?debug_mode=true

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

Introduction :

The Thumb Avatar Creator is a versatile Action Workflow Plugin that enables dynamic avatar customization and random generation. It offers two core features:
1. Custom Thumb Avatar Creation:
Personalize avatars by selecting:
  • Eyes: Heart Eyes, Closed Eyes, Laughter Eyes and Wink Eyes.
  • Mouth: Happy Smile, Cheerful Grin, Subtle Smile, and others.
  • Flip orientation, shape color, and background color.
2. Random Thumb Avatar Generation:
  • Instantly generate unique avatars with randomized eyes, mouth, flip, shape color, and background color for fun and variety.

Perfect for profile images, gamification, and creative placeholders, this plugin brings engaging customization to your workflows effortlessly.
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.

Was this article helpful?

0 out of 0 liked this article