Skip to main content

Available tour step types

Welcome​

Welcome tour step is a slightly larger that normal card, that you can use for example as the first step to engage the user to the tour. It also has centered title.

Example of welcome tour step card

Highlight​

With the highlight tour step, you can highlight elements in your page. They will position next to the element you specify. Additionally you can configure the direction of the position, (top, left, right, bottom) or leave it to auto. In auto position Produktly will automatically find the best position. You can also toggle if you want the "spotlight" effect to happen, where rest of the page is slightly darkened, or turn it off.

Example of highlight tour step card

Modals will position in the center of the screen, it's a "regular" card that just contains the information you want. It's slightly smaller than the welcome type card. Useful for giving general instructions without highlighting anything specific in the page.

Example of highlight tour step card

Toast​

Toast will always position itself to the bottom-right corner. It's useful for giving guidance/instructions without getting in the way of the user.

Example of highlight tour step card

Redirect​

Self-explanatory maybe, but yes you can also configure redirects in produktly.com. Let's say you have some tour steps on example.com/welcome/, but then after those the tour should continue at example.com/app/, you can configure a redirect step that will automatically redirect the user to example.com/app/ when that steps comes in the tour.