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 visitors attention on a specific information, momentum or important message. It can be used for many different use cases. Maintenance operations, crisis communication or even for season greetings or song lyrics!
Obviously, you can imagine many other use cases. You will see in the section concerning the Conditions tab that conjugating the simple pop-in widget with our different triggering options and recurrence options, can make this widget a great marketing tool.
Also, even if an image is not supposed to be the main piece of information on a simple pop-in widget, you can still use them as background. Make sure the text is contrasted enough, and if not possible, try adding text-shadow through the editor.
As you can see, there is not much in the Layout tab for this widget.
As it is a modal, you cannot pick among different layouts and the notion of sub-layout is not available either.
Nevertheless, you can still decide to use the content of the widget to auto-define the popin dimensions or you can define its dimensions.
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 text dimensions. Long text = Long pop-in.
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, you 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.
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. 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.
You will be able to decide to display a title or not. Max. length is 255 characters.
As the "Simple pop-in" widget is mainly designed to contain text, you have to fill the textarea in.
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.
In the style tab, you will be able to define the size, color, border, background... of each element of the simple 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.
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.
Select the Triggering and Recurrence options you want to apply to this widget.
Refer to the "Condition" tab article for details.