Guide to Creating Interactive Product Experiences in Walnut

Overview

Walnut makes it easy to bring your content to life—whether you’re working with live web apps or static assets.

You can import two core types of content with Walnut:

• HTML/CSS Content – Capture fully editable web content using the Walnut Chrome Extension.
• Non-HTML Content – Import static images, videos, and documents using the Screens Library, Playlists, Advanced Playlists, and Interactive 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 other web content and turn them into shareable interactive demo experiences.

What Can I Capture?

• Live web applications (HTML/CSS production apps)

• Staging and development environments – capture content hosted locally (e.g., localhost, Live Server) or in pre-production environments.

• Standard web-based content – capture product pages, landing sites, internal tools, and other web-based content.

Key Features

• Editable post-capture: All HTML/CSS elements are fully editable and endlessly customizable in the Walnut Editor.
• Interactive flows: Simulate navigation using screen linking tools or create step-by-step guided demos.
• Easy updates: Use Update Screen to transfer guide steps and edits after platform changes

Learn More

• Walnut Chrome Extension
• Create Demos Series:
  • Part 1: Chrome Extension Capabilities & Best Practices
  • Part 2: Create & Share Templates
  • Part 3: Set Display Settings
  • Part 4: Editing Captured Content
  • Part 5: Creating Guided Demos
  • Part 6: Publish & Share Demos

Importing Non-HTML Content

Enhance product experiences using static images, videos, and documents using the Screens Library, Playlists, Advanced Playlists, and Interactive Deal Rooms.

You can import the following file types and media formats:

• Static images (PNG, JPEG) and GIFs
• .mp4, .mov, or screen recordings (e.g., chat, mobile app flows, etc.)
• Video links from platforms like YouTube and Vimeo
• PDFs and Google Docs
• Figma mockups

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.

Where to Find It:

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

Learn More: Importing Screens With the Screens Library

Playlists & Advanced Playlists 🎧

Playlists and Advanced Playlists give you flexible ways to organize and deliver immersive, mixed-media product experiences tailored to every stage of the buyer journey.

Where to Find It:

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.
   

Learn More:

• Playlists
• Advanced Playlists (Add-On)

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.

Where to Find It: Walnut Library, Deals

Learn More:

• Interactive Deal Rooms 🛋️
• Automate and Scale: The Rule Engine for Deal Rooms