Before-After Image Widget

The Before-After Image widget is part of the Special widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.

Introduction

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 a product

• To 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”)

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.

Configuration

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:

1. Click Select element.

2. On the page, select the element on which you want to hook the widget.

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

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.