# Banner Widget

The Banner widget is part of the **Promotional Content** widget category. For more information on the widgets, please refer to [Widgets configuration in the visual editor](/web-experimentation-and-personalization/editors-and-widget/list-of-widgets/widgets-configuration-in-the-visual-editor.md).

## Introduction <a href="#id-01gndd6kdsf4mg5ttbx5q24nwc" id="id-01gndd6kdsf4mg5ttbx5q24nwc"></a>

The Banner widget enables you to display a banner and possibly a button linking to a specific URL.\
Images can be added as background images.

![](/files/RnDEGodQ9iECjj8OpQCF)

![](/files/1gsWF6beaUDFQdyebKdb)

## Configuration <a href="#h_01j5596dyesggyhjz51731rnbs" id="h_01j5596dyesggyhjz51731rnbs"></a>

### Layout tab <a href="#id-01gndd6kdvtc1s9c3x6d3t5884" id="id-01gndd6kdvtc1s9c3x6d3t5884"></a>

<img src="/files/vA2JBapKYZoYbt0K3fg7" alt="" width="306">

#### Layout <a href="#id-01j55bpk6f46tqamdyfycavkqr" id="id-01j55bpk6f46tqamdyfycavkqr"></a>

Three layouts are available:

* top banner
* bottom banner (by default)
* free placement (which allows you to place the widget where you want in the page)

Layouts are natively responsive.

#### Layer <a href="#id-01gndd6kdvctdtke9tak443vw9" id="id-01gndd6kdvctdtke9tak443vw9"></a>

**Layer Position (z-index)**

<img src="/files/qNO6qs95UXvWhUiEFQiT" alt="" width="281">

If you have selected the "top banner" or "bottom banner" layout, you can define the position of the widget on the z-axis to manage the widget position: above everything, below everything, or precisely fine-tuned.

### Content tab <a href="#id-01gndd6kdvhnw5sthaywapnm4k" id="id-01gndd6kdvhnw5sthaywapnm4k"></a>

<img src="/files/sA9vu8t6OgpdSpXlRIcO" alt="" width="302">

#### Message (text or HTML) <a href="#id-01gndd6kdv2py8mpq6pa83p077" id="id-01gndd6kdv2py8mpq6pa83p077"></a>

As the Banner widget is mainly designed to contain text, you have to fill in the text area. It supports multi-line messages.\
You can use HTML markup to add ordered or unordered lists. All the other styling aspects should be done through the *Style* tab. You can also add emojis.

#### Widget link type <a href="#id-01gndd6kdv1fggta3cj65pbprf" id="id-01gndd6kdv1fggta3cj65pbprf"></a>

You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.

* "The button is a link": you will have to specify a button URL and a button text. The widget will display a button.
* "A click on the button closes the widget": you will have to specify a button text. The widget will display a button.
* "The whole widget is a link": you will have to specify a URL. The widget will not display a button.
* "A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
* "None": the widget will not be clickable.\
  If you use a background image that looks like a "big ad", we recommend that you select "The whole widget is a link" and remove the paragraph with the editor once the widget is set.

#### Second CTA/link option <a href="#id-01gndd6kdv9p574gdav4gd1pej" id="id-01gndd6kdv9p574gdav4gd1pej"></a>

<img src="/files/VMg6fau51eDzCCLCSrsr" alt="" width="280">

Toggle the “Add a second link” option to configure a second link/ CTA in your widget, the same way as the first one.

### Style tab <a href="#id-01gndd6kdvf0hvam51b0gyjc4w" id="id-01gndd6kdvf0hvam51b0gyjc4w"></a>

Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.

Background can be set up with an image using the image-fitting policy

4 options are provided:

* "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
* "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
* "Fill": the image is resized to fill the background container without keeping the aspect ratio
* "None": the image is left unchanged.

### Conditions tab <a href="#id-01gndd6kdv79q8nc9k8gjsvk9r" id="id-01gndd6kdv79q8nc9k8gjsvk9r"></a>

Select the Triggering and Recurrence options you want to apply to the Banner widget.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/web-experimentation-and-personalization/editors-and-widget/list-of-widgets/ab-tasty-prebuilt-widgets/banner-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
