# Drawer Widget

The Drawer 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 Drawer widget allows you to incorporate a dynamic element into your variations. The drawer appears as a tab (referred to as the "Sticky Button") affixed to one edge of the screen, presenting a headline (and optionally an icon) to invite visitors to click on it. If clicked, a panel will unfold from the edge of the screen to present content to the visitor.

Similar to other widgets offered by the platform, extensive configuration options enable you to define what you want to present to your visitors within this experience.

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

### Layout tab <a href="#h_01hp1mwmxew3e2xxc6pat04m2x" id="h_01hp1mwmxew3e2xxc6pat04m2x"></a>

In addition to the typical sizing and layer definition configurations, the layout section allows you to define two positions for the widget. The "Button layout" section describes the positioning of the drawer tab precisely on the site, and consequently, the direction in which the drawer will unfold upon clicking (a tab on the left implies the drawer unfolds to the right, a tab at the top implies a downward unfolding, and so on).

<img src="/files/O7B9LEL94WxDtGBdkLNW" alt="" width="237">

The "Layout" section more conventionally describes the organization of elements presented within the content itself.

The content section provides options to present text elements as well as an image. It is worth noting, however, that the drawer offers the option to work with "Text only" or "Image only" content if the experience requires it.

<img src="/files/jFURIAqzDVIe5GZZDFaH" alt="" width="171">

### Content tab <a href="#h_01hp1mwmxe8v332hcs51vb4m6z" id="h_01hp1mwmxe8v332hcs51vb4m6z"></a>

The content configuration also allows you to define the content of both the tab (Sticky Button) and the drawer itself.

For the Sticky Button, the configuration involves defining the text displayed to the user and optionally an icon if desired.

<img src="/files/zlYlpFcOnFW8aR25rWWk" alt="" width="289">

For the drawer part, the content configuration is relatively similar to that of an Image Popin. You can define the elements you want to display to your visitors and configure them. Thus, it is possible to choose whether the drawer will present a title and text. You can also configure the content of these elements and the image to be displayed.

<img src="/files/xUvvEALZGzsSmqf915KR" alt="" width="284">

Finally, still in the content section, it is possible to configure the button or buttons offered to visitors as well as their behavior (closing the widget, redirection, etc.).

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

### Style tab <a href="#h_01hp1mwmxejt8pcxeezqreybqz" id="h_01hp1mwmxejt8pcxeezqreybqz"></a>

Similarly, the style configuration allows adaptation for both the Sticky Button and the drawer itself.

The configuration of the Sticky Button is quite similar to that of a button in other widgets. Colors, borders, and texts can be adjusted to the context of the site where the widget will be deployed.

<img src="/files/1bDtZw9Jacve3M2Bphxb" alt="" width="286">

Note that in the case of the Sticky Button, a position configuration is offered. This allows you to define the position of the tab in relation to the drawer itself: in the middle, at the top, at the bottom, or across the entire length of the drawer.

<img src="/files/YsbEuD51rgzkNb905tXB" alt="" width="286">

For the container section, typical widget configurations can be performed: texts, colors, buttons, and borders can be adapted to the context of the site on which the widget will be deployed.

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

### Conditions tab <a href="#h_01hp1mwmxe7bg1dzcw3h52ws55" id="h_01hp1mwmxe7bg1dzcw3h52ws55"></a>

Finally, analogous to other widgets, the condition parameters allow you to define the conditions for appearance, recurrence, and the animation of the widget's appearance on the page.


---

# 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/drawer-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.
