# In-App Product Tours \[Legacy] ### 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. {% hint style="success" %} Great for onboarding, feature adoption, and contextual training. {% endhint %} ![](https://d33v4339jhl8k0.cloudfront.net/docs/assets/65cd1b060e92bd4055f3b684/images/66be7ccf6eb51e63b8f9f06b/file-9ghpuGEZkH.png) {% hint style="danger" %} Requires Scale, Growth or Enterprise plan {% endhint %} 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 {% @supademo/embed demoId="clzvwnyj100l9w28q87cf40ir" url="" %} #### **1. Install the SDK** Add this line of code inside your app’s `` or ``: ``` ``` #### 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** ``` ``` **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:** ``` ``` **Trigger a Showcase:** ``` ``` {% hint style="info" %} Please note that you can add the bolded part of the code snippet to any element. {% endhint %} #### 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"); ``` {% hint style="success" %} Note: Replace YOUR\_DEMO\_ID or YOUR\_SHOWCASE\_ID with the actual id of your specific Supademo or Showcase. {% endhint %} See the full instructions in-app by [visiting this link.](https://app.supademo.com/tour) *** ### 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. 1. **Get the SDK**\ Go to [Supademo Tour Setup](https://app.supademo.com/tour) and copy the client-side SDK script. 2. **Install the SDK via GTM**\ In Google Tag Manager, create a new **Custom HTML** tag and paste the SDK script. 3. **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. 4. **Choose a Trigger**\ Decide when the Supademo should launch (e.g., on page load, button click, or image click). Configure this trigger in GTM. 5. **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: {% @supademo/embed demoId="cm96pjr6d47oheyp01cqnoyml" url="" %}