📣 Promotional content widgets

Progress Bar

Introduction and use cases

The Progress Bar widget enables you to let your visitors know how close they are to completing a task or to reaching a goal. It can be used in many ways:

On cart pages, a progress bar showing the amount needed to earn a gift, coupon, free shipping, etc.

Word or character counter for a min. or max. expected number of characters (testimonials, feedback, etc.)

Polls and surveys

Scroll progression on long scroll pages
Progression in the completion of a form
Funnel progression
Display stats more visually
Session duration (in "reverse mode", for example 30 mins. to finalize a booking or a ticket purchase)

All you need is:

A target quantity: the goal (it can be an integer (123) or a decimal (123.45) but cannot be 0 or a negative value) that requires typing/setting manually.
A variable: the current status of your goal (which is going to make the progress bar advance).

There are two ways to fetch the variable:

Select an element on the page which contains the value (preferably in its own <span>, <p>, <div>, etc., and the widget will parse and retrieve its value).
Write your JavaScript code (the sky is the limit! Collect a dataLayer variable, use browser listeners, set a timer, etc.).

Layout tab

The progress bar is only available for the "free placement" layout. It is not available for the modal, banner, or panel layouts.

We offer three different sub-layouts:

progress bar & text-integrated variable
progress bar, label & variable
progress bar

Content tab

Depending on the sub-layout you choose in the layout tab, the content tab differs:

Customizable content regarding the chosen layout :

If you select: "progress bar & text-integrated variable"

If you select: "progress bar, label & variable"

If you select: "progress bar only"

Closable alert

One value per element

In order to properly parse the variable, the widget needs to use a single variable. This means that if you select a paragraph that contains two values, for instance, it will not work properly.

This is why you need to be careful when you select the element containing your variable: make sure it only contains one.

All value formats are welcome

You don't have to worry about the format of the value, or about having a colon or a comma as a decimal marker: if you use a very large number (i.e. 142,536,712.34), the widget will understand which is a separator and which is the decimal marker. If your element includes a currency or a special symbol or character, AB Tasty will recognize it.

AB Tasty covers almost all the international ways of writing prices, percentages, and numbers in general.

Variable

This is the most important part of setting up your Progress Bar widget.

By default, we have decided to set the variable value to 66.

There are two ways of fetching the variable:

Select the element that contains the variable

Select the element on the page you want the variable to be applied to.

The element containing the variable must not contain several values (see above).

Return variable through custom JavaScript

To use the custom JS option properly, you must call a function called “update” and pass the new value as a parameter to update the widget.

By default, we provide an example of JavaScript code:


var counter = 0;

setInterval(function () {

if (counter > 90) {

counter = 0;

} else {

counter += 10;

}

update(counter);

}, 1000);

This JavaScript code fakes a progress bar that progresses by 10 every 1,000 ms. As the default target quantity is 100, it gives you a quick idea of how the progress bar will react to progress variations.

You can replace it with your own.

Here is another JavaScript code example for retrieving the scroll progression of the visitor on the page:

window.onscroll = function() {myFunction()};

function myFunction() {

var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var scrolled = (winScroll / height) * 100;

update(scrolled);

}

Run the update() function whenever you need to update the progress bar.

Target quantity

By default, the target quantity is set to 100.

The minimum value is 1 and the maximum is 999,999,999,999.

You can use an integer or a decimal value with a period as a separator, but you cannot use 0 or a negative value.

Display variable as

You can choose whether you want to display the variable as a value or as a percentage.

If you pick a value, it will be the exact value of the variable as your web app or the visitor defined it.

If you pick a percentage, it will be calculated based on the target quantity.
For example, if the target quantity is 1,765 and the variable is 419, it will display "23.74%". The widget rounds to the closest 100th.

Display variable in relation to target quantity

You can choose whether you want to display the variable as the accumulated value (the variable value) or as the remaining value (subtraction of the target quantity value minus the variable value).

For example, select "remaining" if you are using the Progress Bar widget on a cart page and "accumulated" if you are using it for a character counter or a session duration.

For example:

with "remaining", if the target quantity is 1,765 and the variable is 419, it will display "76.26%".
with "accumulated", if the target quantity is 1,765 and the variable is 419, it will display "23.74%".

The widget rounds to the closest 100th.

Create your own content with dynamic tags

Only for "Progress bar & text-integrated variable" sub-layout

Rephrase the default sentence as desired.

You can add extra HTML markup and add some CSS in order to add bold or color to a specific section of text.

As an example, this is the CSS code needed to style the two pieces inside the customized sentence.

.varSubTot {
  color: #66BB66 !important;
  fill: #66BB66 !important;
  -webkit-text-fill-color: #66BB66 !important;
  font-weight: bold;
}

.freeShipping {
  font-weight: bold;
}

The variable must be enclosed in exclamation marks like so: !variable!

If you want to display the variable as a percentage, the variable must be followed by a “%”. If you use it as a value, you should not forget to specify the unit, and currency (before or after the variable, depending on your locale).

Progress Bar label

Only for "Progress bar, label & variable" sub-layout

You can enter the legend of your progress bar. By default, the label is in bold.

The variable cannot be edited inside the widget form. You can add a symbol next to it in the editor.

For example, inside the:

<dd class="abtasty_progress_value"></dd>

element of the variable, you can add a little <span> element containing the unit:

<span>US$</span>

Ended message

If you activate this option, you’ll be able to customize the message once the goal is reached: quantity, order amount, etc.

While the toggle is activated, you can fill in a static message such as “Congrats, shipping is now free!” or use dynamic tags to make it more dynamic (e.g.: “Congrats, your order comes to $234, the $9.99 shipping fee is on us!”).

Style tab

In the style tab, you will be able to define the size, color, borders, background, etc. of each element of the widget. Uncollapse each group and adapt the widget to your website color palette and style.

By default, the widget inherits its style from the font face to your website. However, you can override it with the 1,000 Google Fonts available.

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.

There are progress bar widget styling specifics:

Progress bar color

You can pick a color from your existing palette. Most of the time, we recommend using a variation of your main call-to-action color.

Progress bar background color

You can pick a color for the background of your progress bar (progress tracking). We recommend using a different color than the background color of the element it is contained in (to create a strong enough contrast). If you pick white on a white background, for instance, it won’t be visible.

Colorblind accessibility mode (Stripes)

The option is toggled by default. This enables you to make the progress bar slightly more accessible. Especially if your progress bar color and progress bar background color is close (not contrasted enough).

Stripes color

You can make the stripes any color you want. To guarantee accessibility and elegance, we recommend using white and lowering the opacity (however no lower than 60%) to make the progress bar color appear.

Progress bar height

You can give more or less height to the progress bar.
The default height is 8px and the maximum height is 50 px.

Progress bar radius

You can give more or less rounded corners to your progress bar. The default radius is 4px and the maximum radius is 30 px.

Conditions tab

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

Banner

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.

23.1.png

Layout tab

Layout

We offer three different layouts:

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

Layouts are natively responsive.

Layer

Layer Position (z-index)

Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget position: above everything, below everything, or precisely fine-tuned.

Please read the dedicated article on this topic: z-index article.

Content tab

Message (text or HTML)

As the "Banner" widget is mainly designed to contain text, you have to fill the text area in.

The text area 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

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

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

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

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

Countdown

29.1.png 29.2.png

The Countdown widget lets you display a countdown clock to create expectation, urgency, or near-scarcity.

This widget is useful for yearly recurring events such as Christmas, Thanksgiving, Halloween, Fashion Week, Black Friday, Valentine's Day, etc., as well as for your own events: product release, new feature, new collection, anniversary, special offer, live event, webinar, etc. and many other use cases.

Layout tab

We have four different layouts:

modal (pop-in)
top banner
bottom banner
free placement (which allows you to place the widget wherever you want in the page flow)

You can add an image in the modal layout only.

Dimensions

Widget dimensions based on content
By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about pop-in dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).

If you untoggle the toggler, you will be able to define both the width and the height of the pop-in. These can be configured (independently) in several dimensional units:

px (pixels)
% (percentage)
em (element, which means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)

Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. If you're digging the dimensional units in CSS, we recommend reading this W3C article.

Preserve ratio (automatic height)

By default, the height toggler of the modal is toggled and set to "preserve ratio (automatic height)". This way, you don't have to set a height, it takes what the modal needs and can even reach 100% of the available height in the viewport.

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll down to read everything.

Known issue: the widget configuration form not overlapping the website

In the past, we've chosen to make the widget configuration form not overlap the website, especially for positioning a widget in a corner or on the left side. Therefore, the overall website width is "squeezed" in the editor. Now, once you've finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.
We understand that defining the pop-in size without seeing the full-page rendering is tricky. When you dimension your pop-in, it will adapt to all window widths by showing/hiding the widget form or leaving the "Widget dimensions based on content" toggle toggled.

Layer

Layer Position (z-index)

Suppose you've selected "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget position: above everything, below everything, or precisely fine-tuned.

See this section to learn more about the z-index.

Content tab

38.1.png

Content will end on

As this widget is a countdown, the first thing you will be asked to do is define an end date and time. You cannot use a past date/time.

By default, in order to show you a running countdown clock, we define the default end date/time based on the moment you create the countdown, incremented by 1 day, 1 hour and 2 minutes. So you should see 01 days, 01 hours, 01 minutes, 59 seconds, 58, 57, etc., counting down.

Timezone settings

For precision in date and in time management, you have to consider time zones and daylight saving times. In the "Time Zone Settings'' collapsible group, there are two main options to manage time zones with your countdown widget:

"Follow the sun" option

This option is useful and should be toggled ON in the following situation:

Your ecommerce website is based in France but your clients buy from all over the world. You want to end your countdown at midnight exactly for every time zone because this is the exact moment the Black Friday sale will officially start.

So in this case, the countdown will end at 12am in Tokyo, 12am in Mumbai, 12am in Paris, 12am in Rio de Janeiro, all on the same day. It will take 24 hours to end all over the globe.

As a website visitor, depending on where you see the countdown widget from (depending on your time zone), you will not see the same remaining time.

This option is not useful and should remain OFF in the following situations:

Beginning of a big international event: Apple keynote, Olympic Games Opening Ceremony, elections results, etc.

For example, if you decide to end the countdown at 2pm in Paris, it will end at 2pm in Paris and at this exact moment in the whole world, whatever the local time is – so 8pm in Singapore, 8am in New York, 5am in San Francisco, etc.

As the user who sets up the countdown widget, you must define a time zone in the "Time zone to base end time on" dropdown. You can override (for the purpose/scope of this widget only) the time zone defined in your account settings.

Daylight Saving Time (DST)

If one of your visitors lives in a place where winter/summer daylight saving time is applied, you won't have to worry about this 1-hour delta if you schedule your countdown widget six months ahead.

Known issue for DST:

For spring or fall time switches in countries that do apply Daylight Saving Time (DST), there are two moments each year (dates vary depending on the country) when, in spring you go from 2am to 3am and in fall from 2am to 1am (or from 3am to 2am, depending on your location). These two hours don't really "exist". We cannot guarantee that this widget will work if you schedule its end at that precise moment.

Display an image

This feature is only available if you use the modal or the banners (top and bottom) layouts.

You can either drag and drop your image or click to browse your files and upload the image.

AB Tasty supports the following formats: jpg, png, gif, svg, webp & avif and the maximum width is 2MB.

Message

The message is mandatory, you have to fill the text area in.

The text area supports multi-line messages, and you can add HTML markup if needed. We recommend setting all the styling aspects through the Style tab.

Select widget link type

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.

If you pick:

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

Second CTA/link option

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.

Customize legend

By default, the legend of the countdown is days, hours, minutes, and seconds for each 2-digit block, respectively. But you can customize it to adapt it to a specific language. Example with “Klingon”:

Important: the width of all the 2-digit blocks adapts to the largest block. In the example below, the seconds block stretches to accommodate the text.

When the countdown ends

You have five different options:

Hide the whole widget: once the countdown has ended, the whole widget is removed. Nothing is shown any longer.

Hide the countdown and display a text: once the countdown has ended, the widget remains displayed but contains only text. You can define the text you want.

Display the countdown (00:00) and a text: once the countdown has ended, the widget remains and contains the ended countdown and text. You can define the text you want to show.

Hide the countdown, display a text and a button: once the countdown has ended, the widget remains displayed but there is only a text and a button in it. You can define the text, the button text and the URL you want.

Display the countdown (00:00), a text and a button: once the countdown has ended, the widget remains and contains the ended countdown, a text and a button. You can define the text, the button text and the URL you want.

Preview

If, in the content tab, in the "Once the countdown has ended" section, you've opted for any other option than "hide the widget", you will be able to preview the page as if the countdown has ended, to check the visual rendering.

By default, the selected option is "During the countdown" but you can select "Once the countdown has ended" in order to preview it.

Important

For the widgets with the modal layout and which include an image, it is no longer displayed once the countdown has ended.
If you add a button after the countdown has ended, we strongly advise you to offer an alternative for the visitors who just missed the opportunity. This can be a coupon code, a subscription to a newsletter to receive notifications, or a link to the event itself (live, webinar, etc.). Avoid "back to home page" links at all costs.

Style tab

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

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

Simple pop-in

The Simple Pop-in widget lets you display a pop-in containing a text.
This widget can be useful if you want to catch your visitor’s attention on a specific piece of information, momentum or important message. It can be used for many different use cases. Maintenance operations, crisis communication, or even for seasonal greetings.

Layout tab

Dimensions

Widget dimensions based on content option

By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about modals dimensions. If you upload a very large image as a background, your pop-in will adapt accordingly based on the text dimensions. Long text = Long pop-in.

If you untoggle the toggler, you will be able to define both the width and the height of the pop-in. These can be configured (independently) in several dimensional units:

px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)

If you're digging the dimensional units in CSS, we recommend reading this W3C article, which is a good starting point.

Preserve ratio (automatic height)

By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set any height, it takes what the modal needs and can even reach 100% of the available height in the viewport.

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.

Known issue: the widget configuration form not overlapping the website

In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore the global website width is "squeezed" in the editor. Now, once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.
We understand that defining the pop-in size without seeing the full rendering of the page is tricky. When you dimension your pop-in it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.

Layer

Layer Position (z-index)

53.1.png

Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget’s position: above everything, below everything, or precisely fine-tuned.

Please read the dedicated section on the z-index for more information.

Content tab

Title

You will be able to decide whether to display a title.

The maximum length is 255 characters.

Message

As the "Simple pop-in" widget is mainly designed to contain text, you have to fill the text area in.

The text area supports multi-lines messages. You can use HTML markup to add ordered or unordered lists. All the other styling aspects should be done through the "Style" tab.

Select widget link type

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.

If you pick:

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

Second CTA/link option

54.1.png

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.

Style tab

Select the style options (Text, Buttons, Container, Border, Close Button) you want to apply to your widget and customize the pop-in.

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.

Simple Pop-in widget Styling Specificities:

Align text & button

In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.

Conditions tab

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

Image pop-in

The Image Pop-in widget lets you display a pop-in containing an image.

This widget can be useful if you want to catch your visitor’s attention on a specific offer, give more details on a specific option, item, or accessory by clicking on a button/link on a product page, or before leaving a page/website in order to retain your visitor. It can also be used for special events.

Layout tab

Layout

We have five different layouts: four with text (image on the right, image on the left, image below, image above) and one without text (image only). By default, the "image only" layout contains a button, but you can remove it.

Image over text ratio

For the "image on the left" and "image on the right", you can choose the image over text ratio. By sliding the cursor on the axis, you can configure the image to take up 20% to 80% of the available width.

Dimensions

Widget dimensions based on content

By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about the modal’s dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).

Other options:

If you untoggle the toggler, you will be able to define both the width and the height of the pop-in.

These can be configured (independently) in several dimensional units:

px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text in the element: if your font size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)

Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another.

If you're digging the dimensional units in CSS, we strongly recommend reading this W3C article.

Preserve ratio (automatic height)

By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set a height, it takes what the modal needs and can even reach 100% of the available height in the viewport.

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll down to read everything.

Known issue: the widget configuration form not overlapping the website

Once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is resized to the available viewport/window's width.

Layer

Layer Position (z-index)

For more information, please read the dedicated article on z-index.

Content tab

Upload an image

As this widget is an image pop-in, the first thing you will be asked to do is upload an image or paste the image path.

Title

For the first four layouts (image on the right, image on the left, image below, image above), you can choose whether to display a title. Maximum length is 255 characters.

Message (text or HTML)

For the first four layouts (image on the right, image on the left, image below, image above), the message is mandatory. You must fill in the text area.

If you don't want to display a text, there are two options: use the "image only" layout or type a message in the text area, save the widget, and hide the element in the editor.

The text area supports multi-line messages. You can use HTML markup to add ordered or unordered lists. All the other styling aspects should be configured through the "Style" tab.

You can add also emojis. Click here to learn how.

Select widget link type

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.

Second CTA/link option

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.

Style tab

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.

Image Pop-in widget Styling Specificities

Align text & button

In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.

Image Rounded Corners

If you apply a large border radius to the pop-in, it will impact the image and will round the two corners affected by the setting.

If you want to round the two remaining "square" corners of the image, you will have to do so in the editor (select Element, Edit Style, Border tab, and enter the same border radius value).

Round Pop-in

To display a round pop-in, use one of two options:

1) Set your widget up, save it, open variation menus in the editor, click on "Add CSS" and add:

.ab_widget_container_popin-image_content {border-radius: 50% !important;}

2) Select the "image only" layout, upload a "round image" with transparent background, and use a transparent background color in the "Container" group in the "Style" tab.

Conditions tab

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

Video Pop-in

The Video Pop-in widget lets you display a pop-in containing a video.

This video can be hosted on: YouTube, Vimeo, Dailymotion, Facebook or TikTok.

It can also be an .mp4 file (works with .ogg and .webm too) hosted on your server.

This widget can be used if you want to catch your visitor’s attention concerning specific content, if you want to display videos in a dynamic way or if you want to display a full-screen interstitial.

Layout tab

Select a layout

There are five different layouts: four with text (video on the right, video on the left, video below, video above) and one without text (video only). By default, the "video only" layout contains a button, but you can remove it.

Video over text ratio

For the "video on the left" and "video on the right" layouts, you can decide on the video over text ratio. By sliding the cursor along the axis, you can configure the video to take up 20% to 80% of the available width inside the widget container.

Dimensions

Widget dimensions based on content

By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about modal dimensions. Your pop-in will adapt accordingly based on the video (and text) dimensions.

If you untoggle this toggler, you will be able to define both the width and height of the pop-in. These can be configured (independently) in several dimensional units:

px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)

If you're digging the dimensional units in CSS, we strongly recommend reading this W3C article.

Preserve ratio (automatic height)

If you don't want to manage the height of the pop-in, you can keep this toggler toggled by default and the height of the pop-in will adapt according to the video dimensions and the video over text ratio.

Known issue: the widget configuration form not overlapping the website

In the past, we've chosen to make the widget configuration form not overlap the website for cases where a widget is to be positioned in a corner or on the left side. Once you've finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.

Layer

Layer Position (z-index)

Please read the dedicated article on the matter: z-index.

Content tab

Video URL

As this widget is a video pop-in, the first thing you will be asked to do is paste the video URL.

The widget supports video URLs from:

YouTube
Vimeo
Dailymotion
Facebook
TikTok
And any MP4 file path

and will adapt its player but will also display advanced parameters for each case (except for Facebook and TikTok - no advanced parameters).

YouTube

The advanced parameters will be:

Autoplay (toggled by default)
Mute (toggled by default)
Loop (toggled by default)
Start x seconds from the beginning (default is 0 sec.)
End x seconds before the end (default is 0 sec.)
Display controls (untoggled by default) - If controls are displayed, you will have two options available for the player color: YouTube red (default) or white.
Authorize full screen (untoggled by default)
Enable keyboard shortcuts (untoggled by default)
Display subtitles (untoggled by default) - We cannot detect if the video contains subtitles. Toggling it on for a video without subtitles will have no impact.

Vimeo

The advanced parameters will be:

Autoplay (toggled by default)
Mute (toggled by default)
Loop (toggled by default)
Start x seconds from the beginning (default is 0 sec.)
Player color (#57B8C7 is set by default)

Dailymotion

The advanced parameters will be:

Autoplay (toggled by default)
Mute (toggled by default)
Show Dailymotion Logo (untoggled by default)
Player color (#57B8C7 is set by default) - You can override the default Dailymotion player color only if the administrators of the Dailymotion channel haven’t defined it. In this case, you cannot override it. We cannot detect whether the player color is already set so we will always display the color picker, but a color change will have no impact.

MP4 file

If your videos are hosted on your server and you don't want them to be hosted on broadcasting platforms, you may be interested in providing the direct URL to the file. In this case, the widget will display a default HTML5 video player (renderings may differ from one browser to another). The widget also supports .OGG and .WEBM files.

The advanced parameters will be:

Autoplay (toggled by default)
Mute (toggled by default)
Loop (toggled by default)
Display controls (untoggled by default)

Title

For the first four layouts (video on the right, video on the left, video below, video above), you will be able to decide whether to display a title. Maximum length is 255 characters.

Message

For the first four layouts (video on the right, video on the left, video below, video above), the message is mandatory. The text area must be filled in.

If you don't want to display a text, there are two options: use the "video only" layout or type a message in the text area, save the widget, and hide the element in editor.

The text area supports multi-line messages. You can use HTML markup to add ordered or unordered lists, then create selectors such as <span>text</span> for specific styling. All the other styling aspects should be carried out through the "Style" tab section.

Select widget link type

You can now decide whether your widget will contain a clickable button (to close or redirect) or no link at all.

If you pick:

"The button is a link": you will need 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 need to specify a button text. The widget will display a button.
"None": the widget will not be clickable.

Unlike the Simple Pop-in and Image Pop-in widgets, the Video Pop-in widget includes a video but cannot be entirely clickable.

Second CTA/link option

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.

Style tab

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.

Video Pop-in widget Styling Specificities

Align text & button

In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.

Rounded Corners

If you use very rounded corners (and very little padding), it will "crop" the video's corners.

Conditions tab

Select the Triggering and Recurrence options you want to apply to the Video Pop-in widget.

iframe

The iframe widget lets you embed any embeddable iframe.

An iframe is an HTML element that lets you display content from another web page (the same site or another site). It is similar to a link, but you don’t have to leave the page you are browsing to view the content. It creates a "frame" that encapsulates the remote page.

For example, YouTube videos are displayed in an iframe when you embed them into your website. It is pretty much the same thing for any web app which lets you embed part or all the content of a page. Generally speaking, except in cases where websites forbid it, any web page can be embedded into an iframe.

Here is a short list of what can be embedded: Videos (YouTube, Vimeo, TikTok, etc.), Images (Giphy, Facebook, 500px, etc.), Forms (Google Form, Typeform, SurveyMonkey, etc.), Maps (Google Maps, Mapbox, OpenStreetMap, etc.), Calendar/Agendas (Google Calendar, Calendly, etc.), Articles (Wikipedia, Imdb, etc.), Sound (Soundcloud, Bandcamp, etc.) and so forth.

Layout tab

Layout

There are two different layouts:

modal (pop-in)
free placement (which allows you to place the widget wherever you want in the page flow)

If the "free placement" layout is selected, you won't see the two following blocks (Dimensions & Layer).

Dimensions

Widget dimensions based on content

By default, the "Widget dimensions based on content" toggler is toggled. It saves you from having to worry about modal dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).

If you untoggle the toggler, you will be able to define both the width and the height of the pop-in. Last but not least, they can be configured (independently) in several dimensional units:

px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)

Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another.

If you're digging the dimensional units in CSS, we strongly recommend reading this W3C article.

Preserve ratio (automatic height)

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll down to read everything.

Known issue: the widget configuration form not overlapping the website

Once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.

Layer

Layer Position (z-index)

Please read the dedicated article on the matter: z-index article.

Content tab

As you can see, there is not much in the Content tab for this widget. The only required input is the URL of any embeddable web page.

For example, in Chrome, If you see this in the widget rendering:

It means that the web page you are trying to embed is blocking its native embeddability. Any other web page should work.

Some web apps provide copy-and-paste-ready HTML snippets. Most of the time, you will need to delete the extra HTML and just keep the value of the src="" attribute; which is the iframe URL in short.

Here is an example with the Google Form provided embed code:

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdiYVa8YaIRq69na0g-s8GJQBBDKK3T7luWb4xYH5B2yYEytw/viewform?embedded=true" width="640" height="601" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

What you need to paste in the input:

https://docs.google.com/forms/d/e/1FAIpQLSdiYVa8YaIRq69na0g-s8GJQBBDKK3T7luWb4xYH5B2yYEytw/viewform?embedded=true

Here is another example for Sketchab 3D models. The embeddable code is as follows:

<div class="sketchfab-embed-wrapper">

<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/ec283d217efe4ef39f0e19ae3b3396a1/embed?autostart=1&amp;preload=1&amp;ui_controls=1&amp;ui_infos=1&amp;ui_inspector=1&amp;ui_stop=1&amp;ui_watermark=1&amp;ui_watermark_link=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">

<a href="https://sketchfab.com/3d-models/lego-geralt-of-rivia-ec283d217efe4ef39f0e19ae3b3396a1?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Lego Geralt of Rivia</a>

by <a href="https://sketchfab.com/sir_luizo?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">sir_luizo</a>

on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>

</p>

</div>

What you need to paste in the input:

https://sketchfab.com/models/ec283d217efe4ef39f0e19ae3b3396a1/embed?autostart=1&amp;preload=1&amp;ui_controls=1&amp;ui_infos=1&amp;ui_inspector=1&amp;ui_stop=1&amp;ui_watermark=1&amp;ui_watermark_link=1

This is an example of a YouTube video (although we recommend using the Video Pop-in widget instead).

<iframe width="560" height="315" src="https://www.youtube.com/embed/C71YkqN0pEA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Here is what you need to paste:

https://www.youtube.com/embed/C71YkqN0pEA

Style tab

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

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

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

Tooltip

The Tooltip widget lets you display a tooltip on one or more elements.

Tooltips are useful in many different situations: as soon as you notice friction points, you can start improving by adding a simple tooltip. Very often, this will quickly relieve users of a painful experience or upgrade a confusing interface.

Layout tab

Select the element which you want to trigger and display a tooltip on.
Select the position which the tooltip is displayed on: left side, right side, top, bottom. Default is top.
Select the most suitable layout depending on the design of your web app or the amount of text you need to provide in your tooltip: "Simple" or "Rich".

Content tab

Type a Title in the "Title" text area.
If you've selected the "Title & Text" layout in the layout tab, add a text in the "Text" text area.

Style tab

The Text color will be applied to both Title and Copy. We recommend picking a light color.
The Background color is black by default. We recommend picking the most contrasted background based on your text color. If most of your website has a light background, use a dark color for your tooltip backgrounds. A tooltip must be clear and very readable.
Border color, thickness, and radius settings will help you adapt the tooltip to your website style and make it seamless.
Drop shadow and drop shadow blur radius: you can decide to add a drop shadow and adjust its opacity.

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

You can choose whether you want to display your tooltip when clicking or hovering (hover does not work on touch devices).

You can choose to display the tooltip by default at page load. We do not recommend using several tooltips, as this can quickly become overwhelming and stressful for your visitors.

You can choose whether the tooltip will be displayed only once per page or every single time the trigger is triggered.

You can use the Tooltip widget as a pseudo-onboarder and add several in one page. In this case, we recommend triggering each one only once per page. This way, once the visitor has finished clicking in the different "new" areas, they can start really using the website without making the tooltips pop again.
If you use tooltips as legends for images, links, etc., we recommend not limiting the trigger to once per page.

Scratch card

The Scratch Card widget enables you to display a pop-in containing an image (that may include some text) that the user can scratch using their mouse (or trackpad) to discover a special offer.

This feature can be leveraged to:

Reward customer loyalty with a discount or free delivery
Unveil coupons to your visitors
Add interactive & fun widgets to delight your customers
Unveil a new line of products
Create contests to drive revisits to the website

Configuring the widget

During this configuration step, layout, content, and style changes are displayed in real-time.

To apply your changes:

Go through each tab of the configuration form and select the options that are applicable.
Click Save to save your changes.
If needed, you can click History in the toolbar on the right-hand side, then click the widget you added to reopen the configuration form and edit your changes.

List of options for the Scratch Card widget: the four tabs Layout, Content, Style, and Conditions are available to configure the widget.

Layout customization

The Scratch Card widget is displayed as a modal (pop-in) that appears on top of the main screen. In the layout section, select where you want your image to be placed in relation to the text and select where you want your modal to be placed on the screen (9 available options).

For the "image on the left" and "image on the right" options, determine the width percentage of the image compared to the entire pop-in: between 20% and 80% of the available width.

Dimensions

By default, the "Widget dimensions based on content" toggle is ON, meaning that if you upload a large image, your modal will adapt accordingly based on the image (and text) ratio (length).

When the toggle is OFF, you can define the width and height of the modal independently using the following dimensional units:

Unit	Description
px	Pixels
%	Percentage
em	Element, meaning that it is based on the size of the text of the element. For example, if your font-size is 18 px, then 1 em = 18 px
vw (% of viewport width)	1/100th of the window's (or viewport) width
vh (% of viewport height)	1/100th of the window's (or viewport) height
vmin (% of viewport minimum size)	Whichever is the smallest of vw or vh
vmax (% of viewport maximum size)	Whichever is the highest of vw or vh

By default, the height of the modal is set to "Preserve ratio (automatic height)". This way, you don't have to set a height; it takes what the modal needs and can even reach 100% of the available height in the viewport.

When the toggle is OFF, you can define a height. If the content is longer than the defined modal height, it will be scrollable.

Content tab

Select the step you want to preview:

Before scratching
After scratching

Before scratching/ After scratching

Select the desired image by uploading it via your browser or by entering the image path.
Display title (optional): enter a title for your image, to be displayed above your message.
Message: enter a message, for example, to give the user instructions.

For the after scratching step, you must select the widget link type among the following options:

Unit	Description
The button is a link	On clicking the button, the user is redirected to another page. You must enter the label of the button and the URL of the page you want the visitor to be redirected to.
A click on the button closes the widget	On clicking the button, the widget closes. You must enter the label of the button.
The whole widget is a link	On clicking on any area of the widget, the user is redirected to another page. You must enter the URL of the page you want the visitor to be redirected to.
A click on the whole widget closes the widget	On clicking any area of the widget, it closes.
None	There is no button, and nothing happens when clicking on the widget.

Second CTA/link option

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.

Style tab

Select the style options (Container, Border, Close button and Underlay) you want to apply to your widget.

From here, you can configure the size and layout of your modal.

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

Select the Triggering and Recurrence options you want to apply to your widget. Refer to the Widget Condition options section in the widget guide for more information on the available Condition options.

🔎 Tracking widgets

Element Visible Tracking

The Element Visible Tracking widget enables you to track whether one element (an image, a button, a paragraph, a div, a section, a collapsible div, etc.) has been "visible" in the viewport of the visitor.

There are several possibilities:

the element is visible above the "fold line" at page load,
the element is only visible once the visitor has scrolled to a certain point and suddenly appears in the viewport (triggered when the element starts to be visible and is not fully visible, for example, a large <div> or an image),
the element is hidden and is only displayed after a click (or any other user behavior).

In all of these cases, we collect a hit. Once an element has been made visible in the viewport, reading it and re-displaying it will not count it twice. However, if the visitor reloads the page and the element is visible again, a new hit is sent.

If you have a responsive website, it is probably more convenient to use the Element Visible Tracking widget instead of the Scroll Rate Tracking widget, which will consider a scroll rate the same way for visitors on desktop and on mobile.

Depending on how your website is designed and/or the device you use, you may see an element or not, without this being related to the scroll progression.

You can nevertheless use the Scroll Rate Tracking widget in two different campaigns, each one targeted on a per-visitor device basis.

Configuration

To configure the widget:

select the element you would like to track,
give it a name (for the Goals setup step and the Reporting),
save.

To use more than one goal, add more in the same tracking widget (by clicking on the "+" button) instead of adding another tracking widget.

If you added one by mistake or if you would like to remove one inside of a tracking widget, simply click on the red cross to delete it.

In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the metrics guide.

To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).

Dwell Time Tracking

The Dwell Time Tracking widget enables you to track the time your visitors spend on a page. Visitors who reach a given duration will be grouped under this duration goal.

For example, you can create three separate goals in one single widget.

Let's say: 10 seconds, 60 seconds, and 180 seconds. You will see in the reporting for each goal, how many visitors reached it.

This will give you an idea of the time your visitors spend on a single page, whether it is a content page with a long scroll or a simple task-oriented page (or group of pages, depending on your targeting criteria).

In theory, you should always have a higher number of reached goals for the shortest durations and a lower number of reached goals for the longest durations.

Configuration

To configure the widget:

give it a name (for the Goals setup step and the Reporting),
define a duration (make sure to name it accordingly),
save.

To use more than one goal, add them into the same tracking widget (by clicking on the "+" button) instead of adding another tracking widget. If you added one by mistake or if you would like to remove one inside of a tracking widget, just click on the red cross to delete it.

In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the Metrics Guide.

To avoid creating conflicts within your campaign's reporting data, we recommend adding a single widget in which all your dwell time goals will be defined.

To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).

Scroll Rate Tracking

The Scroll Rate Tracking widget enables you to set one or more scroll goals on a web page.

Once the scroll threshold has been reached by a visitor, a goal is recorded in the report. If a user scrolls down, reaches a goal, scrolls back up and scrolls down again, the hit is not sent twice.

If they refresh the page and reach the scroll rate goal, a new hit is sent.

Depending on how your website is designed and/or the device you use, you may see an element or not, without this being related to the scroll progression.

You can nevertheless use the Scroll Rate Tracking widget in two different campaigns, each one targeted on a per-visitor device basis, for a fair comparison.

Configuration

To configure the widget:

give it a name (for the Goals setup step and the Reporting),
define a percentage of scroll (make sure to name it accordingly),
save.

In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the metrics guide.

To avoid creating conflicts within your campaign's reporting data, we recommend adding a single widget in which all your scroll goals will be defined.

To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).

Iframe Click Tracking

The Iframe Click Tracking widget enables you to record clicks in an iframe (an HTML element that lets you display content from another web page (the same site or another site).

For example, YouTube videos are displayed in an iframe when you embed them in your website. It is pretty much the same thing for any web app that lets you embed a part of or the full content of a page. Generally speaking, except for websites that forbid it, any web page can be embedded in an iframe.

Configuration

To configure the widget:

give it a name (for the Goals setup step and the Reporting),
select the <iframe> element you would like to track (use the Select Parent or Select Children option to select the right element if needed),
save.

To use more than one goal, add them to the same tracking widget (by clicking on the "+" button) instead of adding another tracking widget. If you added one by mistake or if you would like to remove one inside of a tracking widget, just click on the red cross to delete it.

In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the Goal guide.

If you want to track clicks in several iframes on your page, you will need to add one widget per iframe.

To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).

🎁 “Special” widgets

Before-After Image

The Before & After widget enables you to display 2 images and compare them side by side.

This can be useful:

If you want your visitors to be presented with or compare a product (before using the product and after)
To test a new way of displaying images on your product pages
To showcase an offer (“Drag to discover your bonus”)
etc.

During this configuration step, layout, content and style changes are displayed in real-time.

To apply your changes, proceed as follows:

Go through each and every tab of the configuration form and select the options that are applicable.
Click Save to save your changes.
If necessary, you can click History in the toolbar on the right-hand side, then click the widget you added to reopen the configuration form and edit your changes.

Good to know 💡

An informative message is displayed if you try to create a widget when one has already been configured for that variation or scenario. Once closed, it won’t be displayed again. However, this doesn’t prevent you from creating another widget if necessary.

Layout tab

The Before-After image widget has two available layouts:

Modal

This option enables you to display the widget as a window that appears on top of the main screen. In the layout section, select where you want your modal to be placed on the screen (9 available options).

Free placement

This option enables you to position the widget in a specific place in relation to an existing HTML element:

Click Select element.
On the page, select the element on which you want to hook the widget.
Select the appropriate option to position the widget Before, At the Start, At the End, or After the element.

Before	Fix the widget before a specific element of the page
After	Fix the widget after a specific element of the page
At the Start	Place the widget in the HTML code, at the start of the element definition
At the end	Place the widget in the HTML code, at the end of the element definition

Good to know 💡

When using the At the Start or At the End options, the widget may inherit the CSS styles of the selected element.

Next, select a presentation among these three options: separated by a slider, next to each other, or on top of each other.

Content tab

Required options

Option	Usage
Select the first image	Select the desired image by uploading it from your browser or by entering the image path. You must add two images.
Select the second image

Optional options

Option	Usage
Display a title	Enter a title common to both your images that will be displayed above the first image (depending on the chosen configuration) and above your message (if any).
Display a message	Enter a message common to both your images that will be displayed above the first image (depending on the chosen configuration).
Display image captions	Enter a caption for both your imported images. This caption will be displayed below each image.

Widget link type

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 need 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 need to specify a button text. The widget will display a button.
"The whole widget is a link": you will need to specify a URL. The widget will not display a button.
"A click on the whole widget closes the widget": you won't need to add anything. The widget will not display a button.
"None": the widget will not be clickable.

If you use a background image which looks like a "big ad", we recommend selecting "The whole widget is a link" and removing the paragraph with the editor once the widget is set.

Second CTA/link option

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.

Style tab

Select the style options (Container, Border, Close button) you want to apply to your widget.

From here, you can configure the size and layout of your modal.

Conditions tab

Select the Triggering and Recurrence options you want to apply to your widget. Refer to the Widget Guide section for more information on the available Condition options.

Search & Replace

The Search & Replace widget will help you replace all the occurrences of a word or a group of words on a page.

This is useful, for instance, for A/B testing a change in wording or microcopy, or simply to replace an old product name with a new one, or even the name of the former CEO with the new one.

The impact of this widget on your text is visible in the editor directly.

Content tab

To configure the widget:

Type the word(s) you want to replace in the "Search" input.
Type the word(s) you want them to be replaced within the "Replace With" input.
Scope it or leave it. Leave “body” if you want to apply the changes to the whole page or select the element you want your replacement to be scoped to.
Save

Be careful, this widget is case-sensitive, so if the words you want to replace are "Product X", it will not replace:

product X
Product x
product x

You will need to add four widgets to cover all cases.

Sticky Element

The Sticky Element widget helps you keep important elements in the viewport of your visitors. This limits confusion and reminds them of the main expected task for each page.

For example, on product pages, it can be the "Add to Cart" button, on travel websites, the "Book Now" button, on SaaS apps, the "Save" button, and so on.

Content tab

The "Select the Element to Stick" input allows you to select the link, button, or whole <div> that you want to make "sticky".
The "Foreground" toggler is toggled by default. When toggled, it allows you to change the z-index. value.
The "z-index" number input lets you define the z-index value in order to position your sticky element among other elements already placed on the z-axis.

Style tab

The "Sticky Position from Top" input number and unit select allow you to define the scroll height before the widget starts to become "sticky".
If the "Add Background Color" check box is ticked, then you can define a "Background color" for the selected element in the color picker.

Virtual Click

The Virtual Click widget will help you virtually click on an element on the page to save your visitors the hassle. This click will happen at page load.

It can be used in many different ways, such as clicking to hide a panel, display a pop-in, pre-filter results, accept conditions, tick a check box...anything you would like your visitors to do but can't force them to do, or anything you would like to save your visitors from doing.

It can be very convenient once a decision for an evolution has been made and you would like to implement it as soon as possible without having to wait for the development to be in production.

You will not be able to see the impact of this widget in the editor directly (the click).

Configuration

To configure the widget:

select the element you want to click onto at page load,
save.

Be careful: If you need to add more than one virtual click, you will have to add as many widgets as needed.

Celebrate

The Celebrate widget enables you to place an icon of your choice on any element of the web page.

This can be useful:

to add playfulness to your website during holiday season,
to highlight a new product,
to highlight specific products (e.g. green products),
etc.

During this configuration step, layout, content and style changes are displayed in real time.

To apply your changes, proceed as follows:

Go through each and every tab of the configuration form and select the applicable options.
Click Save to save your changes.
If necessary, you can click History in the toolbar on the right-hand side, then click the widget you added to reopen the configuration form and edit your changes.

Good to know 💡

Three tabs (Layout, Content, Style) are available to configure the widget.

Good to know 💡

The Save button will only be enabled once you have gone through each tab.

Layout tab

Select the element of the page on which you want to hook the icon.

Content tab

Two options are available to configure your widget:

Select an icon among the default icons suggested by AB Tasty
or
Upload your own image by uploading it from your browser or by entering the image path.

Style tab

Select the style options (Size, Horizontal & Vertical Alignment, Horizontal & Vertical Symmetry, Rotation) you want to apply to your widget.

Snowflake Animation

The Snowflake Animation widget enables you to simulate snow falling on any element of the web page with an icon of your choice.

It can be useful to add playfulness to your website during a specific time of year (Christmas, Halloween, Thanksgiving, Valentine's Day, your company anniversary and so on) or to highlight a specific section of the page.

During this configuration step, layout, content and style changes are displayed in real-time.

To apply your changes, proceed as follows:

Go through each and every tab of the configuration form and select the applicable options.
Click “Save” to save your changes.
If necessary, click on “History” in the toolbar on the right-hand side, then click on the widget you added to reopen the configuration form and edit your changes.

Good to know 💡

Three tabs (Layout, Content, Style) are available to configure the widget.

Good to know💡

The Save button will only be enabled once you have gone through each tab.

Layout tab

Select the element of the page on which you want the icons to fall.
Define the position of the widget compared to the layer. You can choose to have your icons fall above or under the layer, or to customize their position.

Content tab

Enter the number of icons you want to fall on your element or page (up to 200).

Two options are available to configure your widget:

Select an icon among the default icons offered by AB Tasty
or
Upload your own image by uploading it from your browser or by entering the image path.

Style tab

Select the style options (Icon size, Average animation duration, Animation direction, Icon rotation during animation) you want to apply to your widget.

Condition tab

You can choose to stop the animation after a certain amount of time (delay) after the loading of the targeted page. To do this, toggle the “Stop the widget after a delay” toggle and use the scale or the empty field to declare the number of seconds to be reached before stopping the animation.

Social Sharing

The Social Sharing widget lets you display a sidebar (left, right, top, bottom of the page) on pages where you would like your visitors to share content on social media or via email.

Layout tab

Pick the layout that suits you best depending on the design of your web app.

Content tab

Select the social platform(s) you would like to invite your visitors to share on.

The following are available: Facebook, Twitter, Telegram, LinkedIn, and Pinterest.

By default, "Email" is toggled; it will add a button with a "mailto:" link.

The email subject will be the meta title of the page and the email body will be the URL of the page.

"mailto:" links behave differently depending on whether you have set a default email client for "mailto:" links in your browser settings; and if you have, it differs depending on whether you use: Thunderbird, Outlook, Mail, Gmail, Proton Mail, etc.

Style tab

The Icons color will be applied to all icons. By default they are white.
The Customize icon background color, once toggled, will be applied to all icons. By default (untoggled) they are based on the color of the social media platform: light blue for Twitter, red for Pinterest, etc.
Display a drop shadow & drop shadow blur radius. You can decide whether to have a drop shadow and how opaque it will be.
Margin between icons will add some margin between the buttons (vertical margin or horizontal margin, depending on the layout you picked).
Button border radius slider will give more or less border radius to the icon buttons.
Customize container: if you toggle this option, you will discover a list of sub-options (container padding, background color, border thickness (and border color is thickness is >= 1px) & border radius) which will let you design a sidebar to wrap the icons together.
The Container position on the axis slider will help position the sidebar, in particular if you already have static/sticky elements on your page so as to avoid overlapping. By default it is set to 50, which means centered (vertically or horizontally (@ 50%) depending on the layout you picked).

💘 Dynamic content

Social proof

The Social Proof widget enables you to display a message for your visitors, specifying the number of views or purchases for a specific product page for a defined duration.

Social Proof is a social psychology principle that describes the fact that individuals are highly influenced by the behaviors and opinions of others. In the case of a newspaper article, the more views it has, the more people will be tempted to read it because it has already sparked the interest of others. In the case of a commercial product, a large number of views may convince people that the product is popular and therefore make them want to purchase it. A large number of purchases is likely to accelerate the purchase decision of hesitant users, who fear the item will soon be out of stock. They will also view a large number of purchases as proof of the article’s high quality. A low number of views or purchases, on the other hand, is likely to put the visitor off buying.

In short, this widget can make a huge impact if targeted properly on volume of traffic or volume of purchases.

Layout tab

Capture_d_e_cran_2020-10-26_a__11.57.14.png

We offer 4 different layouts:

modal (pop-in)
top banner
bottom banner
free placement (which allows you to place the widget wherever you want in the page flow)

Dimensions

Capture_d_e_cran_2021-02-01_a__10.46.53.png

Widget dimensions based on content

By default, the "Widget dimensions based on content" toggler is toggled. It helps you not to worry about modals dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).

But, for many of our users, this default dimensions management was not enough. So we came up with something trickier but more flexible. If you untoggle the toggler, we will be able to define both width and height of the pop-in. And, last but not least, you will able to define them (independently) in several dimensional units:

px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text of the element, if your font-size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)

Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. Some of you may think that being able to define height in vw or width in vh doesn't make sense and that it is a bug or an oblivion on our side's but it is not. It can be useful to do, in some very edgy cases, that is for sure.

We voluntarily did not offer those units: cm, mm, in, pt, pc and ex as, in short, they are not best-practices. We are still open to discussion for implementing rem unit.

If you're digging the dimensional units in CSS, we strongly advise you read this W3C article which is a good starting point.

Preserve ratio (automatic height)

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.

Know issue: the widget configuration form not overlapping the website

We understand that defining the pop-in size without seeing the full rendering of the page is tricky. Until now, we haven't found a better solution to help you do that. Make sure, when you dimension your pop-in that it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.

Layer

Layer Position (z-index)

Capture_d_e_cran_2021-02-01_a__10.47.04.png

If you've selected "modal", "top banner" or "bottom banner" layout, you can define the position of the widget on the z axis in order to manage if you want the widget: on top of everything, under everything or precisely fine-tune its position.

Content tab

Capture_d_e_cran_2020-10-26_a__11.57.49.png

Select a variable to display

Pick between "Number of purchases" or "Number of views". "Number of views" is the default value. Depending on which value you select, it will display the number of times the page has been viewed or the number of times the product has been bought (thanks to the transaction tag).

Select a period to display

Depending on your volume of sales of the 'social' pressure level you want to add, you may select a duration value among these: last 3 hours, last 12 hours, last 24 hours, last 3 days or last 7 days. We advise you to start with the longest and increase throughout your experiments to find your best fit.

Create your own content with dynamic tags

Customize the default text, position the different variables exactly where you want them to be. This allows you to write a lot of combinations in your own language and adapted to your needs.

!views!: The number of times your visitors have viewed your product page (multiple views per visitor)
!purchaseQty!: The number of purchases your visitors have made on this particular product from any page or section of your website.
!period! : duration value (number of hours or days).
!unit! : duration unit ("hours" or "days"). You can also remove it and replace it using your own words.

Style tab

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

Contrarily to other widgets, the Social Proof widget has a distinctive "Conditions" tab. Especially for the triggering part.

Capture_d_e_cran_2020-10-26_a__12.01.49.png

Triggering

Depending on if you picked view or purchases in the content tab, you will be able to trigger the display of the widget from a specific number of views or purchases. In both cases, minimum is 0 and maximum is 1,000. By default, the value is 200 for 'views' and 50 for 'purchases'. You can override them.

This volume trigger applies to all the targeted products and start to collect views and purchases as soon as the widget is activated for your account (TDB enablement). Which means that you may have to wait a little to be able to QA the widget in order to have collected data between the moment your widget was enabled and between your campaign is in QA.

Be careful when doing the quality assurance on a campaign with a Social Proof widget. If the trigger level is higher than the actual number of views / purchases. You may not see the widget.

Recurrence

The recurrence is managed the same way as explained here, in the common Conditions tab article.

URL Parameters

The number of views for a product is collected automatically thanks to AB Tasty’s data collection system (Universal Collect).

The Social Proof widget relies on the URL of the page, including path name (without the gclid parameter (Google Ads' automatic marking)). Anchors are not taken into account by the widget.

The "Ignore URL parameters to differentiate pages" toggler is disabled by default. This option aims to help users define with more precisions if what they call "a product" is a variation of a more generic product or the generic product.

For example, in the tourism industry, many websites have per-hotel or per-flight URLs but however uses URL parameters to make distinctions on room types, nights, options, dates, classes...

myhotel.com/hotel-cancun-123?room=suite-deluxe&checkin=12052021&checkout=19052021
myflight.com/dublin-vilnius-xair?outbound=12052021&return=19052021&class=economy

But it also sometimes happens in fashion or other industries...

mytshirt.com/tshirt-fancy-123?size=xl&color=grey&design=19
mymachinery.com/tiller?wheels=4&absorber=yes&options=security-pack

In order to set this toggler the best way possible, the questions you have to ask yourself are:

1st question: "Are

- myhotel.com/hotel-cancun-123
- myhotel.com/hotel-cancun-123?room=suite-deluxe&checkin=12052021&checkout=19052021

the same product or two different products?"

If not, let the toggler disabled ; if yes, enable the toggler.

2nd question: "Is myhotel.com/hotel-cancun-123 a real purchasable product (or has it to be set up (options, dates...))?"

If yes, let the toggler disabled ; if no, enable the toggler.

Now, if you want to display the Social Proof widget only on distinctive product variations and not on the generic product pages, you may set your campaign targeting criteria to only URLs containing parameters.

Pre-requisites

In order to display the number of purchases, AB Tasty has to retrieve information regarding the corresponding product, which is registered in your data layer, or directly in the source code of your website (DOM).

>We recommend using a data layer on your website. A data layer can register and gather information on the product for which you want to determine the number of transactions. For more information, please refer to the Integrating your Data layer into your AB Tasty account article.

Before configuring the widget via the campaign editor, if you want to determine the number of transactions for a product, you need to:

Implement the Item hit and the transaction tag
Define the window.ABTastyProductKey variable

Implementing the Item hit and the transaction tag

The Item hit enables the collection of information on the product for which you want to collect and display the number of transactions (average cart value, item price, etc.). To make the Social Proof widget work, tid (transaction ID, the id of the transaction), ic (item code, the SKU of the product... in short: a unique identifier) and in (item name) parameters are required. For other parameters, you can implement a default value. Nevertheless, they must respect a given type of data in order to guarantee the calls with the database.

To implement the Item hit, you also need to implement the transaction tag on your website. The transaction tag enables you to save the data related to the transactions carried out on your website (e.g. transaction amounts, payment methods, number of items purchased, etc.).

To implement the transaction tag and the item hit, please refer to the New data collection: Installing the transaction tag article.

For more information, see the technical documentation.

Defining the window.ABTastyProductKey variable

After implementing the transaction tag and the item hit, you need to define the window.ABTastyProductKey variable with the value of the product (item code) for which you want to collect and display the number of transactions.

Once the variable is defined, the Social Proof widget connects the information of the database with the value defined in the window.ABTastyProductKey variable. If this information matches, it means that the value of the variable and the item code of the Item hit are similar: the widget can display the number of transactions carried out on the product via the widget.

To define the window.ABTastyProductKey variable, apply the following steps:

Copy the following code, paste it in "Add JS" (in the variation menu), replace YOURDATALAYER with your dataLayer name & replace ITEMSKUKEY with the adequate parameter name present in your dataLayer.

function setABTastyProductKey() {
 if (typeof YOURDATALAYER !== "undefined") {  /* Set YOURDATALAYER variable with the correct name */
   window.ABTastyProductKey = YOURDATALAYER.ITEMSKUKEY; /* Set YOURDATALAYER.ITEMSKUKEY variable with the correct path. */
 } else {
   setTimeout(setABTastyProductKey);
 }
}
setABTastyProductKey();

The value you define in the window.ABTastyProductKey variable must be the same as the item code (product SKU) located in the Item hit.

We recommend implementing the code directly in the editor of the campaign rather than in the global code of the website, as this code is only necessary for pages using the Social Proof widget.

Tracking

The social proof widget sends an AT hit “Social proof displayed” when it meets the conditions and is displayed.

However, you need to create a custom tracking and add it during the goals step to make it appear in the report of the campaign

NPS

Capture_d_e_cran_2020-10-13_a__09.43.47.png

The NPS widget enables you to display a satisfaction survey in order to collect feedback from visitors. The NPS, or Net Promoter Score, is a customer satisfaction measuring tool based on a single question.

This functionality enables you to carry out a satisfaction survey via a form displayed on one or more pages or your website. This way, visitors can rate and comment on their experience as users.

Among other things, the NPS widget enables you to quantify promoters (9 - 10), passives (7 - 8) and detractors (0 - 6) on your website, to collect feedback and to measure the impact or your changes.

The widget then lets you:

track the evolution potential of customer loyalty,
find out how you are performing compared to other players in your field,
improve the user experience.

Restriction

At the moment, even if the NPS widget can be added onto a multi-pages test or a personalizations with sub-tests, the reports in such campaigns are not supported yet.

Layout tab

Capture_d_e_cran_2021-02-01_a__10.46.21.png

Select a layout

We offer 4 different layouts:

modal (pop-in)
top banner
bottom banner
free placement (which allows you to place the widget wherever you want in the page flow)

Capture_d_e_cran_2020-10-13_a__10.31.54.png

Capture_d_e_cran_2020-10-13_a__10.31.40.png

Capture_d_e_cran_2020-10-13_a__10.32.06.png

Capture_d_e_cran_2020-10-13_a__10.32.45.png

Dimensions

Capture_d_e_cran_2021-02-01_a__10.46.53__1_.png

Widget dimensions based on content

px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text of the element, if your font-size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)

We voluntarily did not offer those units: cm, mm, in, pt, pc and ex as, in short, they are not best-practices. We are still open to discussion for implementing rem unit.

If you're digging the dimensional units in CSS, we strongly advise you read this W3C article which is a good starting point.

Preserve ratio (automatic height)

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.

Know issue: the widget configuration form not overlapping the website

We understand that defining the pop-in size without seeing the full rendering of the page is tricky. Until now, we haven't find a better solution to help you do that. Make sure, when you dimension your pop-in that it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.

Layer

Layer Position (z-index)

Capture_d_e_cran_2021-02-01_a__10.47.04__2_.png

If you've selected "modal", "top banner" or "bottom banner" layout, you can define the position of the widget on the z axis in order to manage if you want the widget: on top of everything, under everything or precisely fine-tune its position.

Content tab

Capture_d_e_cran_2020-10-13_a__10.33.59.png

Question

This is where you will be able to write your own NPS question. By default, we offer to use the most common way of asking an NPS question to the visitors: "How likely are you to recommend us to a friend or family member?".

However, you can write in many other ways, for example:

"What is your experience so far with this product?" (for an already purchased product)
"How is our documentation answering your questions?" (for self-service user documentation)
"Hey, do you think these recommend products are adequate?" (for product recommendation features)

Adapt the question to what you want to know.

A well-targeted campaign properly triggered with the right level of recurrence can give you really good results in quality and volume of feedback.

Pro tip: don't offer anything in exchange of a feedback. Feedback (good and bad) is free. Free is unbiased.

Display legend

You can decide to display a legend next to min and max scores by toggling this on. By default, it is untoggled. However, it makes it obvious for visitors that 0 is bad and 10 is good. No brainer.

By default, we offer "Very unlikely" as minimum score legend and "Very likely" as maximum score legend. They fit well with the default NPS question. Therefore, if you change the question, there is a good chance that you will need to adapt the legend too.

Ask an open-ended question

You can decide to have a "Ask an open-ended question" by toggling this on. By default, it is untoggled.

Most of our users use this option to get more detailed feedback with the score. Invite your users to give you detailed explanations of their bad or good score (and even average). This qualitative feedback will become a real change or growth lever.

Some of our users also use it to collect personal contact information such as phone number, email or client ID. It sure does imply a lot of manual qualification but it can be a quick-win to contact back and turn detractors into promoters.

Button text

By default, we offer "Send". Obviously, you can change it to your own needs.

This input only appears if you toggle the "Ask an open-ended question" step.

Thank you message

You can decide to have a "Thank you message" by toggling this on. By default, it is untoggled.

Style tab

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

Refer to the Widget Style options article for more information on all available Style options.

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.

NPS widget Styling Specificities

In the NPS widget, you will be able to preview the different steps of the widget. Depending on if you enabled (toggled) them or not in the content tab.

The styling options will apply the same way to all components (text, button, container) in all steps. For example, if you style the scoring buttons with border-radius, it will be applied to the same way to the "Send" button in the open ended question step.

If you don't toggle open-ended question and thank you message, you will not see a "Preview" group in the Style tab. As there will remain only one step: the score step (which you will view immediately).

As you may have seen in our examples at the beginning of this article, you can customize a lot an NPS widget rendering by adding extra CSS. You can hide some scores (but this will deeply impact the reporting results/reliability), display a background image, re-order components, replace scores with images... All that through the "Add CSS" Feature.

In order to do this the most proper way, don't forget to set your default styling completely off. This will remove all the CSS we apply to the NPS widget. You can do this in the Style tab by toggling "Custom".

Conditions tab

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

NPS Report

Once you have collected some scores and feedback, you can view in the dedicated report tab, your NPS report.

You will be able to access it through the Reporting, with a click on the "NPS" tab.

In this report, you will be able to:

A top card with your global average NPS score
View the distribution of detractors, passives, promoters (per variation (useful if you implemented an NPS widget in more than one variation)). Each block will display the NPS question (that you may have customized in each variation, just to test or the same question but in variations with different modifications).
For each variation, you will be able to download a .CSV file of the collected NPS scores and feedback with the following columns: npsFeedback, npsScore, url, date
View a last 10-days graph of the trend of your global NPS score (here again, variation-based). For each day, you will have a popover with the daily NPS score
Browse (and filter) verbatims per keyword, variation and date range - the rows are orderable by date and by score (ascending and descending)

Spotlight

Introduction

With Spotlight, you can provide new and engaging navigation options by highlighting selected products or product categories, as determined by you.

Spotlight is seamlessly integrated into your website as a banner, similar to our other widgets. The banner consists of customizable badges known as "Highlights," which allow you to feature an image, a title, and a redirect address.

Layout tab

The layout configuration for spotlight is similar to the banner one.

Layout

We offer three different layouts:

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

Layouts are natively responsive.

Layer

Layer Position (z-index)

Please read the dedicated article on this topic: z-index article.

Content tab

The "Content" tab in the Spotlight widget settings allows you to define and manage the various Highlights that compose the widget. Each Highlight represents a badge that contains an image, a title, a redirect link, and a tracking name. This tab provides an intuitive interface for configuring and organizing your Highlights according to your preferences.

. Each Highlight consists of specific elements that contribute to its appearance and functionality.

Thumbnail: The image you upload will be displayed within the Highlight. It's important to note that depending on the style configuration, the image may be cropped to fit the designated area. To ensure optimal display, we recommend using images with appropriate dimensions and aspect ratios.
Title: The title is positioned below the highlight and provides additional context for the Highlight. Keep in mind that the size of the text is limited by the size of the Highlight itself. Therefore, it is advisable to use concise and clear titles that effectively convey the intended message within the available space.
Link: The redirect link determines the page or destination where visitors will be directed when they click on the Highlight. By defining the appropriate redirect link, you can guide visitors to relevant product pages, category sections, promotional offers, or any other desired destination on your website.
Tracker Name: The tracker name field allows you to assign a specific name to track clicks on the individual Highlights. Tracking the clicks enables you to set them as campaign objectives or goals. By assigning custom tracker names, you can easily reference and identify these clicks within the page of goals or campaign tracking.

With these configuration options, you can fine-tune the content of each Highlight within the Spotlight widget.

Adding Highlights
To add a new Highlight, simply click the "Add a settings" button. This action creates a new panel where you can input the necessary details for the Highlight as described above.

Reorganizing Highlights
To reorder the Highlights, the interface provides dedicated buttons for easy rearrangement.

For added convenience, highlights control panels can also be moved directly into their graphics container. Simply click on a panel and drag it above or below another panel to directly reorganize the widget's highlights.

Deleting Highlights

If you find that an extra Highlight has been added or you wish to remove a previously configured Highlight from the widget, simply click on the cross icon located within the configuration panel of the respective Highlight. This action will instantly remove the Highlight from the widget, ensuring that it is no longer displayed to your website visitors.

Style tab

The "Style" tab in the Spotlight widget settings allows you to customize the visual appearance of both the widget banner and the individual Highlights.

Common Style Configurations

For elements shared with the widget banner, the style configurations remain the same. You can define the following:

Container: Adjust the margin, background color, and other properties related to the overall container of the widget.
Border: Specify the border width, color, and other attributes for the widget container.

Highlight Styling

Within the "Style" tab, a dedicated section is provided to style the individual Highlights.

Here, you can configure the following aspects:

Highlight Size: Define the size of the Highlights using viewport width (vw) as the unit, representing a percentage of the screen width
Highlight Spacing: Set the spacing between the Highlights, also using viewport width (vw) as the unit
Border Thickness : Customize the width of the outer border surrounding each Highlight
Border Color : Customize the color of the outer border surrounding each Highlight
Border Radius: Adjust the border radius to alter the shape of the Highlight, ranging from rounded to square
Inner Border width: Specify the width of the inner border, which forms the graphical area between the outer border and the Highlight image
Inner Border color: Specify the color of the inner border
Text Styling: Configure the text color, font, style, and size within each Highlight
Alignment: Choose from six alignment strategies:
- Left Aligned: Aligns the Highlights to the left, maintaining their order
- Center Aligned: Aligns the Highlights at the center, preserving their order
- Right Aligned: Aligns the Highlights to the right, retaining their order
- Space Evenly: Equally distributes the available space within the banner among the Highlights
- Space Around: Allocates equal space on the left and right of each Highlight, maintaining a balanced distribution
- Space Between: Distributes the available space evenly between the Highlights, with the outermost Highlights touching the edges of the widget

Note: Please note that for the last three alignment strategies (Space Evenly, Space Around, and Space Between), which are based on adjusting the spacing between the Highlights, selecting any of these strategies will override the specific spacing value defined for the Highlights. In these cases, the widget will automatically calculate and distribute the available space based on the selected alignment strategy. This ensures consistent and optimal spacing between the Highlights, as per the chosen alignment option.

Condition tab

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

If you want to: edit, duplicate, rename, delete such a widget, please check the Widget Frequently Asked Questions article.