Bubble Plugin

Opineeo provides a native Bubble plugin that makes it easy to add surveys to your Bubble.io applications without any coding required.

What is the Bubble Plugin?

The Opineeo Bubble plugin is a no-code integration that allows you to add powerful survey functionality to your Bubble applications. It provides a visual interface for configuring surveys and collecting feedback from your users.

Plugin Page: https://bubble.io/plugin/opineeo-survey-widget-1760488981691x927927706389577700

Plugin Installation

1. Find the Plugin

Visit the Opineeo plugin page in the Bubble plugin marketplace:

Opineeo Survey Widget Plugin

2. Install to Your App

1. Click the "Install" button on the plugin page
2. Select the Bubble app where you want to install Opineeo
3. Confirm the installation

3. Verify Installation

After installation, the Opineeo plugin will appear in your app's Plugins tab. You can verify it's installed correctly by:

1. Opening your Bubble editor
2. Going to the Plugins tab
3. Looking for "Opineeo Survey Widget" in the installed plugins list

Using the Plugin

Adding a Survey Element

1. Open the Design Tab: Navigate to the page where you want to add a survey
2. Add Visual Element: Drag and drop a new element onto your page
3. Select Opineeo: In the element picker, look for the Opineeo Survey Widget element
4. Configure Position: Position and size the element where you want the survey to appear

Configuring the Survey

Once you've added the Opineeo element to your page, configure it in the property editor:

Required Settings

1. Survey ID: Enter your unique survey identifier

   • Get this from your Opineeo dashboard at app.opineeo.com

2. API Token: Enter your API authentication token

   • Get this from your Opineeo dashboard

Optional Settings

1. User ID: Track responses by user

   • You can use dynamic data like Current User's unique id

2. Extra Info: Add additional context to survey responses

   • Example: "planType=premium&source=dashboard"

3. Custom CSS: Style the survey to match your brand

   • Add custom CSS rules to override default styles

4. Auto Close: Automatically close the survey after completion

   • Enter time in milliseconds (e.g., 3000 for 3 seconds)
   • Leave empty or set to 0 to disable auto-close

Dynamic Data in Bubble

You can make your surveys dynamic by using Bubble's dynamic data:

User Tracking

User ID field: Current User's unique id

This automatically associates survey responses with the logged-in user.

Conditional Display

You can show/hide the survey based on conditions:

1. Select the Opineeo element
2. Go to the Conditional tab
3. Add a condition like:
   • When Current User is logged in
   • This element is visible: yes

Custom Survey per User Type

Create different survey experiences:

Survey ID field: If Current User's plan type is "Premium" then "survey-premium" else "survey-free"

Handling Survey Events

The Bubble plugin emits events that you can use to trigger workflows:

Survey Completed Event

1. Create a Workflow: Go to the Workflow tab
2. Add Event: Click "+ Click here to add an event"
3. Select Event: Choose "Opineeo Survey Widget - Survey Completed"
4. Add Actions: Add actions to run when the survey is completed

Example actions:

• Show a custom message
• Navigate to a different page
• Update a database field
• Send data to external services

Survey Closed Event

Similar to the completed event, you can create workflows for when the survey is closed (completed or dismissed).

Common Use Cases

User Onboarding Survey

Show a survey to new users after they sign up:

1. Add the Opineeo element to your onboarding page
2. Set Survey ID to your onboarding survey
3. Set User ID to Current User's unique id
4. Add a workflow on "Survey Completed" to mark onboarding as complete

Feature Feedback

Collect feedback after users use a specific feature:

1. Add the Opineeo element to the feature page
2. Set Extra Info to identify the feature: "feature=export"
3. Use conditional visibility to show only after feature use
4. Auto-close after 3 seconds to reduce friction

Exit Survey

Show a survey when users try to leave or cancel:

1. Add the Opineeo element to your cancellation page
2. Set Survey ID to your exit survey
3. Track reasons for leaving
4. Use survey data to improve retention

NPS Survey

Measure Net Promoter Score periodically:

1. Create a recurring workflow to show survey
2. Use conditional logic based on last survey date
3. Set User ID to track responses per user
4. Prevent duplicate submissions with user tracking

Getting Your Credentials

To use the Bubble plugin, you need:

1. Survey ID: Unique identifier for your survey
2. API Token: Authentication token

How to Get Credentials

1. Sign Up: Create a free account at app.opineeo.com/sign-up
2. Create Survey: Build a new survey in the dashboard
3. Get Credentials: Copy your Survey ID and API Token from the integration page
4. Add to Bubble: Paste them into your Bubble element properties

Styling Your Survey

Using Custom CSS

You can customize the appearance of your survey to match your Bubble app's design:

1. Select the Opineeo element
2. In the Custom CSS field, add your styles

Example custom CSS:

.sv {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.sv-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
}

.btnp {
    background: #10b981;
    border-radius: 8px;
}

.btnp:hover {
    background: #059669;
}

Available CSS Classes

• .sv - Survey container
• .sv-question - Question container
• .sv-title - Question title
• .sv-description - Question description
• .btnp - Primary button
• .btns - Secondary button
• .star-svg - Star rating SVG
• .option-btn - Option button
• .textarea-input - Text area input

Best Practices

1. Test Before Publishing

Always test your survey in Bubble's preview mode before publishing to production.

2. Mobile Responsive

The Opineeo widget is mobile-first, but ensure your Bubble page layout is also responsive.

3. User Privacy

If collecting user data, ensure you:

• Have proper privacy policies in place
• Inform users about data collection
• Comply with GDPR/privacy regulations

4. Performance

• Don't add too many survey elements on a single page
• Use conditional visibility to show surveys only when needed
• Consider using auto-close to reduce UI clutter

5. User Experience

• Keep surveys short and focused
• Show surveys at the right moment (not immediately on page load)
• Provide value in exchange for feedback (discounts, early access, etc.)

Troubleshooting

Survey Not Appearing

If the survey doesn't appear:

1. Check Credentials: Verify Survey ID and API Token are correct
2. Check Visibility: Ensure the element is visible (check conditional settings)
3. Check Size: Make sure the element has sufficient height and width
4. Browser Console: Open browser developer tools and check for errors

Survey Shows Error

If you see an error message:

1. Verify API Token: Ensure your token is valid and not expired
2. Check Survey ID: Confirm the survey ID matches an active survey
3. Network Issues: Check your internet connection
4. Domain Whitelist: For paid plans, verify your domain is whitelisted

Survey Not Submitting

If responses aren't being recorded:

1. Complete All Required Questions: Ensure all required questions are answered
2. Check Network: Verify network requests are successful in browser tools
3. Contact Support: If issues persist, contact contact@opineeo.com

Styling Not Working

If custom CSS isn't applying:

1. Check Selectors: Ensure you're using the correct CSS class names
2. Use !important: For stubborn styles, use !important flag
3. Clear Cache: Clear browser cache and refresh
4. Inspect Element: Use browser dev tools to inspect actual classes

Support

Need help with the Bubble plugin?

• Plugin Page: Bubble Marketplace
• Email Support: contact@opineeo.com
• Documentation: opineeo.com/docs
• Bubble Forum: Search for "Opineeo" in the Bubble forum
• Feature Requests: We're always improving! Send suggestions to contact@opineeo.com

Next Steps

Now that you understand the Bubble plugin, check out:

• Install the Plugin - Get started with the Bubble plugin
• Configuration - Learn about all configuration options
• API Access - Integrate with external services
• About - Learn more about Opineeo's features

Ready to collect feedback? Install the plugin and start gathering valuable insights today!