Link to the plugin page:
Demo to preview the plugin:
Introduction
The Avatar Creator plugin allows you to add customizable, interactive avatars to your Bubble application. This no-code plugin provides full control over the avatar’s appearance, including facial expressions, hairstyles, accessories, clothing, and more.
See Key Features
The plugin can generate random avatars for sign-ups or let users customize their own.
Prerequisite
- Bubble Account: An active Bubble.io account is required to install and use the plugin.
- Plugin Installation: The plugin can be installed directly from the Zeroqode Plugin Store or from the Plugins section of your Bubble Editor.
- Repeating Group Setup: Ensure your Bubble app has a repeating group element to showcase saved avatars.
- Familiarity with Bubble Workflows: Basic knowledge of Bubble workflows is required to dynamically control progress values and actions.
How to setup
Step 1: Installation
Step 2: Place the Element
Step 3: Setup Database
Step 4: Create. Workflows
Plugin Element Properties
Avatar Element Fields
Property | Description | Type |
Avataar Style | Choose between Circle or Transparent styles | Text (optional) |
Avataar Top Type | Select a hairstyle or head accessory | Text (optional) |
Accessories Type | Choose from various accessories like glasses or sunglasses | Text (optional) |
Hair Color | Select a color for the avatar’s hair | Text (optional) |
Hat Color | Customize hat colors (applicable for hat styles) | Text (optional) |
Facial Hair Type | Choose between different beard and mustache styles | Text (optional) |
Facial Hair Color | Customize facial hair color | Text (optional) |
Clothes Type | Select different outfit styles | Text (optional) |
Clothes Color | Choose a color for the selected clothing type | Text (optional) |
Clothes Graphic Type | Choose a graphic print for certain outfits | Text (optional) |
Eyes Type | Select different eye expressions | Text (optional) |
Eyebrow Type | Choose between various eyebrow styles | Text (optional) |
Mouth Type | Customize mouth expressions | Text (optional) |
Skin Color | Select from multiple skin tones | Text (optional) |
Element Actions
- Generate Avatar
Creates an avatar based on the selected customization options.
Title | Description | Type |
Avataar Style | Choose Circle or Transparent | Text (optional) |
Avataar Top Type | Select hair or headwear | Text (optional) |
Accessories Type | Choose eyewear or accessories | Text (optional) |
Hair Color | Select a hair color | Text (optional) |
Hat Color | Select a hat color (if applicable) | Text (optional) |
Facial Hair Type | Select a beard or mustache style | Text (optional) |
Facial Hair Color | Choose a color for facial hair | Text (optional) |
Clothes Type | Select clothing style | Text (optional) |
Clothes Color | Select clothing color | Text (optional) |
Clothes Graphic Type | Choose a graphic print for shirts | Text (optional) |
Eyes Type | Choose an eye expression | Text (optional) |
Eyebrow Type | Choose an eyebrow style | Text (optional) |
Mouth Type | Choose a mouth expression | Text (optional) |
Skin Color | Choose a skin tone | Text (optional) |
- Generate Random Avataar
Creates a randomly generated avatar with randomized attributes.
Exposed States
The plugin exposes the following states that can be used in workflows:
Title | Description | Type |
Avatar URL | The generated avatar’s image URL | Text |
Avatar Style | Displays the selected style (Circle/Transparent) | Text |
Avatar Top Type | Shows the selected top type | Text |
Avatar Accessories Type | Displays the chosen accessory | Text |
Avatar Hair Color | Displays the selected hair color | Text |
Avatar Hat Color | Shows the selected hat color | Text |
Avatar Facial Hair Type | Displays the selected facial hair style | Text |
Avatar Facial Hair Color | Shows the facial hair color | Text |
Avatar Clothes Type | Displays the selected clothing type | Text |
Avatar Clothes Color | Shows the selected clothing color | Text |
Avatar Clothes Graphic Type | Displays the selected graphic type | Text |
Avatar Eye Type | Shows the selected eye expression | Text |
Avatar Eyebrow Type | Displays the chosen eyebrow style | Text |
Avatar Mouth Type | Shows the selected mouth expression | Text |
Avatar Skin Color | Displays the selected skin tone | Text |
Random Avatar Styles | Often randomly assigned: Circle, Transparent | Text |
Random Avatar Top Type | Displays a randomly selected top type | Text |
Random Avatar Accessories Type | Displays randomly assigned accessories | Text |
Random Avatar Hair Color | Displays a randomly assigned hair color | Text |
Random Avatar Hat Color | Displays a randomly assigned hat color | Text |
Random Avatar Facial Hair Type | Displays a randomly selected facial hair type | Text |
Random Avatar Facial Hair Color | Displays a randomly selected facial hair color | Text |
Random Avatar Clothe Type | Displays a randomly selected clothing type | Text |
Random Avatar Clothe Color | Displays a randomly assigned clothing color | Text |
Random Avatar Graphic Type | Displays a randomly selected graphic type | Text |
Random Avatar Eye Type | Displays a randomly selected eye expression | Text |
Random Avatar Eyebrow Type | Displays a randomly selected eyebrow style | Text |
Random Avatar Mouth Type | Displays a randomly selected mouth expression | Text |
Random Avatar Skin Color | Displays a randomly selected skin tone | Text |
