Overview

Quickly design and modify interactive hints that captivate and guide your users.

Accessing the Builder

Navigate to the Builder from the dashboard to start crafting your hint group.

First time in the hint builder

When creating a new tour from scratch it will start by asking you to select the type of the first hint.

Then for each added hint, you'll be suggested presets. These cards offer pre-configured step designs like 'Simple tooltip' or 'Copy of previous hint', providing a quick way to get started with common hint patterns.

You can still build your own design and content from the ground up by using the start-from-scratch option.

Main Features

Hint builder

• A (Hint Name and Back Button): At the very top, you have the ability to edit the name of your hint. The arrow next to it allows you to quickly return to the Dashboard for an overview of all your hints.

• B (Step Management Navigation Bar): This bar is your control center for managing the steps of your hint. It facilitates the navigation through different components of the experience you're crafting.

• C (Action Buttons): Here, you'll find multiple actions:

  • The 'Save' button to secure your progress. This button allows you to force save but the builder .

  • The 'In-app editor' to visualize and edit the hint within the context of your actual website. You just have to on which you want to open your builder.

  • The 'Preview' to see a full simulation of your hint.

  • The 'Target & Publish' sets the criteria for who will see the hint and when.

Hints have no "Show on" section they will always be displayed on the targeted elements found on the pages defined by the where field, but only to the selected audience in the who field.

That allows you to still define some conditions to exclude users dynamically from a segment so he does not see the hints anymore.

• D (Feature Panels Access):

  • The 'Elements Selector' to add new interactive components to your steps.

  • The 'Navigator' to see a structured view of your hint's flow and elements.

  • The 'Themes' to apply consistent styling across your hint.

  • The 'Translations' to manage multi-language versions of your hint.

• E (Properties Sidebar): This sidebar is dedicated to the properties and parameters of the currently selected element in the navigator. Modify attributes like positioning, styling, and animations here.

Tooltip step properties

• F (Live Step Preview): The central stage of the Builder provides a real-time preview of the currently selected step, showing you exactly how it will appear in the hint.

• G (Target Element Alert): The same pop-up as for adding hotspots or tooltips on tours allows you to directly access the CSS selector and play with the positioning parameters. Targeting an element of your webpage is mandatory to place hints.

To place hints and avoid display issues we recommend targeting fixed elements or use unique custom identifiers

---

Best Practices

• Consistent Design: Use the themes panel to maintain a consistent look across your tour.

• Contextual Editing: Use the in-app editor to ensure each step fits perfectly within your site.