Guide to Creating Interactive Product Experiences in Walnut

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.

In This Guide:

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:

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

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

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

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

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

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


Advanced Playlists

Customer Hub · Sales Hub

Note: Advanced Playlists are available as an add‑on feature. Contact your Walnut CSM or reach out to our Support Team 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.

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)


Where to Find Playlists

  1. Log in to Walnut.
  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

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

Where to Find It: Walnut Library, Deals

Learn More:

Note: Interactive Deal Rooms are available as an add‑on feature. Contact your Walnut CSM or reach out to our Support Team 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.


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, 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, Slack, CRM sequences, documentation

Tip: Direct demo links can include personalization variables or URL parameters to tailor the experience to a specific account, prospect, or campaign.

Learn more: 


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 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

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


Share Through Hubs, Playlists & Deal Rooms

For multi-stakeholder journeys, demos can be packaged inside playlists, Advanced Playlists, or Interactive Deal Rooms 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
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 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

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.

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: 


Share Offline Demos and Playlists

Offline Demos

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


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.

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


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

Walnut Chrome Extension 📸

The Walnut 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 — 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

Walnut Chrome extension in capture screens mode

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.

⚠️ Before Capturing:

Review Chrome Extension Capabilities & Best Practices 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, Playlists, Advanced Playlists, and Interactive Deal Rooms.

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

🎨 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


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

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
  4. If starting from a new template, click Browse existing demos when prompted.

    Browse existing demos option in the new template screen
  5. Click Add Screen.
  6. In the Insert Screens pop-up, go to the Screens Library tab.
  7. 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

Learn More: Importing Screens With the Screens Library


Was this article helpful?
0 out of 0 found this helpful