Sandbox demos are available on Growth and Enterprise plans.
Step 1: Generate a Sandbox Demo
The quickest way to get started is by generating your sandbox demo from the Chrome extension or in-app.- Chrome Extension
- In-App Generator
1
Open the Chrome Extension
Open the Navattic Chrome Extension over your application.
2
Create a new demo
Select New demo and name your project.
3
Configure capture settings
Under Capture Type, select Web capture. Check the box for Click to capture and
check the box for Generate Sandbox from captures.
4
Capture your screens
Click Start capturing and click naturally through your app to save your screens. Your
clicks will be used as anchors to generate links for the sandbox.
Step 2: Edit the NavLinks
By clicking around your app using click to capture, sandbox links are automatically created. Open your sandbox demo in the Demo builder to edit them. The sandbox editing interface is built into the Build tab. To view and manage all links at once, click the Sandbox links icon in the toolbar. A panel opens where you can switch between This screen (links on the current step) and All links (every link in the demo).Creating Links
Creating Links
Select any onscreen element on your capture to create a link.
Flow Links
Flow Links
To move to another screen within the same section, set your link to navigate to a step within the same Flow. Use Flow scoped links (GoToStep) when navigating within the same section.
Demo Links
Demo Links
To jump to a completely different section of your app, set your link to start a new Flow. Use Demo scoped links (StartFlow) for top-level navigation between distinct sections.
Edit & Sync
Edit & Sync
You can edit existing matches, sync links across multiple screens, or delete steps directly from the sandbox builder without losing context.
Trigger highlights
Trigger highlights
In the sandbox builder, every element with a trigger assigned shows a persistent pulsing ring. These rings help you identify trigger locations at a glance while building. Click any ring to open that trigger’s settings panel directly.
Bulk remove or delete links
Bulk remove or delete links
Select multiple links using the checkboxes in the Sandbox links panel, then click the trash icon to remove or delete them in one action.The behavior depends on which view you are in:
- This screen: removes selected links from the current screen. The links still exist in other steps where they are used.
- All links: permanently deletes selected links from the entire project, removing all associated beacons and triggers across every flow.
Duplicating flows, moving flows, and copying steps
Duplicating flows, moving flows, and copying steps
When you duplicate a flow, move a flow to another demo, or copy steps to another flow, Navattic automatically handles any NavLinks in those flows or steps:
- Duplicate a flow: Links that navigate to steps within the duplicated flow are automatically remapped to point to the corresponding steps in the new copy. Links that point outside the duplicated flow are preserved as-is.
- Move to another demo: Links that reference steps in the original demo are remapped where possible. Links that cannot be remapped (because the target step doesn’t exist in the destination demo) are dropped.
- Copy a step: Flow-scoped links (GoToStep) that navigate to steps within the same flow are preserved in the copied step.
Step 3: Configure Settings and Present
Prepare your demo for the perfect live call.Reveal link hints
Turn this on in the settings menu to highlight clickable areas so presenters always know where
to click.
Keyboard navigation
Enable keyboard navigation for smoother transitions during live calls.
Presenter notes
Add presenter notes to your steps to help your team stay on script.
Presenter mode
Enable presenter mode to show an optimized view for live delivery.
Show link suggestions
Display the original capture anchors to help you quickly identify and click elements to create
new links.
Reset scroll
Automatically scroll back to the top of the screen when navigating to a new step.
FAQs
What is the difference between a Sandbox demo and a guided Flow?
What is the difference between a Sandbox demo and a guided Flow?
Flows are step-by-step demos that a user progresses through at their own pace, best used for sharing. Sandbox demos allow the presenter to click around elements freely to navigate many different parts of the application live on a call.
Can I use Media captures in a Sandbox?
Can I use Media captures in a Sandbox?
Yes. Media captures (uploaded images and videos) can be used as steps in a Sandbox demo. You can add NavLinks to media capture steps just like web captures, making them part of your clickable navigation. To generate the initial Sandbox from a live recording session, you still need Web captures, but once your Sandbox is created, you can add media capture steps through the builder and wire them into your navigation.
How do I delete a step in the Sandbox Builder?
How do I delete a step in the Sandbox Builder?
You can delete steps directly from the Sandbox builder toolbar to save time and reduce context switching.
What if I have conflicting links?
What if I have conflicting links?
If multiple actions are assigned to the same element, the Sandbox Builder will flag it as a collision. Click the collision badge to open the conflict resolve popover, where you can select your primary navigation action.To remove or delete multiple conflicting links at once, select them using the checkboxes in the conflict resolve popover and click the trash icon. A confirmation dialog lets you choose:
- Remove from screen: removes the selected links from the current step only. Their anchors in other steps remain intact.
- Delete everywhere: permanently removes the selected links and all their anchors from every flow in the project.
How do I link completely different sections of my app together?
How do I link completely different sections of my app together?
Stay organized by making every top-level navigation of your app (e.g., Home, Assignments, Evaluations) a separate Flow. Use Demo-scoped links to connect these separate flows together.
When should I use Flow vs. Demo scoped links?
When should I use Flow vs. Demo scoped links?
Use Flow scoped links (GoToStep) to navigate to a step within the same flow — best for moving around the same section. Use Demo scoped links (StartFlow) to jump to the start of a flow in the same project — ideal for top-level navigation between distinct sections.
When should I use 'Sync link' or 'Apply to all steps'?
When should I use 'Sync link' or 'Apply to all steps'?
Use this when you have a persistent navigation element (like a top navbar or side menu) that appears across many screens. Syncing the link applies it to all relevant screens automatically, saving you from adding it manually to each step.
When should I use 'Show link suggestions'?
When should I use 'Show link suggestions'?
Use this feature when building your sandbox. It shows the original anchors from your capture, allowing you to easily identify and click elements to create new sandbox links faster.
Next steps
Present demos
Share and present Navattic demos during live calls.
Demo builder
Learn more about the Demo builder interface.