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. Big text = big 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, 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.
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.
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 button, will be entirely clickable or will have no link at all.
If you pick "button", you will have to precise a button URL and a button text.
If you pick "whole widget clickable", you will have to precise a link URL.
If you pick, "none", well, nothing else is required.
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.