In-app product tours
Trigger interactive demos directly inside your app—giving users contextual help, onboarding, or feature walkthroughs exactly when and where they need it.
Last updated
Was this helpful?
Trigger interactive demos directly inside your app—giving users contextual help, onboarding, or feature walkthroughs exactly when and where they need it.
Last updated
Was this helpful?
Was this helpful?
With a single script and minimal setup, you can launch any Supademo or Showcase as a full-screen modal inside your product. Attach demos to buttons, tooltips, feature flags, or product milestones—no heavy engineering effort required.
Great for onboarding, feature adoption, and contextual training.
Requires Scale, Growth or Enterprise plan
Using a few lines of code, you can now surface unlimited onboarding demos, product tutorials, or new feature highlights throughout your entire app.
Simply add a one-line Supademo script to your app and you’ll be able to open a Supademo or Showcase in a full-screen modal by adding a small ID to any button, tooltip, or clickable element.
Add this line of code inside your app’s <head> or <body>:
<script src="https://script.supademo.com/script.js"></script>If you’re using frameworks like React, Angular, Vue, or Svelte, you’ll need to initialize Supademo after the DOM is rendered. Here's how:
HTML
<script>
Supademo("YOUR_API_KEY", {
variables: { email: "", name: "", custom_variable: "" }
});
</script>React
useEffect(() => {
Supademo("YOUR_API_KEY", {
variables: { email: "", name: "", custom_variable: "" }
});
}, []);Angular
ngAfterViewInit() {
//@ts-ignore
Supademo("YOUR_API_KEY", {
variables: { email: "", name: "", custom_variable: "" }
});
}Vue
mounted() {
Supademo("YOUR_API_KEY", {
variables: { email: "", name: "", custom_variable: "" }
});
}
Svelte
onMount(() => {
Supademo("YOUR_API_KEY", {
variables: { email: "", name: "", custom_variable: "" }
});
});Add the data attribute to any button or HTML element to trigger a Supademo or Showcase.
Trigger a Supademo:
<button data-supademo-demo="YOUR_DEMO_ID">View Demo</button>Trigger a Showcase:
<button data-supademo-showcase="YOUR_SHOWCASE_ID">View Showcase</button>You can also trigger tours using custom events in your app:
Trigger a Supademo via JavaScript:
Supademo("YOUR_API_KEY").loadDemo("YOUR_DEMO_ID");Trigger a Showcase via JavaScript:
Supademo("YOUR_API_KEY").loadShowcase("YOUR_SHOWCASE_ID");Note: Replace YOUR_DEMO_ID or YOUR_SHOWCASE_ID with the actual id of your specific Supademo or Showcase.
See the full instructions in-app by visiting this link.
You can also trigger Supademos and Showcases in-app by using the Supademo script in conjunction with Google Tag Manager.
Get the SDK Go to Supademo Tour Setup and copy the client-side SDK script.
Install the SDK via GTM In Google Tag Manager, create a new Custom HTML tag and paste the SDK script.
Create a Tag to Fire Your Supademo Set up another Custom HTML tag using your unique Supademo API key and the ID of the Supademo you want to show.
Choose a Trigger Decide when the Supademo should launch (e.g., on page load, button click, or image click). Configure this trigger in GTM.
Save and Publish Save your changes, publish your GTM container, and test to confirm the Supademo fires as expected.
Please see the example below for a step-by-step walkthrough of how to set this up: