# 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="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.supademo.com/share/embed/in-app-product-tours-legacy.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.