Emoji Feedback

Instructions to Use the "Emoji Feedback" 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 "Emoji Feedback."
     
   • Install the plugin into your app.
     
2. Use the Plugin Element
   • Drag and drop the "Emoji Feedback" element onto your page from the editor's element panel.
     
   • In the property editor, configure the following options:
     
   • Feedback Label: Set the label that appears at the top of the feedback section (e.g., "How was your experience?"). You can also customize the label's size and color.
     
   • Emoji List: Provide a list of emojis to display for feedback. Default emojis are:
     • 😀 (Very Happy)
       
     • 😊 (Happy)
       
     • 😐 (Neutral)
       
     • ☹️ (Sad)
       
     • 😢 (Very Sad)
       
   • Emoji Labels: Add labels corresponding to each emoji (e.g., "Very Happy," "Happy").
     
   • Emoji Size: Adjust the size of the emojis (default: 24px).
     
   • Emoji Border Color and Radius: Customize the border color and border radius for the selected emoji.
     
   • Container Gap: Specify the spacing between emojis in the container.
     
   • Textarea Customization:
     • Add a text input box for users to provide detailed feedback.
       
     • Customize the placeholder text (default: "How can we improve?").
       
     • Adjust the width, height, padding, text color, background color, border color, and border radius for the textarea.
       
   • Submit Button Customization:
     • Set the button text (default: "Submit Feedback").
       
     • Adjust padding, border, border radius, background color, and text color.
       
     • Configure hover effects (hover background color and text color).
       
3. User Interaction
   • Users can click on an emoji to select it, and the selected emoji will be highlighted with dynamic styles (e.g., border color, linear gradient).
     
   • Users can provide detailed feedback in the text box.
     
   • Upon clicking the submit button:
     
   • The plugin publishes the following states:
     • Selected Emoji: The emoji clicked by the user.
       
     • Selected Label: The label corresponding to the selected emoji.
       
     • Feedback: The text entered in the textarea.
       
   • A thank-you message is displayed below the button.
     
   • The form resets, clearing the text box and deselecting the emoji.