UI Avatar

Demo Link: https://chakor-demo-4.bubbleapps.io/version-test/ui_avatar

Editor Link: https://bubble.io/page?id=chakor-demo-4&test_plugin=1734426896125x666589589309751300_current&tab=Design&name=ui_avatar&type=page

Instructions to Use the "UI Avatar" Plugin

1. Install the Plugin in Your Bubble App
   
   • Open your Bubble app editor.
     
   • Navigate to the Plugins tab.
     
   • Click on Add Plugins and search for "UI Avatar" Plugin.
     
   • Install the plugin into your app.
     
2. Use the "UI Avatar Get Avatar" Data Action
   • In your app, use the plugin’s action "UI Avatar Get Avatar" to generate the avatar.
     
   • The action takes the following fields:
     
   • Name: Text or initials to display (e.g., "John Doe").
     
   • Size: Image size in pixels (e.g., "100").
     
   • Background: Hex code for background colour (e.g., "#FF5733").
     
   • Color: Hex code for text colour (e.g., "#FFFFFF").
     
   • Length: Number of characters to display from the name.
     
   • Font-Size: Adjusts the font size of the text.
     
   • Rounded: "true" for circular avatars, "false" for square.
     
   • Bold: "true" for bold text, "false" for normal text.
     
3. Display the Returned Value in an Image Field
   • Add an Image Element where you want to show the avatar.
     
   • Set the Image Source to the returned value from "UI Avatar Get Avatar".
     
   • The plugin provides a dynamic image URL that displays the avatar based on your inputs.