Demo Collections

Collections bring interactive demos, sandboxes, and videos together on one page. Group them by topic for a product tour, onboarding guide, or demo library, then share one link or embed the collection on your website. Viewers can search and filter to find the demos they need.

For breaking a single demo into navigable sections, see demo chapters.

How Collections Work

A collection organizes its demos into lists. Open a collection to edit it, then use the sidebar to manage its contents:

Click Add list to create a group, then Add demo to choose its demos or sandboxes. The menu next to Add demo also lets you Add video.
Drag lists and demos using their handles to change the order.
Edit titles and descriptions directly in the collection preview.
Open a demo’s three-dot menu to manage Tags, open Edit demo or Edit sandbox in a new tab, or Remove it from the list. Removing it from a collection keeps the original demo in your library.

One collection is included on the Starter plan. Pro and Enterprise plans include unlimited collections.

🔒

Unlimited collections is available on the Pro plan and above.

Choosing a Layout

Use Layout at the bottom of the editor sidebar to choose how viewers browse your collection:

Shelves displays each list as a row of demo cards above the player. Use it when viewers should browse several topics and choose where to start.
Playlist places the lists beside the player, with previous and Next controls for moving between demos. Use it for an ordered walkthrough or training sequence. Viewers can hide the playlist to give the demo more room.

Both layouts support search and tag filters. On smaller screens, the playlist opens in a drawer so it does not crowd the demo.

Resuming Where Viewers Left Off

When a viewer moves between demos in a collection, each one picks up at the step they last reached rather than restarting from the beginning. This applies to both interactive demos and sandboxes, so viewers can jump around a collection without losing their place. Progress is remembered for the current viewing session and resets if the page is reloaded.

Organizing Demos with Tags

As a collection grows, tags help viewers find the demos that match their interest. Open a demo’s three-dot menu and choose Tags to add labels such as “Pricing”, “Onboarding”, or “For Admins”. You can reuse a tag you have already created in that collection or make a new one as you go. Each demo can carry up to 20 tags per collection, and a tag can be up to 50 characters long.

Tags belong to the collection you add them in, not to the demo itself. The same demo can carry different tags in another collection, and tagging it in one place never changes it anywhere else.

Once a collection has tagged demos, viewers can filter it by tag to focus on the demos that matter to them. Choosing several tags broadens the view to show every demo that matches any of them, and clearing the tags brings the whole collection back.

Click Share and turn on Publish to unlock the sharing options. You can:

Copy a direct share link for prospects or team members.
Copy the Website embed code to place the collection on your website.

You can also copy share links directly from the collection card in the library view. Collection links support paste-to-embed on WordPress and the Wix plugin.

Password Protection

🔒

Password protection is available on the Pro plan and above.

For a private demo library or customer-specific collection, open Share, turn on Password protection, enter a password, and click Save. Publish the collection first if the control is disabled. Viewers must enter the password to open either the collection’s share link or its embed.

The password protects the collection. It does not add passwords to the individual demos’ own share links. If you also share those links, set password protection on each demo.

To change the password, enter a new one and click Save. To remove it, turn off Password protection.

Interactive Walkthrough

Follow this walkthrough to create and share a collection.