Demo Hub
Demo Hubs allow you group Supademos and Showcases into a contextual, searchable hub inside of your application, website, or document.
What are Demo Hubs?
Demo Hub is an in-app widget that gives your users searchable, on-demand access to your Supademos, right inside your application or website. Unlike traditional product tours that interrupt workflows, Demo Hubs let users choose when and how to engage with product guidance. You can bundle multiple Supademos or Showcases into organized categories, making it easy for users to learn new features, troubleshoot issues, or explore advanced capabilities at their own pace.
How to Create a Demo Hub
Step 1: Navigate to Demo Hub
Click Demo Hub in your left sidebar navigation
Click Create Demo Hub button
Step 2: Name Your Demo Hub
Enter a descriptive name for your Demo Hub (e.g., "Product Guides", "Help Center")
Click Create
Step 3: Organize with Categories
Your Demo Hub comes with three default categories that you can customize:
Click on a category name to rename it
Click Add Category to create additional sections
Drag and drop categories to reorder them
Delete unwanted categories using the menu (•••)
Category Ideas:
Getting Started
Key Features
Advanced Workflows
Troubleshooting
New Updates
Best Practices
Step 4: Add Demos to Categories
Click Add Content within a category
Search for existing Supademos or Showcases
Select demos to add to the category
Reorder demos by dragging them within the category
Optionally add a custom display name for each demo
Step 5: Customize Appearance
Click the Appearance tab to customize your Demo Hub:
Header Options:
Choose between Title or Logo display
Upload a custom header logo
Select background style (Gradient or Solid color)
Customize header text color
Toggle close button visibility
Set header alignment (Left, Center, Right)
Theme:
Light or Dark mode to match your application
Launcher:
Toggle launcher visibility (show/hide the floating icon)
Choose launcher position (Left or Right side)
Upload a custom launcher icon/logo
Footer:
Add custom footer label
Include helpful links (e.g., Knowledge Base, Contact Support)
Step 6: Install in Your Application
Navigate to the Install tab for setup instructions:
Add the SDK Script - Copy and paste the script tag into your application's
<head>or<body>:<script src="https://script.supademo.com/supademo.js"></script>Initialize the Demo Hub - For single-page applications (React, Vue, Angular, Svelte), initialize after your app loads:
Supademo.widget.init("your-widget-id");Optional: Custom Triggers - If you disabled the launcher, trigger the Demo Hub programmatically:
// Open Demo Hub Supademo.widget.open('your-widget-id'); // Close Demo Hub Supademo.widget.hide();Restrict Access (Optional) - Limit Demo Hub visibility to specific domains by adding allowed domains (supports wildcards like
*.yourdomain.com)
Why Use Demo Hub?
Replace Disruptive Product Tours
Traditional product tours interrupt user workflows and often get dismissed. Demo Hubs provide contextual, on-demand guidance that users can access when they're ready to learn.
Key Benefits
Unlimited tours, unlimited viewers - Scale your in-app guidance without usage-based pricing constraints
Instant setup - Add a simple code snippet to your application and deploy immediately
Zero maintenance - Update demos without technical work or app releases
Searchable & organized - Users can quickly find relevant demos through search and category navigation
Always accessible - Demos are available whenever users need them, reducing support tickets
Non-intrusive - Optional launcher icon or custom trigger button gives users control
Common Use Cases & Tips
Demo Hubs work well for in-app support & onboarding, website sales enablement, and learning & training.
Organizing Your Content:
Group demos by user journey (e.g., Getting Started → Advanced Features)
Use 5-7 categories maximum for easier navigation
Keep category names clear and descriptive
Add the most important demos first within each category
Customization Tips:
Match Demo Hub appearance to your application's design
Choose a launcher position that doesn't conflict with your app's UI
Use custom triggers for seamless integration at specific touchpoints
Restrict access using allowed domains if needed
Keeping It Useful:
Update demos when features change
Use descriptive demo titles and display names
Review analytics to see which demos are most viewed
Add demos for new feature releases to drive adoption
FAQ
Q: Can I have multiple Demo Hubs? Yes! You can create multiple Demo Hubs for different applications, user segments, or use cases. Each Demo Hub has its own unique widget ID and can be customized independently.
Q: Will Demo Hub slow down my application? No. The SDK script loads asynchronously and only fetches demo content when a user opens the Demo Hub, ensuring minimal impact on page performance.
Q: Can I control who sees the Demo Hub? Yes. Use the Allowed Domains feature to restrict Demo Hub visibility to specific domains. You can also programmatically control when and where the Demo Hub appears using custom triggers.
Q: How do I track Demo Hub usage? Demo Hub views and interactions are tracked in your Supademo analytics dashboard. You can see which demos are most popular, completion rates, and user engagement patterns.
Q: Can I customize the Demo Hub further? Yes! The appearance tab offers extensive customization including themes, colors, logos, and layouts. For advanced customizations, contact support.
Q: What's the difference between Demo Hub and Showcase?
Demo Hub is an embedded, in-app widget that lives inside your application with a searchable interface
Showcase is a standalone, shareable link that displays multiple demos in sequence
Both can contain multiple demos, but serve different use cases.
Was this helpful? Let us know at [email protected]
Last updated
Was this helpful?