Embed
Integrate interactive content into your website, help docs, or application.
About this lesson
Master demo embedding to integrate interactive content into your website, help docs, or application. Learn about embed options, responsive sizing, and best practices for seamless integrations.
Key takeaways
- Generate embed codes for any platform
- Configure responsive sizing options
- Customize embed appearance
- Integrate with popular tools and CMS
Prefer to read? Expand to read the lesson
The Embeds Section
The second section of the Share page is called Embeds.
Embeds let Supademos live directly inside other tools, instead of being opened as standalone links. This is useful when you want a demo to appear exactly where someone is already working, reading, or getting stuck.
There are two embed types: inline embeds and pop-up embeds. Each one is used in a different situation.
Inline Embeds
Inline embeds place a Supademo or showcase directly inside a page using an iframe.
For the most part, anywhere iframes are supported, Supademos can be embedded.
Inline embeds are most commonly used in documentation and knowledge bases, where the demo should appear as part of the content itself. Instead of linking out to a separate page, the walkthrough lives alongside the written explanation.
Pop-up Embeds
Pop-up embeds work differently.
Instead of being embedded directly into a page, the demo opens as a pop-up overlay when a viewer clicks a specific trigger, such as a button, link, or icon inside an app or interface.
Pop-up embeds are ideal for in-app guidance. They're often used for onboarding, feature education, or contextual help tied to a specific workflow. A user can open the demo, watch or interact with it, then close it and immediately continue what they were doing.
They're also commonly used in training and support scenarios, where help needs to appear right at the moment it's needed, without pulling the user out of their current environment.
In product marketing and expansion use cases, pop-up embeds can be used to explain features that aren't enabled yet. Clicking a locked or premium feature can trigger a demo that shows how it works, helping users understand the value before upgrading.
Bringing Demos Closer to Users
Both embed types make it possible to bring Supademos closer to where users already are — whether that's inside documentation, internal tools, or directly within the product itself.
Next, we'll look at exports and downloads, and when it makes sense to share Supademos outside the browser entirely.
Try interactive demos of features in this lesson
Experience step-by-step examples of features you just learned