Skip to content
Supademo Academy
Start free

Trigger Interactive Demos Inside Your App

Learn how to trigger contextual interactive demos within your product to guide users through features and workflows at the right moment.

What

In-app demos are contextual walkthroughs triggered inside your product to guide users through features, onboarding flows, or new releases.

Who

Product teams, growth teams, and customer success managers focused on user activation and feature adoption.

Why

In-app demos meet users where they are, reducing friction and support tickets while driving feature discovery and activation at critical moments.

Step 1

Intro to Demo Hubs

Demo Hub is an embedded widget that gives users searchable, on-demand access to your Supademos right inside your application. Unlike product tours that interrupt workflows, Demo Hub lets users choose when and what to learn.

Tips

  • Limit categories to 5–7 for easy navigation
  • Structure categories by user journey stage

Common Pitfalls

  • Creating too many categories overwhelms users
  • Forgetting to update demos after product changes

Recommendations

  • Highlight a 'Start Here' demo at the top of your hub
  • Use the SDK's open() method to trigger the hub contextually
Introducing Demo Hub
Prefer to read? Expand to read the lesson

What Are Demo Hubs?

Demo Hubs are embedded widgets that centralize your interactive demos and let users search and interact with them on demand, right inside your application or website. They can be triggered through a customizable launcher widget or by tying them to any custom element like a button, tooltip, or menu item. You can create one or many Demo Hubs showing different variations based on pages, product lines, use cases, user conditions, and more.

Why Demo Hubs Over Traditional Product Tours

Traditional in-app product tours have several well-known problems. Tours often interrupt the user's flow and get skipped more than 70% of the time. They pop up when users don't need them and disappear forever when they do. They're also brittle and high-maintenance, often breaking when your product changes. And usage-based pricing penalizes you as your product grows.

Demo Hubs solve these issues directly:

  • They contain searchable, user-initiated micro demos that are relevant to what the user is actually looking for
  • Anyone on your team can add, remove, chain, and reorganize demos without design skills or code changes
  • Demos take seconds to create and never break
  • All-in pricing with no extra charges as you scale

Popular Use Cases

  • Quick start guides or onboarding checklists
  • Spotlighting newly shipped features or quarterly releases
  • Role-based workflow tutorials
  • Self-serve demos and tutorials that address your most commonly asked questions

Creating a Demo Hub

Setting up a Demo Hub takes just 2 to 3 minutes. Navigate to the Demo Hub page in Supademo, create a new hub, and your workspace branding is pulled in automatically. From the Appearance tab, you can choose between a logo or descriptive title header, set a gradient or solid background style, pick a light or dark theme, and add custom footer links.

For content, create categories (as many as you need) and add demos to each one by searching your existing library. You can rename demos, swap thumbnails, and rearrange the order at any point. Any updates you make to a demo propagate in real time.

Installation Options

There are two ways to launch a Demo Hub. The first is a persistent floating launcher that sits on the bottom right or left of your app. Install the Supademo SDK script, then initialize the widget with a useEffect (for React apps) using your widget ID.

The second option is a custom trigger, where you attach the Demo Hub to any button, tooltip, or element in your app using an onClick handler. Both methods use the same SDK. You can also restrict which pages the widget appears on by configuring URL rules in the settings.

Step 2

Tips, Tricks, and Recommendations

Trigger demos contextually based on user actions rather than showing everything at once. Keep individual demos focused on a single workflow, and use analytics to identify which demos drive the most activation.

Tips

  • Trigger demos based on user behavior, not just page loads
  • Keep each demo focused on one workflow or feature

Common Pitfalls

  • Overwhelming users with too many demos at once
  • Not updating in-app demos when the product UI changes

Recommendations

  • Start with your highest-friction onboarding steps
  • Schedule quarterly reviews to keep demos current
In-App Demo Best Practices
Prefer to read? Expand to read the lesson

Widget vs. Trigger: When to Use Each

One of the first decisions to make is whether to launch your Demo Hub using the persistent widget or a custom trigger.

Use the widget when you need a general self-serve help layer, like help docs, a resource center, or a simple "start here" experience. It works best when users need different answers at different times and you want one always-available place they can return to.

Use trigger-based Demo Hubs when help should show up in context. Good examples include an integration guide on your dashboard, a tooltip next to an analytics feature, or guidance beside an advanced setting. This way, help appears when it's actually relevant instead of requiring users to find it on their own.

Reuse One Demo Hub Across Multiple Pages

You do not need to create a separate Demo Hub for every page or feature. You can reuse the same hub across multiple pages and simply have a different tab pre-selected when triggered from each location.

For example, on one page the hub opens to the "Getting Started" tab, on another it opens to "Reporting," and on a third it opens to "Advanced Workflows." Same hub, different starting point, with far less duplication and maintenance.

Convert Existing Showcase Collections

If you already use showcase collections for onboarding or training, you can turn them into a Demo Hub in one click instead of rebuilding from scratch. This lets you repurpose content you have already built with no extra work.

Key Takeaways

  • Use the widget for broad, always-available guidance
  • Use triggers when help should appear next to a specific action or feature
  • Reuse one Demo Hub across pages by opening the right tab by default
  • Start from the content you already have for the fastest path to scalable in-app guidance