Avatar Creator Pro Bubble Mobile

⚠️

This plugin is currently available only in the Bubble Mobile Bundle.

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-native-demo-07.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=Avatar%20Creator%20Pro

✅

Bubble Editor: https://bubble.io/page?id=zeroqode-native-demo-07&plugin=1759154084334x427119753097379840_current&tab=Design&name=Avatar+Creator+Pro&type=page&version=live&elements=bTIZf1

Introduction

The Pro Avatar Creator plugin enables full avatar customization, letting users choose skin tone, hairstyle, eye style, facial expression, clothing, accessories, and background type. It also supports random generation, auto-updates, and direct saving to your Bubble database.

Perfect for applications that need rich personalization, user identity tools, or gamified profile creation, the Pro version offers a complete and flexible avatar-building experience seamlessly integrated into Bubble.

Prerequisites

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/ArfXDQMZ

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Plugin Element Properties - Avatar Creator PRO

The plugin contains one main visual element designed for generating random or custom avatars and saving them directly to the Bubble file manager.

Element Actions

Generate Random Avatar

Generate Custom Avatar

Generates a custom avatar Character

Fields:

Title	Description	Type
Initial Seed	A string used to generate a consistent avatar based on a unique identifier.	Text
	Image Customization
Size	The pixel dimensions (width and height) of the generated avatar image.	Number
Radius	The border radius applied to the avatar image for rounded corners.	Number
Padding	The amount of space around the avatar content within the image.	Number
Rotate	The degree of rotation applied to the avatar image.	Number
Scale	The scaling factor for the avatar content within the image.	Number
Translate X	The horizontal offset for positioning the avatar content.	Number
Translate Y	The vertical offset for positioning the avatar content.	Number
Background Type	Specifies the background style, either 'solid', 'gradientLinear', or 'transparent'.	Text
Background Color	The color(s) used for the avatar's background	Color
Background Alpha	The opacity level of the background, ranging from 0 to 1.	Number
Background Rotation	The rotation angle of the background gradient, if applicable.	Number
	Avatar Customization
Accessories	The type of accessories (e.g., glasses) added to the avatar. For more please see: https://www.dicebear.com/styles/avataaars/	Text
Accessories Color	The color of the accessories, normalized to a hex or 'transparent'.	Color
Accessories Probability	The percentage chance (0–100) of including accessories.	Number
Clothing	The type of clothing worn by the avatar (e.g., shirt, hoodie).	Text
Clothing Color	The color of the clothing, normalized to a hex or 'transparent'.	Color
Clothing Graphic	The graphic or pattern displayed on the clothing.	Text
Eyes	The style of the avatar's eyes (e.g., default, wink).	Text
Eyebrows	The style of the avatar's eyebrows (e.g., default, raised).	Text
Mouth	The style of the avatar's mouth (e.g., smile, serious).	Text
Nose	The style of the avatar's nose (e.g., default).	Text
Hair Color	The color of the avatar's hair, normalized to a hex or 'transparent'.	Color
Top	The type of headwear or hairstyle (e.g., hat, hair type).	Text
Top Probability	The percentage chance (0–100) of including a headwear or hairstyle.	Number
Facial Hair	The type of facial hair (e.g., beard, moustache).	Text
Facial Hair Color	The color of the facial hair, normalized to a hex or 'transparent'.	Color
Facial Hair Probability	The percentage chance (0–100) of including facial hair.	Number
Skin Color	The color of the avatar's skin, normalized to a hex or 'transparent'.	Color
Flip	A boolean to horizontally mirror the avatar image.	Yes/No
	Settings for file manager
Save To Bubble	Indicates if should save the generated avatar to bubble file manager	Yes/No
Endpoint	Url of the current page to save in file manager the genrated image	Text

Exposed states

Element Events

Workflow example

Here are some basic workflow examples to get you started with the Avatar Creator Pro For Bubble Mobile plugin:

Name	Description	Type
Generated Avatar Character Url	Generated Avatar Character Url	Text
Generated Avatar Character Seed	Generated Avatar Character Seed	Text
Bubble File Url	Bubble File Url from File Manager	Text

Name	Description
Character Saved To Bubble	Triggered when a Generated Character is Saved to File Manager
Character Avatar Initialized	Triggered when a Character is Initialized
Custom Character Generated	Triggered when a Custom Character Generated
Random Character Generated	Triggered when a Random Character Generated