Widgets are pre-built pieces of code you can directly use in the Editor to create your test variation(s) or personalized message(s).
Adding a widget to a campaign
In each type of campaign editor (all types of Tests and Personalizations, except AA Tests), you can open the widget library by clicking on “Add Widgets”, located in the right sidebar of the visual editor.
The widget configurator opens in a left panel in the visual editor.
Widget configurator
All types of widgets are customizable. Depending on the widget you've chosen, the configurator will be different, with different tabs depending of the widget.
Layout tab
Under the Layout tab, for some widgets, you will find different options for the widget, including:
- its shape
- its position on the page
For some widgets, their shape is defined by their name. For example, the Image Pop-in widget is only available as a pop-in (a modal), and not as a banner. Still, in the Layout tab, if you can't change the shape, you can change the dimensions.
Ex:
Most frequent layouts
The four most frequent widget layouts are:
- Modal
This layout offers a centered modal (pop-in) which comes with an underlay that you can darken or make fully transparent. For some widgets, you can change the dimensions. For others, their dimensions adapt to the content they contain (whether it’s text or images). And for some, both options exist. The container of the modal layout can be customized (border, background color or image, drop shadow, underlay, etc.) in the Style tab.
-
Top banner and bottom banners
These two layouts offer a sticky full-width banner that can be placed at the top or bottom of the page. The banner layout can be customized (border, background color or image, etc.) in the Style tab.
-
Free placement
This option allows you to place a widget in the flow of the page between already existing elements.
It is not the easiest layout to set and you may need to know a bit about the existing structure of the elements of the page before using it, but it is the best layout to make the experience seamless. We highly recommend it for widgets such as Social Proof widget or Banner widget. It is the default layout for the Progress Bar widget.
As we will see in the detailed article below, the four different sub-options you need to understand when using this layout are Before, At the Beginning, At the End, and After.
The free placement layout can customized (border, background (color/image), drop shadow, underlay...) in the Style tab.
Other layouts
In other widgets, such as Image Simple Pop-in widget or Video Pop-in widget, you’ll find additional layout options:
Fundamentally, they are "modal“ layouts. Depending on the layout you select, you will have different sub-options. You will learn more about their subtleties in the specific documentation for each widget.
Some widgets, such as Social Sharing widget or Celebrate widget, do not have a Layout tab.
Free Placement details
Some widgets (like NPS widget, Social Proof widget, and Banner widget) have the Free Placement layout. This option lets you position the widget almost anywhere on the page.
Pre-requisites: It has to be positioned in relation to the existing elements of the page (<div>, <p>, <h2>, <section>)
Once you've selected the element the widget will be positioned in relation to, you have to define the relative position to it.
- Click Select Element.
- On the page, select the element you want to position the widget in relation to.
-
Select the option to position the widget Before, At the Beginning, At the End, or After the element.
Before places the widget before the selected element.
At the beginning places the widget at the beginning of the selected element (and therefore may inherit the element’s existing style).
At the end places the widget at the end of the selected element (and therefore may inherit the element’s existing style).
After places the widget after the selected element.
By default, the selected element is <body> and the option "At the Beginning" makes the widget visible at the top of the page and (if the body element is not very styled) you can see the widget without too much inherited style.
Now, let's look at an example with this HTML code:
<div class="myDiv" style="border:1px solid #393939; padding:2rem;">
<h2 style="color:blue; font-size:2rem;">Title</h2>
<p style="color:teal; font-size:0.8rem;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed elit cursus, facilisis magna et, molestie felis. Nunc fermentum quam felis, id finibus nunc sodales ac. Duis sagittis egestas mi, non auctor magna efficitur venenatis. Donec mollis risus nec urna fringilla, eu cursus risus aliquet. Suspendisse aliquam a tellus in malesuada.</p>
</div>
Watch how the widget reacts depending on if we select the <div>, the <h2>, or the <p> and if we select: Before, In the Beginning, At the End, or After on each one of them.
Layer position (aka z-index)
If you've selected the modal or top/bottom banner layouts, you will see a component allowing you to select the z-index value of the widget.
By default, widgets with "modal" or "banner" layouts are injected into the DOM at the same level as the <body> element. Therefore, their container has the same z-index value.
But you can pick a different value:
Style tab
The Style tab enables you to "merge" the widget with your website’s design (colors, font faces, border-radius, etc.).In general, you’ll find the following sections in the Style tab:
- Text: customize the UI in all the texts fields of the widget
- Buttons: not mandatory but need to fit your UI
- Container: all relative to the content/background of your widget
- Border
- Close Button
Style tab default values
By default, we apply a style to the widget so you can:
- see it
- see what can be done in terms of styling
- do nothing, if you don't have time and urgently need to add one
However, these default values are directly inspired by the AB Tasty style guide.
For many widgets, the font family is inherited from your website.
Style tab tips
Here are some tips to help you customize your widget using our style configurator:
You can directly paste the hexadecimal color code in the color picker (so you don’t have to open the pipette box). 3, 4, 6, or 8-digit HEX codes are accepted and interpreted (transformed in 6-digits + opacity value).
Once set (manually or by pasting a HEX code), you can save up to 14 colors in your color palette to easily reuse them.
- The Google Fonts API is integrated and offers 1,000+ fonts, each one with a short or long list of available weights, italicised or not.
-
By default, the widget inherits your website’s font. Here is how you can change it:
- You can add elements and classes in the text area of the Content tab if you want to have stylable elements with the editor. Finish the styling of the widget first, save it, and use the Edit Style feature of the Visual Editor on these elements afterward. You must first finish your widget configuration - otherwise, the text styling in the widget configuration form will override the changes made with the “Edit Style" feature.
Buttons
- If the button border thickness is set to 0, the border color picker is hidden as there is no need to define a color. Change the border thickness to a value greater than 0 to view the border color picker.
- Border thickness is limited to 50 px and button border radius is limited to 30 px. If you need a greater border thickness, you can use the Edit Style feature in the Visual Editor.
-
For pop-in widgets (Simple Pop-in, Image Pop-in, Video Pop-in) and the Countdown widget, you can define the position of the button within the container.
You have four options:- Left
- Center
- Right
- Full-width (100%)
Container
This section allows you to customize the global style of your widget, including background, margins, and paddings.
Background color
If you reduce the opacity of the background of the container to 0%, you will see the color of the underlay. If your underlay color is not fully opaque, then you will see the website underneath.
Background image
You can upload an image as a background for the widget. The image can be a png or a gif.
Then, depending on the image ratio and the widget ratio, you can use the background fit options to adapt it to your needs. As an example, let's use a 400 x 300 px widget (blue rectangle) and a 500 x 500 px image (Princess Leia).
Here is how the background will be managed if you use Cover, Contain Fill, or None.
- Cover keeps the ratio - takes the full width of the container.
- Contain keeps the ratio - takes the full height of the container.
- Fill breaks the ratio - adapts to both the width and height of the container.
- None keeps the ratio - does not adapt dimensions to the width or height of the container.
Background image position
If you’ve chosen Cover, Contain, or None, you will have the option to define where the image position "starts":
- Top
- Bottom
- Center
- Left
- Right
- Top left
- Top right
- Bottom left
- Bottom right
Here’s the example with the Contain fitting option:
Repeat background image
With Contain or None options, a new toggle option - "Repeat background image" - displays. By toggling it on, you will replicate the image all over the available background space. It can be useful if you want to use a pattern. Here is an example with the "pied-de-poule" pattern.
Drop shadow
This shows a drop shadow around the widget. You can define the "drop shadow color (and opacity)" and the "drop shadow blur radius (px)".
The shadow is oriented toward the bottom of the widget. It can be overridden with custom CSS.
-
Border
Simply change the parameters to use this option.
-
Underlay
This block is only available when the selected layout is "modal" or the widget is modal (pop-in).
-
-
Underlay options
In general, we advise you to use a dark color with at least 50% of opacity for the overlay. If you prefer to use the white or light color as an underlay, we strongly recommend using 80% or more transparency.
If needed, you can make the overlay "disappear" by selecting 0 opacity.
-
Underlay options
-
-
Overlay clickable to hide the widget
You can toggle this option on to hide the widget when your visitors click on the underlay. Beware: If you toggle it off and also hide the close button, your visitors will have no way to hide the modal/close the widget. They will remain "stuck" on the pop-in. We strongly recommend that you leave at least one of the two options.
-
Overlay clickable to hide the widget
Close button
You can enable or disable a close button in the top-right corner of the widget.
If enabled, you will have a list of styling options:
- Close button position (inside or outside the widget)
- Cross size
- Cross color
- Close button background color
- Close button border-radius
- Close button border thickness
- Close button border color (only if border is >= 1px)
If the close button is positioned outside the widget, make sure to test your close button in different contexts so that it contrasts enough with the underlay (or absence of it) or the background (the page itself).
On modal layouts, you can make the underlay clickable to close or hide the widget.
If you're not using a modal layout and if you hide the close button, the users will not be able to close or hide the widget, unless you use a click on the button or a click on the whole widget to close or hide the widget.
Other groups of styling
In other widgets such as NPS or Countdown, you will find other styling groups (like Preview, Digits, or Legend). Read each widget’s documentation to learn more.
Conditions tab
A lot of widgets have a common Conditions tab. These additional options condition the display of your widget regarding the visitors’ behavior and can manage recurrence.
⚠️Caution: These options do not affect the trigger of your campaign, meaning that a visitor can trigger the campaign (i.e. they are on a targeting page, they are part of the targeted segment, they respect all the triggering conditions in the targeting), so AB Tasty will collect their data for the report, but perhaps he won’t see your widget at all because of the conditions you’ve set in the trigger.
The triggering and recurrence features of the widgets are the only JavaScript code that is not executed in the editor. You will need to QA the widget properly to "see" the triggering and the recurrence being executed.
Widget Triggering
You can choose between several options to trigger the visibility of your widget:
- When the page is loaded: Displays the widget when the page is loaded, at "DOM Ready", meaning when the DOM (all the elements of a page) is ready (are loaded). It is the default trigger. In this case, the widget will never appear before the HTML of your page.
- As soon as possible: Displays the widget as soon as the AB Tasty tag can be executed. This option can be useful to display the widget even if the page is heavy to load, with infinite scroll, or lazy loading. In this case, the widget can appear before the HTML of your page.
- At exit intent: Displays the widget when the user moves their cursor toward the top of the page (as in, about to close the browser active tab or switch tab). In this case, the widget may never be triggered if the session ends because of inactivity.
- After x seconds of inactivity: Displays the widget when the user remains inactive on the website for a given amount of time (no scroll, no click, no movement). Contrary to the other triggers, the delay slider on this one defines the number of seconds of inactivity (the default for this trigger is 10 seconds). In this case, the widget may never be triggered during the session.
- At click on an element: Displays the widget when the user clicks on a defined HTML element of the page. It can be a button, an image, a <div>, the <body> element... In this case, the widget may never be triggered during the session.
-
When an element is visible: Displays the widget when a defined HTML element appears in the visitor’s viewport. This element can be present at page load in the "fold", or at the footer of the page. It can be used as a scroll percentage trigger. In this case, the widget may never be triggered during the session.
-
Custom trigger: Displays the widget according to the custom code you’ve configured using the resolve() function. If this function returns true, the widget is triggered. If the function returns false, the widget isn’t triggered. It can cover many use cases and specific needs. A specific behavior (right-click, double-click, rage-click, text selection, horizontal scroll) and everything that the browser can be aware of. In this case, the widget may never be triggered during the session.
Extra triggering options
- Delay (seconds): Displays the widget after a given time interval. Available only for the following triggers: "When the Page is Loaded", "As Soon as Possible", "At Exit Intent", "After X Seconds of Inactivity", and When an Element is Visible".
- Trigger only once per page: Choose to trigger the widget several times or only once per page. Available only for the following triggers: "At Click on an Element" or "Custom Trigger".
- Auto-hide after redirection: If the widget is a link or contains a link in a button, you may need to hide the widget once it has been clicked on. You can also add a delay to hide it.
Recurrence
When the widget has been triggered once, you can display it again based on several options available from a drop-down list.
-
The widget will be displayed:
This defines whether the widget will be displayed only once, every time, or every X days, weeks, or months. The X is a minimum.
If you define “5 days” and the visitor comes back 12 days later, the widget will be displayed again.
-
After closure, the widget will be displayed:
If the widget can be closed, then you will be able to set the recurrence after closure. This means that if a visitor closes the widget, they will see it (again) next time (every time), every X days, weeks, or months, or just this time (when they close, they won’t see it again). The X is a minimum. -
After clicking, the widget will be displayed:
If the widget contains a link or is a link, then you will be able to set the recurrence after clicking. This means that if a visitor clicks on the widget link, they will see it (again) next time (every time), every X days, weeks, or months, or just this time (when they click, they won’t see it again). The X is a minimum.
The recurrence options apply the first time the widget is displayed on the web page.
-
Every time: Enables the widget to display at every trigger
Caution: This option is not advised to use if your widget is a pop-in, as it will break the navigation. - Every session: Enables the widget to display each time a visitor starts a new session (sessions stop after 30 minutes of inactivity and start every day at 3:00 am in the time zone defined in your settings)
- Every X days: Enables the widget to display depending on the specified number of days. X is the minimum. For example, if the recurrence is set to "every 1 day", it means that the widget will be displayed to the visitor again 24 hours after the first time he saw it.
- Every X weeks: Enables the widget to display depending on the specified number of weeks. X is the minimum.
- Every X months: Enables the widget to display depending on the specified number of months. X is the minimum.
- Once (no recurrence): Enables the widget to display only once (the first time it is triggered)
General rules for widgets edition
Generic actions
As with every modification in the editor, you can:
- Undo or redo your last action(s) in widgets
- Hide widgets
- Duplicate widgets
- Rename widgets
- Delete widgets
- Edit widgets
All these options are available in the section “Active Changes” in the right-side panel:
For Tracking widgets, you will be able to duplicate them by opening the "Trackers" panel (not the "Active Changes" panel).
Even if it is possible, we do not recommend duplicating Tracking widgets. To avoid creating conflicts in your campaign report, we recommend adding a single widget in which all your scroll goals are defined. If you duplicate a Tracking widget containing several goals, all its goals will be duplicated.
⚠️Important: We display a disclaimer if you add a widget that’s already added to your variation:
Note that this does not forbid you from adding more than one widget of the same type.
Customization restrictions
This is the list of restrictions for your widget configuration.
-
Inputs: Text (such as titles or URLs) is limited to 255 characters.
-
"Link URL" inputs: By default, these inputs are filled in with the domain of the URL you gave at the Main Information step in the campaign creation flow.
-
Text areas: Long text (such as descriptions) are limited to 10,000 characters. You can type HTML code in a text area. To add bolded or italicised text use the following:
This is regular text. <strong>This text is bold.</strong>
This is regular text. <em>This text is italicized.</em>
or any other HTML element.
You can also add emojis in this field.
-
Image uploads: Image formats supported: jpg, png, gif, svg, webp, and avif. Max image weight: 2 MB.
-
Color pickers: Colors can be defined in hexadecimal on 3, 4, 6, or 8 characters (excluding the "#" character).
-
Pipette box "user colors": You can save up to 14 colors in this section. They are saved in local storage, are personal to you, and are not shared with other users, even from your own account.
- Multilingual management: Currently, widgets don't support multilingual content. If you want to adapt your widgets to more than one language, you will have to create (or duplicate) as many campaigns as necessary.
Widgets versions
Generalities
Our widgets are versioned: Our latest improvements are always published in the new version of the widget.
When you create a new campaign from scratch and add a widget, the latest version will be automatically added.
If you duplicate an existing and older campaign, you won’t duplicate it with the latest version, as you’ll import the widget version, too. It is recommended that you use the latest version of each widget to be sure to benefit from the latest improvements and compatibilities.
If your widget’s version is not the latest one, you will see an alert in the widget form header with this message: "This version is not the latest. We recommend you use the latest version from the widget library."
How to read a version
Ex: "Version 2.5.8"
- 2 is the number of the major version
- 5 is the version of the minor version
- 8 is the number of the patched version
Between two major versions, the widget has been completely rewritten.
Between two minor versions, the widget has received important bug fixes, the layout has changed, new components have been added, and/or some components have been removed.
Between two patched versions, the widget has been quick-fixed or a translation may have changed.
When a patched version is released, all widgets of the same minor version number are automatically replaced by the patched version, regardless of whether the campaign is running.
To check that you are using the latest version of the widget, go to the widget library and add a widget. If there is already a widget in your campaign, go to the widget library and add the same widget. If the two widgets have the same version number, you are using the latest version. If the one you've just added has a higher number, the widget previously in place is obsolete, and you should use the latest version.
Widget presets
For more information about preset widgets and how to create and use them, please refer to the following article.
Troubleshooting area
In case you need support, follow the instructions given in the articles below: