# Demo Hub ### 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. {% embed url="" %} 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 {% @supademo/embed demoId="cmgtecfs62rtdyzgyfn85wra3" url="" %} #### Step 1: Navigate to Demo Hub 1. Click **Demo Hub** in your left sidebar navigation 2. Click **Create Demo Hub** button #### Step 2: Name Your Demo Hub 1. Enter a descriptive name for your Demo Hub (e.g., "Product Guides", "Help Center") 2. Click **Create** #### Step 3: Organize with Categories Your Demo Hub comes with three default categories that you can customize: 1. Click on a category name to rename it 2. Click **Add Category** to create additional sections 3. Drag and drop categories to reorder them 4. 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 1. Click **Add Content** within a category 2. Search for existing Supademos or Showcases 3. Select demos to add to the category 4. Reorder demos by dragging them within the category 5. 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: 1. **Add the SDK Script** - Copy and paste the script tag into your application's `` or ``: ```html ``` 2. **Initialize the Demo Hub** - For single-page applications (React, Vue, Angular, Svelte), initialize after your app loads: ```javascript Supademo.widget.init("your-widget-id"); ``` 3. **Optional: Custom Triggers** - If you disabled the launcher, trigger the Demo Hub programmatically: ```javascript // Open Demo Hub Supademo.widget.open('your-widget-id', { defaultCategoryIndex: 1 }); // Close Demo Hub Supademo.widget.hide(); ``` 4. **Open to a specific category/tab**: {defaultCategoryIndex} sets which tab opens by default. first tab = 1, second tab = 2, and so on. ```javascript // Opens Demo Hub to the 2nd category Supademo.widget.open('your-widget-id', { defaultCategoryIndex: 2 }); ``` 5. **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 *