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

If your button or trigger element is rendered dynamically (e.g., through frameworks like React or Vue), you need to initialize the SDK after the element is loaded. Use the following code to reinitialize Supademo for any new elements added to the DOM.

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

To display a Supademo, add our data attribute to any HTML element you want to act as a trigger. When a user clicks the element with this attribute, it will open the Supademo in a modal window.
<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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us