🧪 📹 Image Pop-in

   

• Introduction
• Layout tab
• Content tab
• Style tab
• Conditions tab
• Example demo

---

Introduction

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 visitors attention on a specific offer, give more details on a specific option, item, 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 a special event.

Obviously, you can imagine many other use cases. You will see in the section concerning the Conditions tab that conjugating the image pop-in widget with our different triggering options and recurrence options, can make this widget a great marketing tool. It can even be used as an "Easter egg" thanks to the custom trigger.

---

Layout tab

Select a layout

We offer 5 different layouts: 4 with text (image on the right, image on the left, image below, image above) and 1 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 decide the image over text ratio. By sliding the cursor on the axis, you can decide if the image is going to take from 20 to 80% of the width.

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)

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.

Know 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. And results can be surprising...

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.

---

Content tab

Upload an image

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

Title

For the first four layouts (image on the right, image on the left, image below, image above), you will be able to decide to display a title or not. Max. length is 255 characters.

Message

For the first four layouts (image on the right, image on the left, image below, image above), the message is mandatory. You have to fill the textarea in.

If you don't want to display a text, you have to 2 alternatives options: use the "image only" layout or type a message in the textarea, save the widget and then, hide the element in editor.

The textarea 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 now decide if your pop-in will contain a clickable button (to close or redirect), if the pop-in will be entirely clickable (to close or redirect) or will have no link at all.

• If you pick "The button is a link", you will have to precise a button URL and a button text. The widget will display a button.
• If you pick "A click on the button closes the widget", you will have to precise a button text. The widget will display a button. 
• If you pick "The whole widget is a link", you will have to precise a URL. The widget will not display a button.
• If you pick "A click on the whole widget closes the widget", you won't have anything to add. The widget will not display a button.
• If you pick, "None", well, nothing else is required. The widget will not be clickable.

---

Style tab

In the style tab, you will be able to define the size, color, border, background... of each element of the image pop-in. Uncollapse each group and adapt the widget to your website color palette and style.

By default, the pop-in inherits from the font-face of your website. But you can override it with the 1,000 Google Fonts available.

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

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

We looked for a delightful way to make the image border-radius adapt the overall border-radius of the widget. So, if you apply a large border-radius to the pop-in, it will impact the image and will round the two concerned corners. Now, if you want to round the two remaining "square" corners of the image, you will have to do it in the editor (select element, edit style, border tab and type in the border input the same value).

Round Pop-in

If you want to display a round pop-in, you will have 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.

Close button customization on "image only" layout.

On a pop-in with text, you can change the color of the close button (cross) by changing the color of the text. However, if you want to change close button (cross) colors (and dimensions), you will need to add a few lines of CSS in the variation "Add CSS" feature:

#ab_widget_container_popin-image_12345678_123456 .ab_widget_container_popin-image_content .ab_widget_container_popin-image_close_button svg {
width: 28px !important;
height: 28px !important;
color: rgb(255 255 255) !important;
fill: rgb(255 255 255) !important;
-webkit-text-fill-color: rgb(255 255 255) !important;
}

Don't forget to replace #ab_widget_container_popin-image_12345678_123456 with the adequate widget selector.

---

Conditions tab

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

Refer to the "Condition" tab article for details.

---

Example demo

• Image Pop-in - Product Page Hotspots
• Image Pop-in - Exit Intent