# 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FIOY6ryqFhQawdeHLfve2%2Fimage.png?alt=media&#x26;token=9ad8a742-dc77-40df-80bb-9f96dc945397" 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](https://help.usejimo.com/docs/build/dashboard), go to [**Banners**](https://i.usejimo.com/banners).<br>

   <figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FUHWAblEmn1PQses36YPG%2Fimage.png?alt=media&#x26;token=2e3da2ac-849f-4288-af72-0380816349f7" alt=""><figcaption></figcaption></figure>
2. **Create or Select a Banner:**
   * **First-Time Users:** Click **"Create Your First Banner"**.

     <figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FdfEU8eigMvomPp5wBPzY%2Fimage.png?alt=media&#x26;token=669e8305-8f59-4973-bfcd-c0409a5775c0" alt=""><figcaption></figcaption></figure>
   * **Returning Users:** Click the **+ New Banner** button in the top-right corner.

     <figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FgNQ7Qb8w0dROgyGvO6VP%2Fimage.png?alt=media&#x26;token=ebefe582-3b5e-4a74-a2ef-8ea8db678cf1" 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FG95d91RXEMXPUUlvuyCc%2Fimage.png?alt=media&#x26;token=720e7dcf-dc32-4014-be65-4bedf84e64d9" 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**](https://help.usejimo.com/docs/experiences/banners/components).

### 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FehAhqzeo7jOph4qfIyu5%2Fimage.png?alt=media&#x26;token=aef8f3ef-e2b0-494b-9ee5-7300eff2fad2" 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](https://help.usejimo.com/docs/build/dashboard) 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:**](https://help.usejimo.com/docs/build/builders/in-app-builder) Visualize and edit the survey within the context of your actual website by indicating the starting point URL.
* [**Preview:**](https://help.usejimo.com/docs/build/preview) Simulate a full survey flow to see how it appears and behaves.
* [**Target & Publish:**](https://help.usejimo.com/docs/publish/target-and-publish) Set the criteria for who will see the banner and when it will be displayed.

</details>

***

### Legacy Builder

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

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FyA5ynUXjDYBhMGVOiYls%2Fimage.png?alt=media&#x26;token=7220217f-59fc-452f-8e79-452b325d3f9c" 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:**](https://help.usejimo.com/docs/build/navigator) Manage and edit elements within the banner.
* [**Themes:**](https://help.usejimo.com/docs/build/theme) Apply consistent styling across your banner.
* [**Translations:**](https://help.usejimo.com/docs/build/multiple-languages) 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FQ5r0zzDqjnuzuqPc4xSm%2FTMbuilderSave.png?alt=media&#x26;token=1f8501d8-918c-40b5-bbc2-1028e527d5e6" alt="" data-size="original">