Widgets configuration in the visual editor
Last updated
Was this helpful?
Last updated
Was this helpful?
Widgets are pre-built pieces of code you can directly use in the Editor to create your test variation(s) or personalized message(s).
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.
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.
Under the Layout tab, for some widgets, you will find different options for the widget, including:
its shape
its position on the page
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
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.
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:
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.
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:
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
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.
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.
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%)
This section allows you to customize the global style of your widget, including background, margins, and paddings.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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)
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.
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.
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."
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.
In case you need support, follow the instructions given in the articles below:
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:
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 or. It is the default layout for the .
In other widgets, such as Image or , 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 .
Some widgets, such as or , do not have a Layout tab.
Some widgets (like , , and ) have the Free Placement layout. This option lets you position the widget almost anywhere on the page.
In other widgets such as NPS or Countdown, you will find other styling groups (like Preview, Digits, or Legend). Read each to learn more.
For more information about preset widgets and how to create and use them, please refer to the following .
💡
