# 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 * --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.supademo.com/share/multi-demo-sharing/demo-hub.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.