The Reveal button

Some guides shouldn't decide for themselves when to appear. A walkthrough of your billing settings is useful the moment someone goes looking for it and annoying the rest of the time. The Reveal button covers that case: a styled button you paste into your page, wired to one guide, that starts it when a user clicks.

Typical homes for it are a help menu, a "show me how" link inside a settings screen, an empty state where a user has nothing to look at yet, and a docs page where a walkthrough beats another paragraph.

Where to configure it

Open the guide, go to the Embed tab, and find the Reveal button card: "A styled, drop-in button your users can click to start this guide. Paste it anywhere on your site."

The card has a live PREVIEW at the top so you can see the button as you change it, and two settings underneath.

STYLE offers Solid, Reveal red, and Outline. Solid and Outline sit quietly inside most interfaces. Reveal red is the loud one, worth it when the button is the point of the screen rather than one option among many.

LABEL is the text on the button. Say what the user gets rather than naming the mechanism, so "See how billing works" rather than "Start guide".

The snippet

The EMBED CODE block is labelled "Paste anywhere in your page body".

<div data-reveal-button

data-guide="gd_8fk2p91x"

data-style="solid"

data-label="Watch intro">

</div>

data-reveal-button marks the element for the pixel to pick up and turn into a button. It takes no value.

data-guide is the guide ID, so it's specific to this one guide. Guide IDs look like gd_8fk2p91x, and you can also find this one at the bottom of the guide detail page under "Guide ID".

data-style matches the STYLE option you picked on the card.

data-label is the LABEL text.

Tip. The snippet updates live as you change STYLE and LABEL, so set both first and copy afterwards. If you've already pasted it into your site, changing the settings in the app won't rewrite the markup on your page, you'd copy it again or edit the two attributes by hand.

What it needs to work

The pixel has to be on the page. The button is markup that the pixel finds and takes over. Without the pixel it stays an empty div. See Install the pixel.

Set the trigger to Manual only. On the guide's Behavior tab, Manual only means "Only fires via Reveal Button or dynamic link". Pair it with the button so the guide doesn't also fire on its own for everyone who lands on the page. Remember to click Save changes, that tab doesn't save on its own.

The page's domain has to be listed for the guide. The Domains card on the same Embed tab controls where the pixel is allowed to serve this guide, and the button is subject to it like anything else.

Check it before you ship

The card has a Preview on \{domain\} button that opens the guide's domain so you can see the button in place and click it yourself. Worth doing before you paste the snippet into a template that renders everywhere.

Next steps

• Dynamic links: The same idea, for emails and links you don't control the markup of.

• Behavior: Set the trigger to Manual only so the guide waits to be asked.

• Install the pixel: The button needs it on the page.

• Ways to deliver a guide: All four delivery options, side by side.