Create Demos – Part 5: Creating Guided Demos

Overview

Walnut supports multiple demo formats, including guided and non-guided experiences.

This guide focuses on how to build guided demos using Walnut’s three core guide types: modals, tooltips, and hotspots.

Guided demos help you create a more structured, narrative experience by leading viewers through key workflows, product moments, and messages in the order you choose.

In This Guide

This guide walks through the core tools and workflows for building guided demos in Walnut, from setup through preview and publishing.

Before You Start

Before you begin building guides, here are a few important things to keep in mind:

• Modals and tooltips are fully editable. Hotspots are more lightweight and primarily support color and placement adjustments.
• Template-level settings can still be overridden locally. You can keep global defaults in place while customizing specific guide steps when needed.
• Guide annotations are part of the guide setup flow. Modal, tooltip, and hotspot types are assigned as you create the guide experience.

The Guides Side Pane

The Guides side pane is the main control center for creating and managing guides inside a template.

From the right-hand toolbar, click the Guide icon to open the Guides pane.

From left to right, the pane includes controls for:

• Translate guides
• Guide settings
• Add a modal, tooltip, or hotspot
• Close the Guides pane

You can create guides from this pane or directly from the guide toolbar that appears when you click an element on the screen.

Guide Settings

Guide settings control the default behavior and styling of your guided experience.

From the right-hand toolbar, click the Guides icon, then click the gear icon to open the available settings.

These settings define how guides look, behave, and move through the experience.

Autoplay

Autoplay is useful when you want the demo to move viewers through the story with less manual interaction.

• When autoplay is on, guides appear in the sequence you set.
• You can use autoplay globally for the full demo or locally for specific guides or screens. Learn more in Autoplay Demos.

Buttons

The Buttons section controls the navigation options shown inside guides.

Default Next Button
When enabled, new guides automatically include a Next button when the step requires a click to continue.

Default Button Label
The default label is Next, but you can update it to match the action more clearly.

Show Back Button
Lets viewers return to the previous guide step.

Show Dismiss Button
Lets viewers close the guide using the X in the top-right corner.

Style

Use the Style section to define the visual design of your guides.

You can control font family, font size, text colors, and accent color. The accent color is used across guide elements such as active tabs, focused inputs, and navigation buttons.

Avatar

Avatars add personality and context to guided experiences.

Show Avatar
When enabled, the selected avatar appears in your guides.

Avatar Title
Add a label or title if needed.

Avatar Personalization
When enabled, avatars can be swapped more dynamically, which is useful when tailoring demos for different presenters or audiences.

Learn more in Create Avatars.

Dim

The Dim setting darkens the surrounding screen so the active guide stands out more clearly.

Dim By Default
Off by default. When enabled, the background behind the guide is dimmed.

Dim Style
Controls the intensity of the dim effect when dimming is enabled.

Demo Floating Button

The Demo Floating Button adds a persistent call-to-action across all screens in a template.

This is useful when you want viewers to pause the demo and take a next step, such as visiting a link or opening a lead form.

• You can only have one floating button per template.
• The button color uses the accent color from your guide style settings.

To add a Demo Floating Button:

1. Set the Enabled toggle to ON.
2. Add the call-to-action text and choose the destination, such as a lead form or external link.
3. Choose the button position.
4. Click Done.

Interactions

The Interactions section includes settings that affect how guides move and how completion is signaled.

Smooth Scrolling
When enabled and a screen has more than one guide, Walnut scrolls to the next guide step.

Celebrate Guide Completion
When enabled, confetti appears when viewers complete all guide steps.

Get to Know the Guide Toolbar

When you click an element, a formatting toolbar appears in the header.

The toolbar changes based on the type of element or guide you select. Text elements, images, charts, and guides can each surface slightly different controls.

Main toolbar actions include:

• Add a link: Link to another screen in the template or an external URL
• Add a guide: Add a modal, tooltip, or hotspot
• Smart Object: Apply the same change to similar elements across multiple screens
• Variables: Create reusable variable-based elements
• Select Parent Element: Move up the element hierarchy to edit a larger grouped object
• Three-dot menu: Open additional options

Create Modals

A modal appears in the center of the screen and is ideal for introducing a step, explaining a key concept, or guiding viewers through a more structured story.

When the viewer clicks Next, the modal closes and the next guide appears.

• Modals work well for short narrative copy and structured walkthroughs.
• You can add a second button when you want to give viewers another navigation option.
• Selecting a modal opens a modal-specific toolbar in the header.

Modal toolbar options include:

• Change Guide Type
• Modal Settings
• Links
• Text Formatting
• Bullets
• Variables
• Text to speech
• Insert file, Video, or URL
• AI Assistance
• Done

How to Add a Modal

1. Click the target element to open the Guide toolbar, click the guide icon, and select Modal.
   
   
2. You can also create a guide from the right-hand toolbar. Click the Guide icon, then click Add a Step.
   
3. The modal appears in the center of the screen.
   • Add and format your text using the toolbar controls.
     
   • Change the Next button label or add a second button if needed.
4. When you are done, click Done.

Modal settings include:

• Show back button
• Show demo button
• Autoplay guide step
• Show avatar and upload avatar
• Modal size options
• Autoplay audio
• Dim background

Create Tooltips

Tooltips are useful for short explanations tied to a specific element, term, or interface area.

They are a strong fit when you want to add lightweight context without interrupting the viewer with a larger modal.

Selecting a tooltip opens a tooltip-specific toolbar in the header.

Tooltip toolbar options include:
Change guide type
Change selected element
Reposition tooltip
Tooltip settings
Done

How to Add a Tooltip

1. Click the target element, open the guide menu, and select Tooltip.
   
   
2. You can also create a guide from the right-hand toolbar using Add a Step.
   
3. The tooltip appears on the screen.
   
4. Click the tooltip to open the full tooltip toolbar.
   
5. Add your tooltip text.
6. Update the Next button label if needed, or add another button.
7. Click the Settings icon to adjust tooltip behavior and layout.
8. When you are done, click Done.

Tooltip settings:

Tooltip editor options:

• Change guide type
• Change the selected element
• Reposition the tooltip
• Tooltip settings
• Add a link
• Format text
• Add bullets
• Add variables
• Text to speech
• Insert media or URL
• Done

How to Change Tooltip Position

1. Click the tooltip.
2. Click the Change Annotation Position icon from the toolbar.
   
3. Choose the new layout position.
4. Click Done.

Create Hotspots

Hotspots are a lightweight way to draw attention to a specific product area or feature.

They create a glowing highlight that encourages exploration and can reveal text when viewers interact with them.

Selecting a hotspot opens a hotspot-specific toolbar in the header.

Hotspot toolbar options include:

• Change guide type
• Change selected element
• Change hotspot color
• Hotspot settings
• Done

How to Add a Hotspot

1. Click the target element, open the guide menu, and select Hotspot.
   
   
   
   You can also create a guide from the right-hand toolbar by clicking Add a Step.
   
   
2. The hotspot appears on the selected element.
3. Adjust the hotspot as needed, including color or position, using the toolbar and settings panel.
4. When you are done, click Done.

Preview Guides

Once you have added guides, use Preview to see the experience the way a viewer will see it.

How to Preview Guides Before Publishing

1. Open the template in Edit mode.
2. Click Preview from the header.
3. Step through the guides unless autoplay is enabled.
4. If you want to change order or settings, return to the editor.
5. Open the Guides pane, then click the gear icon to update guide settings.
   
   
6. Adjust the settings you want to test.
7. Click Save.
8. Click Preview again.
9. Repeat until the experience looks and behaves the way you want.

Create Custom Elements

Custom elements are useful when you want to place a guide in an area of the screen that does not already contain a selectable element.

How to Create a Custom Element

1. Open the template in Edit mode and click the Guides icon from the right-hand toolbar.
2. In the Guides pane, click the gear icon and select Display Options.
3. Select Proportional Fit so the screen scales proportionally and keeps its captured aspect ratio.
4. Select the custom element icon and draw the element on the screen.
5. Use the Guide toolbar to attach a guide or link to that custom element.

Edit and Rearrange Guides

Guides play in the order you define. If the sequence needs to change, you can quickly rearrange guides with drag and drop or move them to another screen.

You can:

• Change the order of guides on the same screen
• Move guides to a different screen or section

Change the Order of Guides on the Same Screen

Select the screen in the left pane. The guides for that screen appear on the right.

Drag the guide to the new position.

Move a Guide to a Different Screen

Right-click the guide and select Move, then choose the screen where it should go.

Find & Replace in Guides

Find & Replace makes it easier to update repeated text across guide steps.

How to Find and Replace Text in Guides

From the right-hand toolbar, click the Find & Replace icon. This opens a new pane.

In the Find & Replace pane, enter the text you want to find and press Enter.

Click the Guide Steps tab to review the matching results.

Enter the replacement text, then click Replace All when you are ready.

Publish & Share

Once your guides are in place and the experience feels right, the next step is publishing and sharing the demo.

Continue to Part 6: Publish & Share Demos for the next stage of the workflow.

Specific Use Cases

Here are a few common scenarios and how to handle them.

1. Positioning Error Message

If you see a positioning error message, the annotation likely needs to be pinned more precisely.

Go to the Tooltips section of this guide and review the workflow for repositioning a tooltip.

2. Open a Form at the End of the Demo

Go to the final guide step and add the form link to the modal or tooltip action button.

3. Attach a Guide to a Custom Element Instead of the Next Button

Delete the Next button, create a custom element, then attach the guide to that element instead.

See Create Custom Elements.

4. Hide the Guide Toolbar in the Live Demo

The Guide toolbar itself cannot be repositioned, but it can be hidden from the live demo if needed.

To do this, go to the demo in your library, open the three-dot menu, and select Demo Preferences.

In the Link Settings tab, turn Show Guide Toolbar off.

Then click Copy Link and Save.

Summary

Guided demos help you turn captured screens into structured product stories that are easier to follow, easier to teach with, and easier to control.

Modals work well for more narrative moments, tooltips are ideal for lighter contextual guidance, and hotspots help call attention to specific product areas without interrupting the flow too heavily.

With the right guide settings, sequencing, and preview checks in place, guided demos can become one of the strongest ways to deliver a polished product experience in Walnut.