Resources

Embed reference

The Reveal button, dynamic links, and the interactive player iframe, with their attributes and parameters.

Three of Reveal's four delivery options are things you paste into a page: a button, a link, and an iframe. This page is the reference for all three, with the attributes and parameters each one accepts.

Every snippet here is generated in the app with your real IDs already filled in. The values below are placeholders, so copy from the dashboard rather than typing these out.

Reveal button

A styled button that starts one specific guide when a user clicks it. Its card on the guide's Embed tab describes it as "A styled, drop-in button your users can click to start this guide. Paste it anywhere on your site."

<div data-reveal-button

data-guide="gd_8fk2p91x"

data-style="solid"

data-label="Watch intro">

</div>

data-reveal-button Value: No value · What it does: Marks the element as a Reveal button. The pixel finds it and renders the button in its place.
data-guide Value: Guide ID, like gd_8fk2p91x · What it does: Which guide the button starts. It appears in the page footer of the guide as "Guide ID".
data-style Value: solid, reveal-red, outline · What it does: The visual style. These are the Solid, Reveal red, and Outline options under STYLE on the card.
data-label Value: Any short string · What it does: The button text, set in the LABEL field.

The button needs the pixel on the page, since the pixel is what renders it and plays the guide.

STYLE and LABEL are set in the app and baked into the snippet you copy, and the card shows a live PREVIEW as you change them. Pick them there, then copy. There is also a Preview on \{domain\} button for trying it on your own site.

Dynamic link

A dynamic link starts a guide by URL, with no snippet and no custom JavaScript. Add the trigger parameter to any URL on a domain where the pixel is installed, and the pixel picks it up when the visitor lands.

https://acme.com/?reveal=gd_8fk2p91x

Wire it into anything a link goes in:

<a href="https://acme.com/?reveal=gd_8fk2p91x">Show me around</a>

TRIGGER PARAM ?reveal=… with the guide ID as the value
EXPIRES Never
USES Unlimited

Because it never expires and has no use limit, one link works for any user and can sit in a welcome email, a support reply, or a changelog entry indefinitely. The Dynamic link card on the Embed tab gives you Copy and Preview for the URL.

Interactive player

The interactive player runs the guide inside an iframe as a chapter-based player. It works on any page, including pages you do not own, and it does not need the pixel on the host page.

<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>

The wrapper div is what holds the 16:9 ratio. The player is fluid and fills its container's width at that ratio, with a recommended minimum width of 320px. Below that the camera bubble and controls shrink automatically.

Query parameters

These are the parameters visible in a generated snippet.

accent Example: %23E5634A · What it sets: Player accent, used for the play button and the scrubber. The hex value is URL-encoded, so # becomes %23.
bubble Example: bottom-right · What it sets: Camera bubble position: the corner you picked, or dynamic for Dynamic, which moves the bubble to the corner opposite the highlighted element at each step.
autoplay Example: 1 · What it sets: Autoplay on scroll into view, which starts the cover loop when the player enters the viewport. 1 on, 0 off.
muted Example: 0 · What it sets: Default muted. 1 on, 0 off. Most embeds live on muted-autoplay pages, so leaving this on is the safer default.
controls Example: 1 · What it sets: Show controls, the scrubber and control bar that reveal on hover. 1 on, 0 off.

Heads up. Do not hand-write this URL. The parameters are generated from the Interactive Player tab, the Embed code card carries the chip "Reflects settings below", and its copy says "Options you change on this tab are baked into the snippet". Set the options in the app and copy the result, which is the only way to be sure the URL matches what you configured.

Other output formats

The Embed code card offers the same player in three formats: iframe, Web component, and HTML. The iframe is the one documented above because it is the most portable. Switch the format in the app if a web component or plain HTML fits your stack better, and copy whichever one it gives you.

Where to find each snippet

Pixel Guide, Embed tab, Pixel installation card
Reveal button Guide, Embed tab, Reveal button card, under EMBED CODE
Dynamic link Guide, Embed tab, Dynamic link card
Interactive player Guide, Interactive Player tab, Embed code card

The pixel snippet is identical on every guide because it belongs to the workspace. The other three carry a guide ID, so copy them from the guide you actually mean.

Next steps

Delivery options: Which of the four ways to use, and when.
Interactive player: Cover loop, player options, and camera bubble position.
Pixel reference: Install, domain matching, and verification.
Events: What gets recorded when a guide plays.