In-App Product Tours
In-App Product Tours allow users to trigger any Supademo or Showcase from their workspace directly within their app as a modal overlay.
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 using Supademo
1) Install our client-side SDK
Our SDK lets you display Supademos directly in your app. Add the following code anywhere inside the <head> or <body> tags.
<script src="https://script.supademo.com/script.js"></script>
2) Initialize the SDK for Dynamic Elements
HTML
<script>Supademo("9921e7b9b9f41229a4685784185321286970d37953a46402d029315a037921bf", {variables: {email: "", name: "", custom_variable: ""}});</script>
REACT
useEffect(() => {Supademo("9921e7b9b9f41229a4685784185321286970d37953a46402d029315a037921bf", {variables: {email: "", name: "", custom_variable: ""}});}, []);
ANGULAR
ngAfterViewInit() {//@ts-ignoreSupademo("9921e7b9b9f41229a4685784185321286970d37953a46402d029315a037921bf", {variables: {email: "", name: "", custom_variable: ""}});}
VUE
mounted() {Supademo("9921e7b9b9f41229a4685784185321286970d37953a46402d029315a037921bf", {variables: {email: "", name: "", custom_variable: ""}});}
SVELTE
onMount(() => {Supademo("9921e7b9b9f41229a4685784185321286970d37953a46402d029315a037921bf", {variables: {email: "", name: "", custom_variable: ""}});});
3) Trigger a Supademo or Showcase
Trigger a Supademo or Showcase via button/element click
// TRIGGER SUPADEMO VIA CLICK <button data-supademo-demo="YOUR_DEMO_ID">View Demo</button> // TRIGGER SHOWCASE VIA CLICK <button data-supademo-showcase="YOUR_SHOWCASE_ID">View Showcase</button>
Trigger a Supademo or Showcase programmatically via event
You can also programmatically trigger Supademos and Showcases by using javascript events — such as first load, first view, state, or value.
// TRIGGER SUPADEMO VIA EVENT
Supademo("YOUR_API_KEY").loadDemo("YOUR_DEMO_ID")
// TRIGGER SHOWCASE VIA EVEENT
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.