Delivery

The interactive player

A chapter-based embed that plays your guide on any page, including pages you don't own.

Live tooltips are one way a guide plays. The interactive player is the other. It puts the guide inside an iframe as a chapter-based player, so it runs on any page you can paste an embed into, including landing pages, docs sites, and pages you don't control.

It's the same recording underneath. Same steps, same camera bubble, same analytics reporting back into the same dashboard. What changes is where it plays and what the user is looking at while it does.

Live tooltips versus the player

  • Where it plays Live tooltips: Inside your product · Interactive player: Any page that accepts an embed

  • Needs the pixel Live tooltips: Yes, on that page · Interactive player: No

  • What's behind it Live tooltips: Your real, live UI · Interactive player: The recording, inside the frame

  • What drives it Live tooltips: The user clicking through their own product · Interactive player: The player's chapters and controls

  • Best for Live tooltips: Onboarding people who are already signed in · Interactive player: Landing pages, docs, help centres, anywhere pre-signup

If you're onboarding someone inside your app, use the pixel. If you want the same walkthrough on your pricing page or in a help article, use the player.

Where it's configured

Open a guide and go to the Interactive Player tab. The Player preview at the top carries a Live chip and is described as "A live render of what ships on your customers' pages. Updates as you tweak below", so every setting on this tab shows up there as you change it.

Before you've recorded, the preview reads "No recording yet. Record this guide in the Chrome extension to preview the interactive player here."

Looping cover

The LOOPING COVER is what people see before they press play: a short muted loop taken from the Personal intro, rather than a frozen frame. A face already moving is a better invitation to click than a still. The default is a 2.5s loop, and you drag the handles to pick the slice.

Four controls sit under it:

Regenerate from another moment picks the loop from a different point in the intro, for when the default slice caught you mid-blink or mid-word.

Upload custom cover replaces it with your own image, useful when the embed sits on a page with a strict visual style.

Preview still-frame fallback shows what viewers get where the loop can't play, for example on connections or clients that won't run it. Worth a look, since that frame is the cover for some share of your audience.

LOOP WINDOW reads out the exact slice you've selected, in seconds from the start of the intro, so you can fine-tune the loop rather than eyeball it.

Embed code

The Embed code card carries a "Reflects settings below" chip: "Paste this where you want the player to appear. Options you change on this tab are baked into the snippet."

Three formats are offered: iframe, Web component, and HTML. The iframe version works nearly everywhere and is the one to reach for unless you have a reason not to.

<!-- Reveal interactive player -->

<div style="position:relative;width:100%;padding-bottom:56.25%">

<iframe src="https://app.reveal.software/embed/gd_8fk2p91x?accent=%23E5634A&bubble=bottom-right&autoplay=1&muted=0&controls=1"

style="position:absolute;inset:0;width:100%;height:100%;border:0"

allow="autoplay; fullscreen" loading="lazy"></iframe>

</div>

Look at the query string and you can see the settings from this tab written into it: accent, bubble, autoplay, muted, and controls.

Heads up. Because your options are baked into the snippet URL, changing a setting on this tab does not update an embed you've already pasted somewhere. Set everything the way you want it, then copy. If you change something later, copy the snippet again and replace the old one.

Player options

Autoplay on scroll into view starts the cover loop when the player enters the viewport. Leave it on for a page where the player is the main event, and turn it off on a page carrying several embeds, so they aren't all moving at once.

Default muted exists because "Most embeds live on muted-autoplay pages". Keep it on for a marketing or docs page where sound would ambush the reader, and turn it off somewhere the video is clearly the reason the person is there.

Show controls puts a scrubber and control bar in, revealed on hover. Keep it on when viewers might want to skip or rewind, which is most of the time. Turning it off makes sense only for a short cover-style loop where there's nothing to seek through.

Show click target highlight displays the captured pixel target box during replay, so viewers see exactly which element was clicked. Helpful for a dense interface where the cursor alone doesn't make it obvious, and unnecessary on a simple screen.

Player accent sets the colour used for the play button and the scrubber. Match it to your brand so the embed reads as part of the page it's on.

Show logo in corner puts your logo in the corner of the player. Turn it on for embeds that travel away from your own site, where a viewer may not otherwise know whose product they're watching.

Note. The player is fluid: it fills its container's width at a 16:9 ratio. Recommended minimum width is 320px, and below that the bubble and controls auto-shrink. Give it a container with a real width and it sizes itself.

Camera bubble position

Five options: Top left, Top right, Bottom left, Bottom right, and Dynamic.

The four fixed positions do what they say, and the right one depends on where your product's own chrome sits. If your app has a left nav and a top bar, a bottom-right bubble covers the least.

Dynamic is worth trying first. It "moves to the corner opposite the highlighted element at each step, so it never covers the action". A fixed corner is a compromise across every step of the guide, and there's usually at least one step where it lands on the thing you're pointing at. Dynamic solves that per step instead of once for all of them.

Export as MP4

The Export as MP4 card renders the guide to a shareable video file. Pick a resolution and click Export as MP4. The render runs on Reveal's servers, so you can leave the tab, and the finished file appears in RECENT EXPORTS to download when it's ready.

Two honest caveats.

The card carries a Raw render chip, and the app's own description is clear about why: "It's a straight capture of the recording with the camera bubble; the polish layer (cursor smoothing, focus zoom) isn't applied yet." What you download is the raw recording, not the version the player shows.

An MP4 also drops the interactivity. Chapters, controls, and the click behaviour don't survive the export, and neither do the analytics, because a file playing on someone else's platform has nothing to report back. Treat the MP4 as a distribution format for YouTube, LinkedIn, and sales decks, and keep the player or the live tooltips as the version that does the actual work.

Chapters

The Chapters card lists "What the player plays, in order". Chapters map one-to-one onto the guide's steps, so the structure you recorded is the structure viewers navigate.

Editing happens in Reveal for Chrome. The Open in Editor button on this card takes you there. Re-recording or reordering a step changes the chapters, with nothing to update here afterwards.

Next steps