Tour Builder

Opening the builder

From the dashboard, navigate to Apps in the sidebar and open the app you want to work with. On the app's tour list, click an existing tour or use the Create Tour button to create a new one. Either path takes you into the tour builder — a two-panel editor where the left panel contains your step list and the right panel holds the step configuration form and preview.

The step list

Every tour is a sequence of steps rendered as ordered tooltips in your product. The Tour Steps sidebar on the left shows all of the steps in the current draft, numbered in the order they will be shown to users.

To add a step, click Add Step at the bottom of the sidebar. A new blank step is appended to the list and selected automatically so you can start filling in its content straight away.

To reorder steps, drag the grip handle on the left side of any step row and drop it at the desired position. Reordering only affects the draft — your published tour is unchanged until you publish again.

To remove a step, select it from the sidebar, then click Remove in the top-right corner of the step configuration panel on the right. Removal is immediate within the draft.

Writing step content

Each step has a Title field and a Content field. The title appears as the heading in the rendered tooltip. The content field is powered by a TipTap rich text editor with a small formatting toolbar above the text area. Supported formatting includes bold, italic, underline, links, and bullet lists.

The editor toolbar buttons correspond to each format. To add a link, select the text you want to link, click the link button in the toolbar, and enter the URL in the prompt that appears. To remove a link, select it and click the link button again with an empty URL.

Targeting an element

Each step needs a CSS selector that anchors its tooltip to a specific element on your page. Paste the selector into the CSS Selector field in the step configuration panel. The field accepts any valid CSS selector — for example #welcome-banner or .hero-section.

Writing selectors by hand is tedious. The easiest way to capture one is the Geyed Chrome Extension, which lets you hover over any element on your live site and click to generate a selector automatically. See Capturing Selectors for the full workflow.

You can also set a Placement for each step — top, bottom, left, or right — which controls which side of the targeted element the tooltip appears on.

The live preview

As you edit a step, a Tooltip Preview appears below the step configuration form. The preview renders your step's title, content, placement arrow, and navigation buttons (Back / Next / Finish) using your app's theme colors. This gives you an accurate impression of how the tooltip will look in your product without leaving the builder.

The preview updates in real time as you type in the title or content fields or change the placement setting.

Saving and drafts

All edits in the builder apply to the draft version of the tour. Your currently published tour stays live and is completely unaffected while you edit.

To save your draft without publishing, click Save in the top-right toolbar. A confirmation appears when the save completes. You can save as many times as you like; each save updates the draft and leaves the published version untouched.

The draft and published versions are kept separate, which means you can iterate freely on the draft — rearranging steps, rewriting copy, adjusting selectors — without any risk of shipping incomplete changes to users. For a deeper explanation of how the two states relate, see Core Concepts.

Publishing

When your draft is ready to go live, click Save & Publish in the top-right toolbar. This saves any unsaved changes and immediately replaces the published version with the current draft. The SDK will start serving the updated tour to users whose page path matches the tour's URL pattern.

After publishing you can continue editing the draft — those changes will not reach users until you publish again. If you need to take the tour offline entirely, click Unpublish.