Demos and tours
A demo is a recorded replay a visitor watches in an iframe. A tour is step-by-step guidance on your own product, which they perform for real. The distinction decides everything else.
The distinction
Until recently this product shipped five words for two things. There are now exactly two user-facing concepts, and they are not variations of each other:
A demo
A recorded replay a visitor watches in an iframe. It is footage of your product — the visitor clicks through the recording, not through your app, and nothing they do reaches your systems.
Put it on a marketing page, in a help centre, or behind a modal, for someone who has not signed up.
A tour
Step-by-step guidance rendered inside your own product, which the person performs for real. There is no recording: each step is anchored to a marker in your source, and the step completes when they do the actual thing.
Put it inside the app, for someone who has signed up.
A demo is watched; a tour is performed. That sentence decides which page of these docs you need, which tools an agent calls, whether there is footage to render a video from, and whether anything has to change in your source.
Both install with the same element. The difference is one attribute:
<script src="https://www.rendemo.com/embed.js" async></script>
<!-- watched: a recorded replay in an iframe -->
<rendemo-demo demo="acme/product-overview"></rendemo-demo>
<!-- performed: guidance on your own product -->
<rendemo-demo demo="acme/onboarding" mode="tour"></rendemo-demo>Side by side
A tour is the same demo minus the replay footage. The step cards, emphasis treatments, copy and brand are the same modules the published demo renders with — a tour card is not “similar” to a demo card, it is the same card. The one substitution: a replay reads each step’s target rectangle out of recorded DOM, and a tour calls getBoundingClientRect() on the live element.
| Demo | Tour | |
|---|---|---|
| The visitor | Watches a recording | Performs the real action |
| Where it renders | An <iframe> the element creates | A fixed layer over your own page |
| Needs a recording | Yes — from the browser extension | No |
| Needs source changes | No | Yes — a data-rendemo marker per step |
| Has a public URL | Yes — /d/<id> or a workspace short-link | No — it renders inside your product |
| Visible in the studio | Yes | No — a tour has no capture to edit |
| Lead capture | Yes — in-card form and full-screen gate | No |
| Localization | Yes | No |
| Video render | Yes | No — there is no footage |
| Offline export | Yes | No |
Which one do I want
- Somebody who has not signed up should see a demo. They have no account, so there is no product to guide them through.
- Somebody already inside your product should get a tour. Showing them a recording of the screen they are looking at is worse than pointing at the screen itself.
- A recurring support question is usually a demo: it can be linked, embedded in a help centre, and watched without an account.
- A first-run sequence is a tour, and the honest way to target it is your own conditional render — an element that is not on the page targets nobody.
mode="tour" at a replay demo does not degrade gracefully: the payload route 404s with not_a_tour rather than showing an empty tour.Next: the embed element for a demo, or tours for the marker contract.
The vocabulary
Two words, and no others. If you are looking for “walkthrough”, “flow”, “overlay” or “guide”, those words are gone — one of them survives for a reason, and everything they used to name still works.
| Was | Is |
|---|---|
mode="guide" | mode="tour" |
rendemo.flow.json, "flows" key | rendemo.tours.json, "tours" key |
/d/<id>/guide | /d/<id>/tour |
/embed-guide.js | /embed-tour.js |
rendemo_create_flow | rendemo_create_tour |
rendemo_add_flow_step | rendemo_add_tour_step |
rendemo_get_flow_lockfile | rendemo_get_tour_lockfile |
| “walkthrough”, “flow”, “overlay” | “tour” |
data-rendemo is unchanged — it is the brand, not the concept.
Nothing you have deployed breaks
mode="guide" is a silent alias for mode="tour": your pages and /embed.js are cached independently on one unversioned URL, so a page holding the old attribute can meet a new script and vice versa. There is no console deprecation warning on purpose — you cannot act on a warning about markup a CDN is replaying.
The /guide payload routes and /embed-guide.js still serve as aliases; the payload and every event detail carry the slug twice, as tour and as flow; and the localStorage progress key is still rendemo.guide.v1.<tour>, because renaming it would make every viewer who already finished a tour start it again.
The one surviving “guide”. The browser extension’s Live Guide keeps its name. It is a separate delivery path — the extension runs a recorded demo over a live Rendemo page from captured DOM, with no markers involved. It is not the thing mode="tour" renders. So when you see “guide” in this product, it means Live Guide and nothing else.
Two internal names also keep their old spelling on purpose, and you may notice them in an API response or a database column: kind: "flow" (the stored discriminator) and workspaces.walkthroughs_enabled (the column behind Settings → Product tours). Neither is a word a customer reads.