> For the complete documentation index, see [llms.txt](https://help.usejimo.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.usejimo.com/docs/experiences/banners.md).

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