# Overview

### **Accessing the Builder**

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

<details>

<summary>First time in the hint builder</summary>

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

&#x20;![](/files/Yf7d1F3sIK4c5TNc5Zmo)

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.

![](/files/9B3dD7SFLJ6pkf3PNQcR)

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

<img src="/files/wUZdp81YDfVD7zEFyNan" alt="Start from scratch" data-size="original">

</details>

### **Main Features**

<figure><img src="/files/2c8N0zb3iDpWilbPY4YM" alt=""><figcaption><p>Hint builder</p></figcaption></figure>

* **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](/docs/experiences/hints/steps-and-navigation.md) 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 [automatically saves your work regularly](#user-content-fn-1)[^1].&#x20;
  * The '[In-app editor](/docs/build/positioning.md#positioning-in-app)' to visualize and edit the hint within the context of your actual website. You just have to [indicate the starting point URL](#user-content-fn-2)[^2] on which you want to open your builder.
  * The '[Preview](/docs/build/preview.md)' to see a full simulation of your hint.
  * The '[Target & Publish](/docs/publish/target-and-publish.md)' sets the criteria for who will see the hint and when.

{% hint style="warning" %}
Hints have no "[Show on](/docs/publish/trigger-on-the-right-spot-show-on.md)" section they will always be displayed on the targeted elements found on the pages defined by the [where field](/docs/publish/target-specific-urls-domains-where.md), but only to the selected audience in the [who field](/docs/publish/target-right-people-who.md).&#x20;

That allows you to still define some conditions to [exclude users dynamically](broken://spaces/Re2Ks4JjsWWmOQXOAHiS/pages/HR37kaTR4y22lc1dwVsl) from a segment so he does not see the hints anymore.
{% endhint %}

* **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.

<figure><img src="/files/bi20Lca5FtdYnLCILPr8" alt="" width="563"><figcaption><p>Tooltip step properties</p></figcaption></figure>

* **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](/docs/build/positioning.md#css-selector) and play with the [positioning parameters](/docs/build/positioning.md#position-parameters-in-the-builder). Targeting an element of your webpage is mandatory to place hints.

{% hint style="info" %}
To place hints and avoid display issues we recommend targeting fixed elements or use unique custom identifiers
{% endhint %}

***

<details>

<summary><mark style="color:blue;background-color:yellow;">Best Practices</mark></summary>

* **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.

</details>

[^1]: <img src="/files/xfc0XXAh3gO7Jx08AauJ" alt="" data-size="original">

[^2]: ![](/files/FwlLpHFg8F2fvTYRtCBD)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.usejimo.com/docs/experiences/hints/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
