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.

Triggering Banners

Banners can be triggered by various events and conditions such as page visits, user interactions, time-based rules, or custom events. For detailed information about configuring banner triggers, see our comprehensive trigger documentation.

Trigger Configuration

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

Banner Settings

Basic Configuration

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.

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.

Background Styling

Choose between a solid color background or a gradient:

Select a single background color for your banner from the color picker.

Gradient backgrounds require at least 2 colors. The text color automatically adjusts based on the middle color in your gradient for optimal contrast and readability.

Border & Appearance

Border Width

number

Add a customizable border around your banner with adjustable width in pixels.

Border Color

string

Choose the color for your banner's border.

Border Radius

number

For floating pill banners, set rounded corners (leave empty for default rounded appearance).

Close Button

boolean

Enable a close button (×) that allows visitors to dismiss the banner.

Banner Actions

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

Use the built-in preview feature to see how your banner will appear on your website. You can adjust the preview background color to test different page backgrounds and ensure proper contrast and visibility.

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.