How to embed Supademo on Bubble
Embedding interactive product demos directly into your Bubble application enhances user onboarding and reduces support requests. This guide walks you through the process of extracting and integrating a Supademo embed code into your Bubble project.
Quick summary
In this tutorial, you'll learn how to access the Share menu, locate the embed code option, copy the necessary code, and upload it to your Bubble application. By the end, you'll have a fully functional embedded demo ready for your users.
Why this matters
Embedding demos directly in your application keeps users engaged without redirecting them to external sites, improving retention and reducing friction during product discovery. This seamless integration allows you to provide contextual help exactly when users need it most.
Step-by-step guide
- 1
Click on Share
Open your demo in Supademo and locate the Share button in the top navigation or action menu. Click it to access sharing and embedding options.
- 2
Click on Embed Anywhere on Web
From the Share menu, select the Embed Anywhere on Web option. This will present you with embedding configurations and code options.
- 3
Copy embed code
Click the Copy embed code button to copy the iframe or embed snippet to your clipboard. This code contains all the necessary references to display your demo.
- 4
Upload to Bubble
Navigate to your Bubble application's design editor and add an HTML element or custom embed component. Paste the copied embed code into the designated field.
- 5
Configure embed settings
Adjust any sizing, positioning, or display settings within Bubble to match your application's layout and design requirements. Preview the embedded demo to ensure it displays correctly.
- 6
Test the embedded demo
Load your Bubble application in preview or live mode to verify the demo loads and functions properly. Check responsiveness across different screen sizes.
- 7
Publish your changes
Once you're satisfied with the embedding and appearance, deploy your Bubble application to make the embedded demo accessible to your users.
Frequently asked questions
Common questions about how to embed supademo on bubble.
Can I customize the appearance of the embedded demo?
Yes. The embed code allows you to adjust dimensions, styling, and display options. Within Bubble, you can further customize the container styling, spacing, and positioning to match your application's design system and layout requirements.
Will the demo be responsive on mobile devices?
Yes, the embed code is responsive by default. However, you should test it across different screen sizes in Bubble's preview mode to ensure it displays correctly on mobile, tablet, and desktop views.
What if the embed code doesn't display properly?
Check that you've pasted the complete embed code into Bubble's HTML element or custom embed component. Verify that your Bubble application allows external embeds and that your internet connection is stable. If issues persist, ensure the Supademo is published and publicly accessible.
Can I update the demo without re-embedding the code?
Yes. Since the embed code links to your demo on Supademo's servers, any changes you make to the demo will automatically appear in the embedded version. You won't need to re-upload or update the code in Bubble.
Is there a limit to how many demos I can embed?
There is no technical limit to embedding multiple demos in Bubble. However, be mindful of performance and user experience—too many embedded demos on a single page may slow down load times or overwhelm users.