Banners

Craft and customize engaging banners with Jimo's Builder, featuring easy navigation, live previews, and a full suite of editing tools.

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

First Banner

• 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 to see examples of Banners in action. Choose between different experience examples to see how a banner can be effectively implemented in context.

• 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, go to Banners.

   
2. Create or Select a Banner:

   • First-Time Users: Click "Create Your First Banner".

     
   • Returning Users: Click the + New Banner button in the top-right corner.

     
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.

     

---

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.

Builder

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

Name and Back Button (A)

• 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 overview of all your banners.

Single Step Indicator (B)

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.

Action Buttons (C)

• Save: Secure your progress with the 'Save' button, which also .

• In-App Editor: Visualize and edit the survey within the context of your actual website by indicating the starting point URL.

• Preview: Simulate a full survey flow to see how it appears and behaves.

• Target & Publish: Set the criteria for who will see the banner and when it will be displayed.

---

Legacy Builder

The Legacy Builder is where you customize content and behavior of single-step experiences. It combines structural, styling, and content options in one place.

Properties Sidebar: Elements Editor (A)

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

Builder Menu (B)

• Navigator: Manage and edit elements within the banner.

• Themes: Apply consistent styling across your banner.

• Translations: Manage multi-language versions.

Navigator (C)

• Element List: See all elements in the banner, with the selected element highlighted.

• Element Selection: Click to edit specific elements via the Properties Sidebar.

Live Step Preview (D)

• Real-Time Editing: View and edit elements in the central preview.

• Element Interaction: Click on elements to modify content directly.

---

Best Practices

1

Keep It Concise

Banners excel at short messages, avoid overcrowding with too much text.

2

Choose Visibility Wisely

Position banners where they’re noticeable but not blocking essential UI elements.

3

Offer Clear CTAs

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

4

Maintain Brand Consistency

Use fonts, colors, and styles that match your product’s design language.

5

Track Engagement

Use Jimo’s analytics to see who dismisses or clicks the banner, then refine your messaging.