Bottts Avatar Creator

Create Unique Bottts with Ease!🤖

Laiba Qaisar

Last Update vor 2 Jahren

Demo Link ➡️ http://chakor-demo-4.bubbleapps.io/version-test/bottts_avatar_creator?debug_mode=true
Editor Link ➡️ https://bubble.io/page?id=chakor-demo-4&test_plugin=1734686749719x226451410113265660_current&tab=Design&name=bottts_avatar_creator&type=page

Bottts Avatar Creator Plugin

The Bottts Avatar Creator is a powerful tool for generating unique and customizable Bottts-style avatars. It includes two primary workflows:

1. Custom Bottt Creation:

Users can input parameters such as eyes, mouth, and background color to design a personalized Bottt avatar.

2. Random Bottt Generation:
Instantly create a unique avatar with randomized features. The Bottt element allows real-time customization by linking properties (e.g., eyes, mouth, background color) to dropdown inputs on your page.

Use Cases:
🔵User Profile Avatars: Provide users with a fun and creative way to       personalize their profiles.
🔵Gamification: Enhance engagement by assigning unique avatars to players or team members.

🔵Placeholder Graphics: Generate distinctive placeholders for loading screens, blogs, or apps.


The plugin is perfect for adding a playful, personalized touch to your projects while ensuring quick and seamless avatar generation.
📓Instructions for Using the Bottts Avatar Creator Plugin


1. Add the Bottt Element: Drag and drop the "Bottt" element onto your page from the elements panel.


2. Customize Parameters: Use the available properties such as eyes, mouth, and background color to customize the avatar. You can link these properties to dropdown inputs, sliders, or color pickers to allow user interaction.


3. Set Up Workflows:
  • Custom Bottt Action:
    In your workflow editor, add the "Custom Bottt Creation" action. Use inputs (e.g., dropdowns or color pickers) to pass user-defined values for eyes, mouth, and background color.
  • Random Bottt Action:
    Add the "Random Bottt Creation" action in the workflow to generate a random avatar with no inputs required.

4. Preview the Avatar: Display the resulting avatar in real-time using the Bottt element on your page.


5. Save or Use the Avatar:Implement workflows to save the generated avatar as an svg to be displayed in html element or use it in your application (e.g., save it to a database or assign it to a user profile).

Example Use Case:


➡️Create dropdowns for eyes and mouth styles, and a color picker for the background.


➡️Allow users to select their preferences and display the custom avatar instantly.


➡️Add a button for random avatar generation to make the process more dynamic.

This plugin provides flexibility and creativity, perfect for user profiles, gaming applications, or placeholder graphics! 

Was this article helpful?

0 out of 0 liked this article