Examples
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 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.
Layout tab
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.
Layer
Layer Position (z-index)
If you've selected "modal", "top banner" or "bottom banner" layout, you can define the position of the widget on the z axis in order to manage if you want the widget: on top of everything, under everything or precisely fine-tune its position.
Please read the dedicated article on the matter: Z-index demystified.
Content tab
Title
You will be able to decide to display a title or not. Max. length is 255 characters.
Message
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 widget will contain a clickable button (to close or redirect), if the widget 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.
- "A click on the button closes the widget", you will have to precise a button text. The widget will display a button.
- "The whole widget is a link", you will have to precise 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", well, nothing else is required. The widget will not be clickable.
Style tab
Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
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.
Conditions tab
Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget. Refer to the Widget Condition options article for more information on the available Condition options.
If you want to: edit, duplicate, rename, delete such a widget, please check the Widget Frequently Asked Questions article.
Comments
0 comments
Article is closed for comments.