In-App Product Tours [Legacy]

Trigger interactive demos directly inside your app—giving users contextual help, onboarding, or feature walkthroughs exactly when and where they need it.

What are in-app product tours?

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.

How to set up in-app product tours

1. Install the SDK

Add this line of code inside your app’s <head> or <body>:

<script src="https://script.supademo.com/script.js"></script>

2. Initialize the SDK for dynamic elements

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: "" }
  });
});

3. Trigger via click

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>

Please note that you can add the bolded part of the code snippet to any element.

4. Trigger a Supademo or Showcase programmatically via event

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.

Triggering in-app product tours using Google Tag Manager

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:

PreviousPopup Embed NextEmbed Events API

Last updated 10 months ago

Was this helpful?