Instructions for Using the Person Avatar Creator Plugin:
1. Add the Person Element: Download the plugin and drag and drop the Person element onto your page from the elements panel.
2. Customize Parameters: Use the available properties such as eyes, mouth, background color, clothing, top, and background style to customize the avatar. Link these properties to dropdown inputs, sliders, or color pickers to enable user interaction.
3. Sett Up Workflows:
- Custom Person Action: In the workflow editor, add the Custom Person action and pass user-defined values for eyes, mouth, and background color.
- Random Person Action: Add the Random Person Creation action in the workflow to generate a random avatar without inputs.
4. Preview the Avatar: Display the resulting avatar in real-time using the Person element on your page.
5. Save or Use the Avatar: Set up workflows to save the generated avatar as an SVG for display in an HTML element or use it in your application, such as saving it to a database or assigning 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 offers flexibility and creativity, making it ideal for user profiles, gaming applications, or placeholder graphics.
Editor Link:
https://bubble.io/page?id=chakor-demo-4&tab=Design&name=person_avatar_creator&type=page