Banners | Yaplet

How Banners Work

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

Banner List

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

A live color preview strip matching the banner's actual colors
The banner name and associated widget
A Published/Draft badge — click it directly from the list to toggle the banner's status
Priority weight and creation date
Quick action buttons for editing, copying, or deleting the banner

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 configure everything from scratch.

Server Issue

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

New Feature

Blue inline banner with a "Learn more" URL action. Triggers once per session.

Special Offer

Green inline banner with a "Claim offer" URL action. Triggers once per session.

Important Notice

Red inline banner with no close button or action. Triggers on every page view.

Info Tip

Indigo inline banner with a "Show me" URL action. Triggers once per session.

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

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 organised into discrete, icon-led sections — Trigger, General, Content, Background, Layout, Border and Action — so each group of fields is visually separated and easier to scan.

Triggering Banners

The Trigger section is the first thing you see in the editor. If no triggers are configured, a warning box appears prompting you to set them up. If triggers exist, a summary shows the count. 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

Select which widget this banner belongs to. The widget determines which website the banner will appear on.

Published

boolean

Toggle 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 color 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 unique positioning and behavior:

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 customize 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. Optionally select a specific workflow to begin the conversation.

Start Survey

Launches a survey for visitor feedback.

Show Feedback Form

Displays a feedback form for collecting user input.

Open URL

Redirects visitors to an external website or page.

Show Knowledgebase Article

Displays a knowledgebase article from your widget's knowledge base.

Show News Article

Presents a news article from your outreach content.

Action Customization

For actions that include interactive elements:

Action Text

string

The text displayed on the action button.

Action Color

string

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

Action buttons inherit the banner's text color logic - they'll automatically use appropriate contrast colors 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 color to test different page backgrounds and ensure proper contrast.

Testing Outreach Campaigns

Learn how to safely test your outreach campaigns before deploying them to 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.