In-App Tours
In-App Tours allow users to trigger any Supademo 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 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", {email: "", // optional user emailname: ""// optional user name});</script>
REACT
useEffect(() => {Supademo("9921e7b9b9f41229a4685784185321286970d37953a46402d029315a037921bf", {email: "", // optional user emailname: ""// optional user name});}, []);
ANGULAR
ngAfterViewInit() {//@ts-ignoreSupademo("9921e7b9b9f41229a4685784185321286970d37953a46402d029315a037921bf", {email: "", // optional user emailname: ""// optional user name});}
VUE
mounted() {Supademo("9921e7b9b9f41229a4685784185321286970d37953a46402d029315a037921bf", {email: "", // optional user emailname: ""// optional user name});}
SVELTE
onMount(() => {Supademo("9921e7b9b9f41229a4685784185321286970d37953a46402d029315a037921bf", {email: "", // optional user emailname: ""// optional user name});});
3) Trigger a Supademo
<button data-supademo-demo="YOUR_DEMO_ID">View Demo</button>
Note: Replace YOUR_DEMO_ID with the actual id of your specific Supademo.
See the full instructions in-app by visiting this link.