Building flows

A flow is a sequence of steps that guide your users through your app. You build one visually, in the Builder sidebar, by pointing at real elements on your own pages. This page walks through the whole process, from an empty flow to a published one.

Before you start, make sure the browser extension is installed and connected, and that you have opened the Builder on the app you want to work on. The Browser extension page covers that setup.

Name the flow

At the top of the sidebar, give your flow a name in the Flow name field, something like "Welcome tour". This name is for you and your team; your users never see it. It is how you will recognise the flow later in the dashboard.

Add a step

Each step points at one element on your page and shows something next to it. To create a step, click Select element, then click the element on your page you want the step to attach to. The sidebar records a selector for it and confirms the match.

Once an element is selected, you fill in the step:

Title and Content are the heading and the body text your user reads. Keep them short and specific, they are guidance, not documentation.

Type is what the step looks like. There are four, described in the next section.

Placement is where the step appears relative to its element: top, bottom, left, or right. Pick whichever keeps the step readable without covering something important.

When the step is ready, click Save step. It joins the list of steps above, and you can start the next one. Nothing is sent anywhere yet; steps live in the Builder until you publish.

The four step types

Tooltip is the default and the workhorse of onboarding. It points at an element with a small card containing your title and content. Use it to draw attention to a specific button, field, or menu.

Modal is a centered card that sits over the page, dimming everything behind it. It does not attach visually to its element the way a tooltip does, so it suits welcome messages, announcements, or a step that deserves the user's full attention.

Highlight spotlights an element without any text. It dims the rest of the page and draws a ring around the target, pulling the eye to it. Because it shows no words, the title and content fields are switched off when you choose this type. Use it to say "look here" without saying anything.

Banner is a full-width bar pinned to the top or bottom of the page. It does not point at a specific element, so it works for messages that apply to the whole screen, like a new-feature notice. Banners also let you set the text alignment, since they span the full width.

Reorder, edit, or remove steps

The list of steps shows them in the order your users will see them. Each step has controls to move it up or down, edit it, or delete it. Reordering is just the arrows; the numbering updates as you go. Editing reopens the step with its element and settings so you can change anything.

Preview before you publish

Click Preview to see the flow run on your actual app, exactly as a user would. A bar confirms you are in preview mode, and you can step through the flow on the page. Click Stop preview to return to editing. Preview changes nothing and saves nothing; it is just a rehearsal.

Set when the flow appears

Below the steps, Show this flow sets the trigger: first visit only, every visit, once per session, or new users only. Show on page optionally limits the flow to a single path. Both are covered in detail on the Flow triggers page.

Publish

Nothing you have done so far has left the Builder. Everything, the steps, their order, the trigger, lives in local memory until you click Publish flow. That is the moment the flow is sent to Tracya, saved, and made live. If the widget is installed on your app, the flow starts applying to your users right away, according to its trigger.

If you come back later to change a published flow, you edit it and publish again; publishing replaces the live version with your new one.