Skip to main content

Configure your steps

What’s a Step?​

A step is a highlighted point on your website used to present a feature or provide specific information to users.

For each step, you can add image and as much text and to clearly explain the feature and guide the user.

Every step is linked to a specific HTML element on your website, ensuring that the information is displayed in the right place and context.

Options​

Position​

The product tour can be displayed in different positions around the selected target element. You can manually choose the preferred position. However, if there isn’t enough space during rendering, the system will automatically adjust and display the step in the most suitable available position.

Button​

You can customize the text of the Next button.

By default, the button label is “Next” and is automatically translated into all supported languages.

Go automatically to the next pin​

When this option is enabled, clicking the Next button will automatically redirect the user to the page of the next step (if it’s on a different page) and scroll to the corresponding target element.

Target​

To display a step to your users, two elements are required: the URL and the CSS selector. Both are automatically captured when you create a step.

URL​

The URL corresponds to the page where you placed the step. By default, it uses the exact URL of the page you selected.

If your URL contains dynamic parameters (such as IDs) or if you want the step to appear on a broader range of similar pages, you can edit the URL and replace dynamic parts with *. This allows the step to match multiple URLs instead of a single, specific one.

CSS​

To ensure the step appears in the correct location, it must be linked to a specific HTML element using a CSS selector (ID or class).

Keep in mind that some classes may be dynamically generated depending on your tech stack. In those cases, we recommend using a stable and fixed ID or class.

You can use the dedicated identifier we provide, which follows this format:

told-XXXXXXX

This dedicated identifier also allows you to easily edit and reselect the step later, ensuring it remains correctly attached to the intended element even if your layout evolves.

After making any changes to your product tour (steps, targets, URLs, options, etc.), always use the Preview mode to verify that everything works correctly.

This allows you to confirm that the positioning, navigation, and targeting behave as expected before publishing the tour to your users.