Tours | Yaplet

How Tours Work

Tours are delivered as overlay experiences that appear directly on your website, guiding visitors through interactive walkthroughs of your product. They combine visual cues, explanatory text, and optional video content to create engaging onboarding or feature discovery experiences that adapt to your site's design. Tours can span multiple pages, automatically navigating visitors between pages as they progress through each step.

Triggering Tours

Tours can be triggered by various events and conditions such as page visits, user interactions, time-based rules, or custom events. For detailed information about configuring tour triggers, see our comprehensive trigger documentation.

Trigger Configuration

Learn about all available trigger options and how to configure them for your tours.

Tour Settings

Basic Configuration

Name

string required

A descriptive title for your tour used in the dashboard.

Widget

string required

Select which widget this tour belongs to. The widget determines which website the tour will appear on.

Published

boolean

Toggle whether the tour is active and can be triggered for visitors.

Start URLs

PageUrlEntry[] required

One or more page URLs where the tour can trigger. By default, URLs are matched exactly. Use * as a wildcard to match any text:

https://example.com/dashboard — matches this exact page only.
https://example.com/dashboard/* — matches all subpages under /dashboard/.
https://example.com/*/edit — matches any edit page (e.g. /products/edit, /settings/edit).

Trailing slashes are ignored during matching. The tour triggers when the visitor is on any of the listed URLs (OR logic). You can add as many URLs as needed.

Weight

number

Determines tour priority when multiple tours qualify for the same visitor. Higher weight tours are triggered first.

Allow Close

boolean

Enable visitors to dismiss the tour at any time.

Back Button

boolean

Show a back button allowing users to navigate to previous tour steps.

Tour Builder

The tour builder provides a visual interface for creating interactive guided experiences. It opens in a separate window and allows you to build step-by-step tours directly on your website.

Step Types

Tours support multiple step types to create rich, interactive experiences:

Text-based steps that display messages and information without highlighting specific elements.

Multi-Page Tours

Tours can span multiple pages. Each step can target a specific page URL — when the visitor progresses through the tour, it automatically navigates between pages as needed. In the builder, use the Navigate button to switch to a different page and add steps there. Steps are grouped by page in the timeline for easy overview.

If your start page can be reached via different URL variants, add them as additional Start URLs. Use wildcard matching (e.g. https://example.com/app/*) to cover an entire section of your site, or enter the full URL for specific pages.

Responsive Element Targeting

Pointer and video pointer steps have a built-in fallback system that handles cases where the target element isn't visible — for example, a sidebar menu item that becomes a hamburger menu on mobile. The system provides three layers of resilience: fallback selectors, fallback steps, and skip-if-hidden.

Adding Fallback Selectors

Pick Your Primary Element

Select the main target element as usual using the crosshair picker.

Add a Fallback Selector

Once a primary selector is set, an Add fallback selector button appears below it. Click it to enter picker mode again and select an alternative element (e.g., the mobile equivalent).

Manage Your Fallbacks

Each fallback appears as a numbered pill. You can reorder them with the up/down arrows or remove them with the X button. Add as many fallbacks as needed.

How It Works at Runtime

The SDK tries to display the step using this priority order:

Primary selector — the main element you picked
Fallback selectors — tried in order, top to bottom (same message, different target)
Fallback steps — tried in order, first match wins (completely different step with its own message and target)
Skip or centered message — if nothing matches and Skip if hidden is enabled, the step is silently skipped. Otherwise, the step displays as a centered popover

The first visible match at each layer is used. Fallback selectors preserve the original step's message but point to a different element. Fallback steps are entirely independent — they have their own type, selector, and message.

A pointer targeting a desktop sidebar link might not exist on mobile where the navigation is collapsed into a hamburger menu. Add a fallback selector targeting the mobile menu equivalent so visitors on smaller screens see the pointer on the correct element.

Fallback Steps

While fallback selectors point to a different element with the same message, fallback steps let you define entirely different steps that are shown when the primary element isn't visible. Each fallback step has its own type (pointer or post), selector, and message content.

This is useful when the mobile version of your site has a fundamentally different layout — not just a different selector for the same element, but a completely different interaction flow.

Adding Fallback Steps

In the step editor, the Fallback steps section appears below the fallback selectors for pointer and video pointer steps. Click Add pointer or Add post to create a fallback step. For pointer-type fallbacks, the element picker opens automatically so you can select the target element. Use the pencil icon to edit the fallback step's message content.

Example Use Case

Your tour highlights a "Settings" button in the top navigation bar. On mobile, there is no top nav — instead, users access settings through a bottom tab bar icon. A fallback selector won't help here because the mobile element has completely different surrounding context. Add a fallback pointer step targeting the mobile tab bar icon with a message tailored to the mobile layout.

Skip if Hidden

Enable the Skip if hidden toggle on any pointer or video pointer step to silently skip it when neither the primary element, fallback selectors, nor fallback steps produce a visible match. Without this toggle, unmatched steps display as a centered popover message.

Use Skip if hidden for steps that only make sense in certain contexts — for example, a step highlighting a desktop-only feature that has no mobile equivalent at all.

Builder Workflow

Step 1: Setup Starting Page

Add one or more Start URLs. The tour builder opens the first URL in a new window. If the first URL contains a wildcard (*), you'll be prompted to enter a specific page URL for the builder to open.

Step 2: Add Tour Steps

Click elements on your website to create pointer steps, or add text/video steps to guide users through features. Use the + buttons between steps to insert at a specific position.

Step 3: Navigate to Other Pages

For multi-page tours, click Navigate to switch to another page and continue adding steps. The builder preserves your progress across page navigations.

Step 4: Configure Step Content

For each step, add explanatory text, optional videos, and interaction instructions. Post and link steps can be assigned to any page via the page selector.

Step 5: Preview & Refine

Test the tour flow, adjust step order via drag-and-drop, and ensure smooth navigation between steps and pages.

Step 6: Save Tour

Save your tour configuration back to the dashboard for publishing.

Link steps redirect to a URL and end the tour — use them only as the final step. For mid-tour page transitions, use the Navigate feature to add steps on different pages instead.

Preview & Testing

Use the built-in preview feature to see how your tour will appear on your website. The tour builder provides real-time preview of steps and interactions.

Testing Outreach Campaigns

Learn how to safely test your outreach campaigns before deploying them to live visitors.

Always test your tours across different devices and screen sizes to ensure proper element highlighting and step progression work correctly. Use fallback selectors, fallback steps, and skip-if-hidden on pointer steps to handle responsive layouts where elements may not be visible at all breakpoints.