Banners | Yaplet

How Banners Work

Banners are displayed directly on your website when trigger conditions are met. They integrate with your site's design and can include text content, styling options, and interactive elements like buttons or a close control.

Banner List

The banner list displays all your banners as visual cards in a grid layout. Each card shows:

A live colour preview strip matching the banner's actual colours
The banner name and the widget it belongs to
A Published/Draft badge — click it directly from the list to toggle the banner's status
The banner's creation date
A Priority number in the card footer with two arrow buttons beside it — hover them for Increase priority and Decrease priority — plus an Edit button, with Copy and Delete behind the ⋯ menu

Creating a Banner

Click New Banner to open the creation modal. You can start from scratch or choose a pre-built template:

Blank Banner

Start with an empty banner and build it your way.

Server Issue

Yellow inline banner with a "Contact us" chat action. Fires on every page view.

New Feature

Blue inline banner with a "Learn more" URL action. Fires at session start, once per visitor.

Special Offer

Green inline banner with a "Claim offer" URL action. Fires at session start, once per visitor.

Important Notice

Red inline banner with no close button and no action. Fires on every page view.

Info Tip

Indigo inline banner with a "Show me" URL action. Fires at session start, once per visitor.

Templates pre-fill both the visual settings and the trigger conditions, giving you a ready-to-use banner that you can customise further.

Banner Editor

The banner editor uses a two-panel layout on desktop: a settings panel on the left and a live preview on the right. On mobile, the preview appears as a sticky strip at the top with the full settings form below.

The top navbar shows the banner name, a Live/Draft status badge, and buttons for reports and saving.

The settings panel is split into icon-led sections, in this order — General, Trigger, Content, Background, Layout, Border and Action — so each group of fields is visually separated and easier to scan.

Triggering Banners

The Trigger section sits directly under General. If no triggers are configured it shows a warning box reading "No triggers configured — This banner won't show to any visitors." If triggers exist, it shows how many conditions are set. Clicking either opens the trigger configuration modal.

For detailed information about configuring triggers, see our comprehensive trigger documentation.

Trigger Configuration

Learn about all available trigger options and how to configure them for your banners.

Banner Settings

General

Name

string required

A descriptive title for your banner, used in the dashboard.

Widget

string required

Which chat widget this banner belongs to — and therefore which website it appears on. A brand has at most one chat widget, so in practice you are choosing the brand.

Published

boolean

Whether the banner is active and can be displayed to visitors.

Content

string required

The main text content of your banner, supporting HTML formatting through a rich text editor.

Background

The Background section starts with a Solid / Gradient tab switcher — the same pattern used by the widget Launcher Button. Pick a mode, and only the fields relevant to that mode appear below.

A single background colour for the banner.

Color

string

The banner's background colour.

:: :::

A multi-stop linear gradient. Each stop is a colour, blended in order along the chosen angle.

Stop 1 … Stop N

string

Between 2 and 5 colour stops. Add a stop with the Add stop button; remove a stop with the × next to it (the minimum of 2 stops is enforced — you can't drop below it).

Angle

number

Rotation angle in degrees (0–360). Edit it via the number input, drag the slider, or click one of the 0° / 90° / 180° / 270° / 360° preset markers underneath the slider.

Switching back to Solid keeps your gradient stops, so you can flip between modes without losing your colour choices. The text colour automatically adjusts based on the middle colour of the gradient for optimal contrast.

Layout

Style

select required

Choose the banner's display style (see Display Styles below).

Border Radius

number

Only shown when Style is set to Floating pill — sets rounded corners (leave empty for the default).

Show a close button

boolean

Lets visitors dismiss the banner with an × in the top-right corner.

Display Styles

Banners offer three different display styles, each with its own positioning and behaviour:

Full-width banners that are appended to the top of the body tag. They push down any element that is not fixed to the screen and scroll with the page content - disappearing when scrolled, just like regular page elements.

When active, the body tag receives the yaplet-b-shown CSS class.

Full-width banners that stick to the top of the screen even when scrolling. This style doesn't attempt to push down page content - it appears on top of existing elements. Perfect for sites with fixed navigation bars or headers.

Adds yaplet-b-shown and yaplet-b-fi CSS classes to the body. If needed, you can push down fixed headers using the --yaplet-margin-top CSS variable.

Centered, pill-shaped banners that don't span the full screen width. Like floating full width, they stick to the top but are visually distinct and slightly distanced from the screen edge.

Adds yaplet-b-shown and yaplet-b-f CSS classes to the body. If needed, you can push down fixed headers using the --yaplet-margin-top CSS variable.

Banners automatically add CSS classes and CSS variables to your page when displayed, allowing you to adjust your layout if needed. Use these to customise how your site's elements interact with the banner positioning.

Border

Show border

boolean

Adds an outline around the banner. Width and colour fields appear once enabled.

Border Width

number

Border thickness in pixels.

Border Color

string

Outline colour.

Action

Configure what happens when visitors interact with your banner:

No action

The banner displays information only, with no interactive elements.

Start conversation

Opens a chat conversation in the widget. You can optionally pick a workflow to start it with — the picker lists the chosen widget's active custom workflows, and None leaves the conversation to start empty.

Start survey

Launches one of this widget's published surveys.

Show feedback form

Displays one of your intake forms. Forms live on the board they file tickets on — Communications → Tickets → (board) → Forms.

Open URL

Redirects visitors to an external website or page.

Show knowledgebase article

Displays a published article from whichever knowledge base is currently live at the brand's web address — the one you picked with the Show at … action on Brand → (your brand) → Knowledge. That action names your own address once the brand has one, and reads Show at your web address until then.

Show news article

Presents one of this widget's published news articles.

Action Customization

For actions that include interactive elements:

Action Text

string

The text displayed on the action button.

Action Color

string

Custom colour for the action button (leave empty to use default styling).

Action buttons inherit the banner's text colour logic - they'll automatically use appropriate contrast colours based on your background choice.

Preview & Testing

The live preview in the editor shows exactly how your banner will look on your website. On desktop, it's displayed in a browser mockup alongside the settings panel. You can adjust the preview background colour to test different page backgrounds and ensure proper contrast.

Testing engagement campaigns

Learn how to safely test your campaigns before letting them reach live visitors.

Always test your banners across different devices and screen sizes, especially when using floating styles or gradients, to ensure they display correctly for all visitors.