--- title: "Walnut overview" slug: "/help/demos/getting-started/interactive-experiences" last_updated: "2026-03-25T17:48:13Z" zendesk_id: 32035634230803 zendesk_url: "https://help.walnut.io/hc/en-us/articles/32035634230803-Guide-to-Creating-Interactive-Product-Experiences-in-Walnut" locale: "en-us" category: "Getting Started" section: "Walnut Guide Series" product: "demos" topic: "getting-started" displayed_sidebar: "demosSidebar" sidebar_position: 1 tags: ["capture","figma","staging","capture desktop app","html capture","react","react app","import screens","import screen","screenshots","capturing","add screens","deal room","deal rooms"] --- ## **Overview** Walnut makes it easy to turn any product content into an interactive experience—whether you’re starting from a live web app or static assets. Once captured, you can package that content into the right **asset** **type** based on your goal: self-serve exploration, structured education, scalable learning hubs, or sales-ready deal experiences. This guide introduces Walnut’s core asset types and the primary ways teams capture, build, and share interactive product experiences. It covers three key areas: - **Experience Types** – Learn when to use [**Interactive Demos**](#h_demo_types), [**Playlists and Advanced Playlists**](#h_01JY53846HBS0CRB1Y639ZQ371), and [**Interactive Deal Rooms**](#h_01JY4EJSBJJ5HMB1X512VCV57J) to create guided demos, exploration hubs, and buyer-facing workspaces. - **Content Capture & Import** – Bring product experiences into Walnut by capturing [**HTML/CSS content**](#h_01KG07EEM0JWRT7W8XF6XEDYEA) with the [**Walnut Chrome Extension**](/help/demos/getting-started/chrome-extension)—including live web apps and [**published Figma Sites**](/help/demos/capture/capture-figma)— or by importing [**mixed media**](#h_01KG074WZ6FHPMM8E3DKZ261SC) such as images, videos, and documents. - [**Sharing & Activation**](#h_share_demos_playlists) – Learn how to distribute Walnut experiences through [direct links](#h_share_links), [website embeds](#h_share_embeds), [email campaigns](#h_share_sales_crm_workflows), [playlists](#h_share_hubs), [hubs](#h_share_hubs), and [offline workflows](#h_share_offline_demos_playlists) to support marketing, sales, onboarding, and customer education. Use this guide to understand the different ways Walnut experiences can be created, organized, and shared across the customer journey. --- ### **Interactive Demos** Walnut supports multiple demo formats so teams can match the experience to audience intent, funnel stage, and use case. You can publish fully open sandboxes, structured guided demos, or combine both into a hybrid experience. #### **Guided Demos** Guided demos use annotations, tooltips, and step sequencing to lead viewers through a curated story. This format prioritizes clarity, education, and momentum. - **Best for:** Marketing pages, Help Centers, onboarding, education - **Experience:** Structured, narrative-driven walkthroughs - **Common placements:** Embedded demos, learning hubs, documentation ##### **Example of a Guided Demo Experience:** [**Open in a new tab**](https://app.teamwalnut.com/player/?demoId=f4fe9c8b-7371-49a8-b659-d49c24c0e353&showGuide=true&showGuidesToolbar=true&showHotspots=true&openGuidesToolbar=false) :::success[Why teams use guided demos] They consistently drive higher completion, longer session time, and clearer intent signals — especially for anonymous or early-stage traffic. ::: --- #### **Hybrid Demos (Guided + Sandbox)** Hybrid demos combine the best of both worlds. Viewers start with guided context and can then break out into free exploration once they understand the product. - **Best for:** Mixed audiences, product education + evaluation - **Experience:** Guided introduction followed by optional exploration - **Common placements:** Embedded demos, product tours, demo centers ##### **Example of a Hybrid Demo Experience:** [**Open in a new tab**](https://app.teamwalnut.com/player/?demoId=14d70e3a-452c-4158-a3e3-a9b833a83e00&screenId=ae551aaf-328a-49f8-891b-0a5fe325bb3b&showGuide=true&showGuidesToolbar=true&showHotspots=true&openGuidesToolbar=false) :::warning[Best practice] Use guidance to earn attention first, then allow sandbox exploration once users are oriented. This reduces bounce while preserving flexibility. ::: --- #### **Non-Guided (Sandbox) Demos** Non-guided demos give viewers full freedom to explore the product on their own. There are no step-by-step instructions, making this format ideal for confident, high-intent users who want to click around naturally. - **Best for:** Technical evaluators, power users, late-stage prospects - **Experience:** Open exploration with no enforced flow - **Common placements:** Sales-sent links, trial environments, technical pages ##### **Example of a Sandbox Demo Experience:** [**Open in a new tab**](https://app.teamwalnut.com/player/?demoId=aa6cc0e4-de30-4b11-8b75-b2df30ccdf8f&showGuide=true&showGuidesToolbar=true&showHotspots=true&openGuidesToolbar=false&source=app) :::note[Note] Sandbox demos work best when users already understand what they’re looking for. Without guidance, first-time or top-of-funnel viewers may struggle to find value quickly. ::: **Choosing the right format:** Guided demos work best for discovery and education, sandbox demos work best for confident evaluators, and hybrid demos are ideal when you need to support both in a single experience. --- ### **Playlists & Advanced Playlists** Playlists and Advanced Playlists give you flexible ways to organize and deliver immersive, mixed-media   experiences tailored to every stage of the buyer journey. - [Playlists](#h_01KG075KBY5DQCHKZ436VCGVWJ) - [Advanced Playlists](#h_01KG075HGB5XF14PZ45GTZYBXQ) --- #### **Playlists** **Choose Your Own Adventure** Playlists let viewers self-select what matters most to them. Instead of forcing everyone through the same flow, you can group demos and assets into flexible, modular experiences that adapt to different roles, interests, and stages of the journey. Choose Your Own Adventure (CYOA) playlists are characterized by a **stacked player experience**, where multiple demos or assets are organized into a single interactive viewer that allows the audience to explore content in the order that makes the most sense for them. CYOA playlists can be configured in several ways depending on the experience you want to create: - With or without a **welcome screen** - With or without **Choose Your Own Adventure navigation** - With different combinations of demos, videos, documents, or supporting assets This flexibility allows teams to create experiences that range from open exploration hubs to lightly guided discovery journeys. Playlists can also be embedded directly on web pages, learning hubs, and Help Centers, making them ideal for top-of-funnel discovery and self-serve exploration without sending visitors off-page. **Best for:** Broad audiences, top-of-funnel discovery, learning hubs **Experience:** Non-linear exploration across multiple demos and assets **Common use cases:** “How it works” pages, solutions hubs, product education centers ##### **Example of a Choose Your Own Adventure Playlist:** [**Open playlist in a new tab**](https://app.teamwalnut.com/player/playlist?playlistId=8f0048c6-349a-4b3f-b7e6-61a820525dd1&source=app) :::note[Pro Tip] Use embedded playlists when your audience is mixed. Let viewers choose their own path, then use engagement signals (completion, events, CTA clicks) to understand which workflows and stories resonate most. ::: 🧭 **Explore:** [Playlists](INSERT_PLAYLISTS_ARTICLE_LINK) --- #### **Advanced Playlists** **Customer Hub · Sales Hub** :::note[Note] [Advanced Playlists](/help/playlists/advanced) are available as an **add‑on feature**. Contact your Walnut CSM or reach out to our [Support Team](https://help.walnut.io/hc/en-us/requests/new?ticket_form_id=13368501659411) to learn more about enabling this option for your team. ::: Advanced Playlists extend playlists into purpose-built hubs designed for deeper engagement and follow-up. They combine demos, videos, docs, and next steps into a structured experience that can be shared or embedded across customer- and sales-facing workflows. :::note[Customer Hub] Centralize onboarding, enablement, and education content for customers and users in one embedded, guided destination. **Sales Hub** Package demos, assets, and next steps into a focused experience that supports evaluation, deal progression, and account-based workflows. ::: - **Best for:** Multi-stakeholder journeys, ABM, post-demo follow-up - **Experience:** Curated hubs with clear progression and embedded next steps **🧭  Explore:** [**Advanced Playlists (Add-On)**](/help/playlists/advanced) --- #### **Where to Find Playlists** 1. [**Log in** to Walnut](https://app.teamwalnut.com/home). 2. Click the **New** button in the upper-right corner of your Library. 3. Select **Playlist** from the dropdown menu. ![Dropdown showing Playlist selection during demo creation](pathname:///images/ea03dc0d4ba5f54c.png) --- ### **Interactive Deal Rooms** **Walnut Deal Rooms** introduce a powerful deal management experience designed to streamline how sales teams organize, track, and collaborate across the entire sales cycle. The **Deal Room** provides a centralized hub for **product-led selling**—enabling rich product experiences from first touch to closed deal. ![Preview of a Walnut Deal Room in use](pathname:///images/9ba3531e36ba5f98.png) **Where to Find It:** [Walnut Library](https://app.teamwalnut.com/home), [Deals](https://app.teamwalnut.com/deals) **Learn More:** - [Interactive Deal Rooms](/help/deal-rooms/getting-started) - [Automate and Scale: The Rule Engine for Deal Rooms](/help/deal-rooms/rule-engine) - [Deal Rooms Resource Pack](/help/resources/packs/deal-rooms) :::note[Note] [Interactive Deal Rooms](/help/deal-rooms/getting-started) are available as an **add‑on feature**. Contact your Walnut CSM or reach out to our [Support Team](https://help.walnut.io/hc/en-us/requests/new?ticket_form_id=13368501659411) to learn more about enabling this option for your team. ::: --- ## **Ways to Share Walnut Demos & Playlists** Once your demo, playlist, or hub is ready, Walnut provides multiple ways to distribute the experience depending on your audience and workflow. Experiences can be shared through direct links, embedded on web pages, integrated into sales tools, or delivered through structured customer hubs. This flexibility allows teams to activate interactive product experiences across marketing, sales, onboarding, enablement, and customer education. :::note[Presenter Playbook] Looking for a more tactical walkthrough of how presenters use demos, playlists, and hubs across live calls, follow-up, and offline workflows? [**Explore the Presenters Playbook**](INSERT_PRESENTERS_PLAYBOOK_LINK). ::: - [Share via Direct Link](#h_share_links) - [Embed on Websites & Landing Pages](#h_share_embeds) - [Share Through Hubs, Playlists & Deal Rooms](#h_share_hubs) - [Share Through Sales, CRM, and Email Campaign Workflows](#h_share_sales_workflows) - [Share Offline Demos & Playlists](#h_share_offline_demos_playlists) --- ### **Share via Direct Link** Every Walnut demo and playlist can be shared using a unique URL. This is the fastest way to distribute interactive experiences across sales outreach, [follow-up emails](/help/demos/personalize/variables/url-parameters#h_01K1H9NKAJ383617MHK5G0NAYZ), Slack conversations, documentation, and internal enablement. - **Best for:** Sales follow-ups, prospect outreach, internal training - **Experience:** Instant access to the full interactive experience - **Common placements:** [Email](/help/demos/personalize/variables/url-parameters#h_01K1H9NKAJ383617MHK5G0NAYZ), Slack, CRM sequences, documentation :::success[Tip] Direct demo links can include personalization variables or URL parameters to tailor the experience to a specific account, prospect, or campaign. **Learn more:**  - [Track and Identify Viewers with URL Parameters (Email, UTM, and Custom)](/help/demos/personalize/variables/url-parameters) - [Smart Demo Personalization with URL, CRM, and Lead Form Variables](https://help.walnut.io/hc/en-us/articles/28697364380435) - [Email Parameters: Quick Reference](/help/demos/personalize/variables/url-parameters#h_01K1H9NKAJ383617MHK5G0NAYZ) ::: --- ### **Embed on Websites & Landing Pages** Walnut demos and playlists can be embedded directly into websites, product pages, learning centers, and documentation using an iframe embed code. [**Embedded experiences**](/help/playlists/embed-demos) allow visitors to explore the product without leaving the page, making them ideal for self-serve discovery and inbound engagement. - **Best for:** Marketing websites, product pages, learning hubs - **Experience:** Interactive exploration directly within the page - **Common placements:** “How it works” sections, demo centers, resource hubs :::warning[Best practice] Use responsive embed containers and enable mobile optimization to ensure demos scale cleanly across desktop, tablet, and mobile devices. **🏆 For more best practices see:** [**Win With Embedded Demos: Drive Engagement, Accessibility, and Discoverability**](/help/resources/playbooks/embedded-demos-engagement) ::: --- ### **Share Through Hubs, Playlists & Deal Rooms** For multi-stakeholder journeys, demos can be packaged inside [playlists](#h_01KG075KBY5DQCHKZ436VCGVWJ), [Advanced Playlists](#h_01KG075HGB5XF14PZ45GTZYBXQ), or [Interactive Deal Rooms](#h_01JY4EJSBJJ5HMB1X512VCV57J) to create a structured experience that includes supporting resources and next steps. - **Best for:** Customer education, onboarding hubs, ABM workflows - **Experience:** Curated destinations combining demos, videos, documents, and next steps - **Common placements:** Sales follow-ups, onboarding hubs, evaluation environments :::note[Why teams use hubs] When multiple stakeholders are involved, hubs organize demos and supporting resources into a single destination, helping buyers evaluate the product and move deals forward faster. ::: --- ### **Share Through Sales, CRM, and Email Campaign Workflows** Walnut experiences are frequently shared through sales engagement platforms, CRM workflows, and [email campaigns](/help/demos/personalize/variables/url-parameters#h_01K1H9NKAJ383617MHK5G0NAYZ) to support outreach, follow-ups, and account-based engagement. Teams often include demo links inside automated nurture campaigns, outbound sales sequences, or targeted account communications to give prospects a hands-on way to explore the product without needing to schedule a meeting. **Best for:** Sales outreach, marketing email campaigns, account follow-ups, pipeline acceleration **Experience:** Personalized demo links delivered through sales tools, marketing automation platforms, and CRM-driven workflows **Common tools:** [Salesforce, HubSpot, Marketo, Gong Engage, Salesloft, Outreach](/help/demos/personalize/variables/url-parameters#h_01K1H9NKAJ383617MHK5G0NAYZ) Engagement analytics help teams understand how prospects interact with the experience—revealing what features they explore, how long they spend, and where interest is strongest. :::note[Pro Tip] Demo links can be enriched with **URL parameters** or dynamic variables, allowing teams to personalize demos at scale within email campaigns and CRM workflows without editing the demo itself. **Learn more:**  - [Create Personalized Demos Directly From Salesforce](/help/integrations/salesforce/personalized-demos) - [Smart Demo Personalization with URL, CRM, and Lead Form Variables](https://help.walnut.io/hc/en-us/articles/28697364380435) - [Email Parameters: Quick Reference](/help/demos/personalize/variables/url-parameters#h_01K1H9NKAJ383617MHK5G0NAYZ) ::: --- ### **Share Offline Demos and Playlists** #### **Offline Demos** [Offline demos](/help/demos/publish/offline-demos) allow presenters to download a Walnut experience so it can be used without an internet connection. This is especially helpful when presenting in environments where connectivity may be unreliable, such as conferences, field sales visits, or customer locations with restricted networks. Once downloaded, the demo can be launched locally and delivered just like a live Walnut experience, ensuring a smooth presentation regardless of network conditions. **Best for:** Field sales, conferences, live presentations with limited connectivity **Experience:** Interactive demo delivered locally without requiring an internet connection **Common use cases:** Conference booths, onsite customer meetings, travel presentations, restricted corporate environments **🌐 Learn more:** [Create Offline Demos](/help/demos/publish/offline-demos) --- #### **Offline Playlists** Offline playlists extend this capability by allowing multiple demos and supporting assets to be packaged into a single downloadable experience. This allows presenters to deliver a curated product story or structured workflow even when working offline. Offline playlists are particularly useful when teams want to present multiple product workflows, solution overviews, or supporting content without relying on an internet connection. :::note[Pro Tip] Offline demos are best used for **live presentations**. For follow-ups or ongoing engagement, presenters typically share a live demo link or playlist so viewer activity can be tracked in Insights. ::: **🌐 Learn more:** [Create Offline Demos](/help/demos/publish/offline-demos) --- ## **Importing Content** Walnut supports two primary ways to bring content into your demos, playlists, and deal rooms: capturing live HTML experiences or importing non-HTML assets. Using the Walnut Chrome Extension, you can capture fully editable HTML and CSS web applications directly from your browser, including published Figma Sites. Non-HTML content such as images, videos, docs, and static files can also be uploaded directly into Walnut to enhance demos, playlists, and deal rooms. - [Capturing HTML & CSS Content](#h_01KG07EEM0JWRT7W8XF6XEDYEA) - [Importing Non-HTML Content](#h_01KG074WZ6FHPMM8E3DKZ261SC) --- ### **Capturing HTML & CSS Content** #### **Walnut Chrome Extension 📸** The [**Walnut Chrome Extension**](/help/demos/getting-started/chrome-extension) is a Chrome-based browser extension that allows you to capture fully editable HTML & CSS-based web applications and browser-rendered content — including [**published Figma Sites**](/help/demos/capture/capture-figma) — and turn them into shareable interactive demo experiences. Figma prototypes themselves are not capturable. However, once designs are published as a **Figma Site**, they behave like a standard HTML experience and can be captured just like any other web application. **👉 Learn more:** [**Capture Figma Designs Into a Fully Editable Walnut Demo**](/help/demos/capture/capture-figma) ![Walnut Chrome extension in capture screens mode](pathname:///images/5b330ff791610c31.png) ##### **What Can I Capture?** - **Live web applications** (HTML/CSS production apps) - **Staging and development environments** – including localhost and pre-production environments - **Published Figma Sites** – browser-rendered HTML versions of Figma designs - **Standard web-based content** – product pages, landing sites, internal tools, and other web content ##### **Key Features:** - **Editable post-capture:** All HTML/CSS elements remain fully editable in the Walnut Editor. - **Interactive flows:** Preserve navigation and simulate click paths through screen linking and guided demos. - **Easy updates:** Use **Update Screen** to transfer edits and guides after platform changes. :::note[⚠️ Before Capturing] Review [**Chrome Extension Capabilities & Best Practices**](/help/demos/getting-started/chrome-extension-tutorial) to prevent sizing or layout issues and ensure clean, pixel-perfect results every time. ::: --- ### **Importing Mixed Media** Non-HTML content includes static files and mixed media that are uploaded directly into Walnut rather than captured via the Chrome Extension. You can use images, videos, and documents to enrich your product experiences through the [**Screens Library**](#h_01JY4EJSBJ7HRMMJ1YQK7B29S5), [**Playlists**](#h_01JY53846HBS0CRB1Y639ZQ371), [**Advanced Playlists**](#h_01JY53846HBS0CRB1Y639ZQ371), and [**Interactive Deal Rooms**](#h_01JY4EJSBJJ5HMB1X512VCV57J). You can import the following file types and media formats: - **Static images** (PNG, JPEG), GIFs, or exported Figma mockups that have **not** been published as Figma Sites - **.mp4**, **.mov**, and screen recordings - **Video links** from platforms like YouTube and Vimeo - **PDFs** and **Google Docs** :::note[🎨 Important] Figma designs are fully editable only when captured as a published Figma Site. Static image exports behave like standard uploaded images. **Learn more:** [**Capture Figma Designs Into a Fully Editable Walnut Demo**](/help/demos/capture/capture-figma) ::: --- #### **Screens Library 📱** Use the **Screens Library** to import static assets. Combine template screens with HTML captures—or use them on their own—to craft dynamic, immersive demo experiences. ![Screenshot 2025-06-19 at 6.08.51 PM.png](pathname:///images/733eb74531c56adf.png) ##### **Where to Find the Screen Library:** 1. Open an existing template or create a new template. 2. If using an existing template, expand the **Screens** panel on the left side. 3. Click the **Add** button at the bottom of the panel, or click the **plus (+) icon** at the top.   ![Add Screen button and plus icon in the Screens panel](pathname:///images/b196d62734db8302.png) 1. If starting from a new template, click **Browse existing demos** when prompted. ![Browse existing demos option in the new template screen](pathname:///images/c41088f2f63c17eb.png) 1. Click **Add Screen**. 2. In the **Insert Screens** pop-up, go to the **Screens Library** tab. 3. Select one or more template screens, then click **Done** to insert them into your template.   ![Insert Screens pop-up showing Screens Library tab and Done button](pathname:///images/79fea10d7861a6a6.png) **Learn More:** [Importing Screens With the Screens Library](/help/demos/capture/screens-library) ---