# Banners

## What Are Banners?

Banners, like modals, are **single-step experiences** but with a fixed style. They typically span the top of the screen (or a small area within it), enabling concise announcements, promotions, or contextual hints. Using the same Jimo builder as other experiences, you’ll only manage **one Banner step** at a time, keeping interactions simple and direct.

***

## Overview

### 📺 Tutorial: First Banner

{% embed url="<https://youtu.be/-5ssJh31z8M>" %}
First Banner
{% endembed %}

* **Compact Messaging:** Deliver short, impactful statements without disrupting the user flow.
* **Flexible Positioning:** Top, bottom, or partial overlays—tailor banners to suit your product’s design.
* **Optional Actions:** Include a CTA button or link for further details or next steps.

***

## Use Cases

Explore our [demo website](https://explore.usejimo.com/dashboard) to see examples of Banners in action. Choose between different experience examples to see how a banner can be effectively implemented in context.

<figure><img src="/files/dekAHr01e0TpNxRtYf1W" alt=""><figcaption></figcaption></figure>

* **Announcements:** Highlight new features or promotions without forcing a modal.
* **Alerts & Reminders:** Nudge users about deadlines, policy updates, or maintenance windows.
* **Friendly Tips:** Provide brief guidance or best practices in context, ensuring minimal disruption.

***

### How to Access

1. **Navigate to Experiences:**\
   From your [Jimo dashboard](/docs/build/dashboard.md), go to [**Banners**](https://i.usejimo.com/banners).<br>

   <figure><img src="/files/lllSAxnx5hJt9JJiSdQQ" alt=""><figcaption></figcaption></figure>
2. **Create or Select a Banner:**
   * **First-Time Users:** Click **"Create Your First Banner"**.

     <figure><img src="/files/Ekz8aIurp2gRf0XdTFtY" alt=""><figcaption></figcaption></figure>
   * **Returning Users:** Click the **+ New Banner** button in the top-right corner.

     <figure><img src="/files/BzEtK15UhMtmI8KQFLYF" alt=""><figcaption></figcaption></figure>
3. **Choose a Template or Start from Scratch:**
   * **Templates:** Select from a variety of prebuilt banners tailored for common announcements.
   * **From Scratch:** Build your banner step-by-step for total customization.

     <figure><img src="/files/FcJ8VTE2VUoUgaNjY3KS" alt=""><figcaption></figcaption></figure>

***

## Main Features

Jimo’s Banners come with a robust set of tools that let you create concise, visually **appealing messages**. Below is an overview of the overall process. For a detailed breakdown of banner-specific elements and customization, visit our [**Banner Components page**](/docs/experiences/banners/components.md).

### Builder

The Builder is your central hub for **creating Banners**. You’ll configure a single step, focusing on how the message looks and functions.

<figure><img src="/files/j2tW9E7Ma5aTf4y8IKMK" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Name and Back Button (A)</strong></summary>

* **Edit Banner Name:** At the very top, you can edit the name of your banner for easy identification.
* **Back to Dashboard:** Use the arrow next to the name to quickly return to the [Dashboard](/docs/build/dashboard.md) overview of all your banners.

</details>

<details>

<summary><strong>Single Step Indicator (B)</strong></summary>

Because a **Banner** is inherently a single-step experience, you won’t toggle between a Flow Builder and Content Builder. \
\
Instead, the Legacy Builder interface highlights that **only one step** is available, making it straightforward to manage both layout and content in a single view.

</details>

<details>

<summary><strong>Action Buttons (C)</strong></summary>

* **Save:** Secure your progress with the 'Save' button, which also [automatically saves your work regularly](#user-content-fn-1)[^1].&#x20;
* [**In-App Editor:**](/docs/build/builders/in-app-builder.md) Visualize and edit the survey within the context of your actual website by indicating the starting point URL.
* [**Preview:**](/docs/build/preview.md) Simulate a full survey flow to see how it appears and behaves.
* [**Target & Publish:**](/docs/publish/target-and-publish.md) Set the criteria for who will see the banner and when it will be displayed.

</details>

***

### Legacy Builder

The [Legacy Builder](/docs/build/builders/content-builder.md) is where you **customize content and behavior of single-step experiences**. It combines structural, styling, and content options in one place.

<figure><img src="/files/Lt9kQpUYxIHxTYT3GP4l" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Properties Sidebar: Elements Editor (A)</strong></summary>

* **Modify Attributes:** Adjust positioning, styling, and animations for the currently selected element in the navigator.

</details>

<details>

<summary><strong>Builder Menu (B)</strong></summary>

* [**Navigator:**](/docs/build/navigator.md) Manage and edit elements within the banner.
* [**Themes:**](/docs/build/theme.md) Apply consistent styling across your banner.
* [**Translations:**](/docs/build/multiple-languages.md) Manage multi-language versions.

</details>

<details>

<summary><strong>Navigator (C)</strong></summary>

* **Element List:** See all elements in the banner, with the selected element highlighted.
* **Element Selection:** Click to edit specific elements via the Properties Sidebar.

</details>

<details>

<summary><strong>Live Step Preview (D)</strong></summary>

* **Real-Time Editing:** View and edit elements in the central preview.
* **Element Interaction:** Click on elements to modify content directly.

</details>

***

## Best Practices

{% stepper %}
{% step %}
**Keep It Concise**

Banners excel at short messages, avoid overcrowding with too much text.
{% endstep %}

{% step %}
**Choose Visibility Wisely**

Position banners where they’re noticeable but not blocking essential UI elements.
{% endstep %}

{% step %}
**Offer Clear CTAs**

If you include a button or link, ensure the action is straightforward and relevant.
{% endstep %}

{% step %}
**Maintain Brand Consistency**

Use fonts, colors, and styles that match your product’s design language.
{% endstep %}

{% step %}
**Track Engagement**

Use Jimo’s analytics to see who dismisses or clicks the banner, then refine your messaging.
{% endstep %}
{% endstepper %}

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


---

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