# Overview

### **Accessing the Builder**

Navigate to the Builder from the dashboard to start crafting your banner.

### **Main Features**

<figure><img src="/files/HFIActAmBQ1IQ9yk05Zy" alt=""><figcaption><p>Banner builder</p></figcaption></figure>

* **A (Banner Name and Back Button)**: At the very top, you have the ability to edit the name of your banner. The arrow next to it allows you to quickly return to the Dashboard for an overview of all your banners.
* **B (Live Preview)**: The central stage of the Builder provides a real-time preview of the banner, showing you exactly how it will appear for your users.
* **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' to visualize and edit the banner 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' to see a full simulation of your banner.
  * The 'Target & Publish' to set the criteria for who will see the banner and when.
* **D (Feature Panels Access)**:
  * The 'Elements Selector' to add new interactive components to your steps.
  * The 'Navigator' to see a structured view of your banner's flow and elements.
  * The 'Themes' to apply consistent styling across your banner.
  * The 'Translations' to manage multi-language versions of your banner.
* **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.

***

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

<details>

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

**Quick Help**: Address common queries about the Builder with succinct, helpful answers.

</details>

<details>

<summary><mark style="color:blue;background-color:yellow;">Further Resources</mark></summary>

**Learning and Support**: Direct users to tutorials and customer support for in-depth assistance with the Builder.

</details>

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

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


---

# 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/banners/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.