Simple Popin Widget

The Simple Popin widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets Set-up Guide.

 

Introduction

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.

47.png  48.png49.png

 

Layout tab

50.png

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)

51.gif

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.

52.gif

 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

53.png

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.

54.gif

 

Conditions tab

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

Was this article helpful?

/