Widgets Set-up Guide

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 this guide, you’ll find useful information for using the widget library, customizing each widget, and how each widget works.

 

1. Different types of widgets

Our widget library shows you all the wigdets you can use to configure your campaigns:

2023-06-06_15h32_07.png

You’ll find the following categories including the following widgets:

Dynamic Content widgets:

Use case: Collect your visitors scoring, email address and feedbacks by displaying a "Net Promoter Score" satisfaction survey.

Use case: Displays the number of views or purchases for a product or a page over a defined period of time.

 

Promotional Content widgets:

Use case: Make your visitors aware of an offer or an important message by displaying a banner with text and a button.

Use case: Display a countdown or text and include a button. Urge your visitor to make a decision by offering a simple task to complete.

Use case: Gather satisfaction index from the visitors of your website.

Use case: Display a sliding popin opened by a fixed action button.

Use case: Embed an iframe on your website. It can include a form, a map, a survey, an agenda, a spreadsheet, a gif, a flipbook, a 3D model, another web page, etc.

Use case: Capture your visitor's attention with a modal containing an image, text, and a button.

Use case: Show your visitors how close they are to the goal you want them to reach. It can be a cart amount, a scroll rate, a remaining duration, or any other countable variable.

Use case: Display a card that your visitors can scratch to discover a special offer.

Use case: Capture your visitor's attention with a modal containing text, a button, and a background image.

Offer your visitors a new way of browsing by highlighting the products you want!

Usage: Help your visitors understand the action behind a button or the meaning of a feature by displaying a tooltip.

Use case: Capture your visitor's attention with a modal containing a video, text, and a button.

 

Special widgets: 

Display a before and after image to present or compare products.

Attach an icon of your choice to some elements of your page to celebrate or promote your content.

A/B test your copy and keep the best-performing wording by automatically replacing one string with another.

Capture your visitor's attention with an animated effect on the page. Use the snowflake or upload your own image.

Invite your visitors to easily share your pages on social media by displaying a customizable list of sharing buttons.

Stick an element at the top or the bottom of the page or element to make it clickable at any moment.

Keep your visitors from clicking on a specific element by automatically clicking on it. Useful to pre-filter result pages, hide some modals or banners, or redirect.

 

Tracking widgets: 

Note that some widgets offer new trackers for monitoring your visitors' behavior:

Track the time your visitors spend on a page by creating a duration goal.

Track your visitor’s scroll progression on a page based on elements made visible on the visitor's screen (viewport).

Track clicks in an iframe. Track clicks on Facebook like buttons, Google Adsense ads, YouTube videos, or any other iframe. Clicks must not be consecutive in order to be counted. This means that in order to count a second click, the user must click elsewhere before clicking on the iframe. This preserves reporting results to be distorted with repetitive clicks and spam.

Track if your visitors have reached a pre-defined scroll percentage on a page.

 

2. How to add a widget to a campaign

In each type of campaign editor (all types of Tests and Personalizations), you can open the widget library by clicking on “Add Widgets”, located in the right sidebar:

 

30.gif

 The widget configurator opens in a panel in the Editor.

 

 

3. Widget configurator

 

All types of widgets are customizable. 

Depending on the widget you've chosen, the configurator will be different. 

If you need additional information about the setup of a specific widget, please refer to the specific widget article here.

 

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.

 

Most frequent layouts

The four most frequent widget layouts are:

  • Modal

3.png

 

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

4.png 

 

5.png  

 

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

6.png
  

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 or Promotional Banner. 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.

 

Let's recap all four layouts with the Countdown widget in a simple gif:

 

7.gif

 

Other layouts

 

In other widgets, such as Image Pop-in or Video Pop-in, you’ll find additional layout options:

8.png

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 their documentation: Image Pop-in and Video Pop-in.

Some widgets, such as Social Sharing Buttons or Christmas Hat, do not have a Layout tab.

 

Free Placement details

 

Some widgets (like NPS, Social Proof, and Promotional Banner) 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.

  1. Click Select Element.
  2. On the page, select the element you want to position the widget in relation to.
  3. 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.

 

9.gif

 

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:

 

10.png

 

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

11.png

 

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).

12.gif

  • Once set (manually or by pasting a HEX code), you can save up to 14 colors in your color palette to easily reuse them.

13.gif

 

  • We have integrated the Google Fonts API and offer 1,000+ fonts, each one with a short or long list of available weights, italicized or not.

  • By default, the widget inherits your website’s font. Here is how you can change it:

14.gif

  • 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

15.png

  • 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%)

16.png

 

Container

 

This section allows you to customize the global style of your widget, including background, margins, and paddings.

 

17.png

 

Margin (px) and Padding (px)

Configure the external and internal margins (in pixels):

18.gif

 

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).

19.jpg

Here is how the background will be managed if you use Cover, Contain Fill, or None.

20.jpg

  • 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:

 

21.jpg

 

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 famous "pied-de-poule" pattern.

 

22.gif

 

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.


23.png

  • Underlay

    This block is only available when the selected layout is "modal" or the widget is modal (pop-in).

24.png

 

    • 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.

 

Close button

25.png

 

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.

26.png

  • 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.

27.png

 

 Extra triggering options

28.png

  • 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

29.png

 

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.
  • 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)

 



4. 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:

 

2.gif

 

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:

 

30.1.png

 

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.

31.gif

  • "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.

32.png

  • 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 italicized 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.

33.png

 

  • Image uploads: Image formats supported: jpg, png, gif, svg, webp, and avif. Max image weight: 2 MB.

34.gif

  • Color pickers: Colors can be defined in hexadecimal on 3, 4, 6, or 8 characters (excluding the "#" character).

35.gif

  • 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.

13.gif

  • 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."

 

37.png

 

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.

 

Troubleshooting area

In case you need support, follow the instructions given in the articles below:

Was this article helpful?

/