Instructions
Instructions to Use the "Emoji Feedback" Plugin
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.
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).
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.