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!
Editor Link:
https://bubble.io/page?id=chakor-demo-4&tab=Design&name=bottts_avatar_creator&type=page