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.

PreviousFolder sharing NextShowcase collection

Last updated 6 days ago

Was this helpful?

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.

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.

. 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.

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.

Please see the example below for a step-by-step walkthrough of how to set this up:

PreviousFolder sharing NextShowcase collection

Last updated 6 days ago

Was this helpful?

What are in-app product tours?

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.

. 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

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.

Please see the example below for a step-by-step walkthrough of how to set this up: