Flowtomate

Tours ​

A tour guides visitors through steps on your site. Open “Tours” and click “Create tour”. On the “Launch and audience” tab, enter the “Tour start URL”, set the “Priority”, and add “Display conditions” if needed. The current editor does not offer an environment condition.

Access and permissions ​

To view the list, you need the View permission in the “Tours” row. Creating a draft requires Create; saving, publishing, and changing its status require Edit. The account owner has all permissions.

Auto-start and behavior ​

Under “Auto-start”, choose:

  • “Do not auto-start”;
  • “On page load” — set “Page match” (“One page”, “Page and child pages”, or “Site and page”), “Page URL or path”, and “Delay, ms”;
  • “After an event” — select the “Auto-start event”. This option is available when there are active events; configure their collection in “Integration”.

The “Maximum automatic starts” field accepts values from 1 to 10. Your site code and linked content can open the tour even when auto-start is disabled; the conditions for manual calls are described in the launch reference.

Under “Tour behavior”, choose “Exit tour”: “Cannot skip”, “Close button only”, “Skip button only”, or “Close and skip buttons”. You can also enable “Allow going back” and “Show progress” here.

Steps ​

On the “Steps” tab, click “Add step”. Choose the “Type”: “Tooltip by element” or “Modal”. Enter the step’s “Title” and “Text”, choose the “Page” rule, then enter the “Page URL or path”. For a tooltip by an element, choose its “Position”.

“Tooltip by element” requires an “Element CSS selector”. Choose a stable selector, such as the data-flowtomate-target attribute. It must match exactly one element; the widget cannot find an element inside an iframe or another component’s Shadow DOM. Modal steps do not need a selector.

Tour draft editor with a modal step

One modal step on a neutral background. This screenshot does not verify navigation or the step’s association with a site page.

Under “Advance after step”, choose “Button”, “Element click”, or “Event”. Element clicks are available only for Tooltip; event-based advancement is available only when there are active events. For a button, enter the “Primary button action ID” and “Primary button text”, and optionally the “Primary button URL”. The URL must be relative or point to the same origin.

Use the Chrome extension to build steps visually. It saves the tour directly to the selected Flowtomate project.

The “Preview” button in the dashboard shows the content and order of the steps. Navigation and events are simulated here, and statistics are not recorded. To check link navigation, element matching, and behavior on your site, preview through the extension on a page with the same project’s widget.

Building a tour in the Chrome extension ​

The extension works in Chrome on open HTTP(S) pages. Before you begin, the Web SDK must be installed on your site; see “Integration” for the code and connection checks.

  1. Open the extension’s side panel and sign in to Flowtomate under “Connect account”.
  2. Select an account (workspace), then a project. If there is no project, click “Create project”.
  3. In the project, select an existing tour or click “Create first tour”. Enter the “Tour name” and “Start page”.
  4. Open the required site page in the active tab. Click “Select element”, then select an element on the page: the extension opens the Tooltip editor. Check that the CSS selector is stable, preferably using data-flowtomate-target.
  5. Enter the step’s title and text, choose its position and “Advance method”. Click “Select next element” for the next Tooltip or “Add modal” for a step without an element. In the editor, you can add an extra link and media with an HTTP(S) URL.
  6. To advance or auto-start after an event, create it in the project: open “Project events”, and under “Add custom event”, enter the “Technical name”, name, and description. Click “Create event”, then “Select element” and select an element on the page. Return to the tour and choose this event.
  7. Click “Save and finish tour” after configuring the step, then “Save tour” or “Save changes”. In the step list, click “Show on screen” to check each step on the page.

After saving, open “Tours”, find the tour, and click “Open”. Check the steps and display settings, then click “Enable”. For an active tour, “Save draft” keeps the previous version on your site; “Publish changes” releases your edits without disabling the tour.

Step page screenshot ​

When saving a step, the extension captures the visible area of the page without its editor. Wait for saving to finish before navigating to another page. If the screenshot fails, try again or click “Save without screenshot”; the text you entered remains in the form.

In the Flowtomate editor, expand “Step layout” to see the page as it was when captured, with the current tooltip text overlaid. The tooltip position is approximate; use the site preview to check its behavior. Changing the URL does not update the screenshot automatically — record the step again on the required page.

Screenshots are available to users with permission to view tours in this project. The public widget does not load them. For older steps without a screenshot, the editor prompts you to record the page again.