Pop-up builder allows to create nice looking pop-up windows that will attract every website visitor and are likely to encourage them to interact. You can add text, fields, buttons and images to your pop-up as well as backgrounds and columns.
And it's fast, without developers and designers.
To create a pop-up, go to Auto section -> Auto messages and press "Create auto message". When on the step "Form and content" choose Pop-up builder and choose what size do you want it to be:
You see available blocks to add to your pop-up on the left and they way your pop-up will look like on the right.
Click on the block to add it to a pop-up. To exit the editing mode press a dash.
If several blocks are added, you can edit each of them by clicking on parts of the layout on the right (except for the preview mode).
Active blocks are highlighted brighter and framed. To see how the pop-up will look on a website, click “Pop-up preview”. You can also remove blocks and move them relative to each other.
Most of the blocks have a “Style” tab in addition to the Content, where can select the background colors of a pop-up/button/field and other appearance settings.
Go to the pop-up settings and set the background image or select a color.
The height of the pop-up depends on the number and height of the blocks, and the width depends on the type of the pop-up:
Unlike the image block, the background fills all the space of the pop-up. You can choose how to lay your image.
In a large pop-up, content can be placed in one column or two. Select the composition you want to use. A new block will be added to the last active column. Move them using the buttons (in addition to the "higher" and "lower", you will be able to move them "left" and "right").
This is a pop-up with one column:
And this one has two columns:
Upload your picture and select its layout:
The width of the block is fixed, but you can choose its height (100 px by default).
If you selected a centered image and it turned out to be small, correct the height of the block (almost certainly this will fix the problem).
You can add any number of buttons to a pop-up. This is convenient if you want to offer customers a choice or play a game with them.
For each button, you have to select the action that occurs after clicking on it:
Important: Set a different event for each button in order to record them into a visitor card (use them for segmentation as triggers for message chains and building funnels).
You can create new events, for example, "5-10 team members" or "Clicked on answer 5" or choose one event from those you already have.
This is especially important in the case of several buttons in a pop-up, because this is the only way to separate clicks from one another. In case of a single button, you can choose an event for the button (we recommend this option) or set "Events for message chains" on the last step of auto-message settings.
You can insert the field where there's a button on the right. Any information can be put there: emails, telephones, short answers and everything else that comes to mind.
Important: it is necessary to select a property to where information from the field will be recorded. You can select from existing properties (for example, "email" or "phone") or create new ones (for example, "review"). Properties are required for segmentation, as well as for message personalization.
After adding the “Field with a button” block, other blocks with field insertion will not be available: “Field with a big button”, “Field with a button” and “Footer: field with a button”, since there can be only one type of field in a pop-up.
In the Style tab you can customize the block and change the following colors:
This block is perfect because you can create an unlimited number of fields in it. Information from all fields will be recorded simultaneously after the button clicks. Create questionnaires (for example, name, phone, email), and record the information from each field to a separate lead property.
Restrictions and style settings are the same as in a previous field.
This is an empty block which height can be adjusted. It is convenient to use it to separate some objects from others or to regulate top and bottom fields of a pop-up.
The footer contains only one field with a button and is located on the bottom of a pop-up, under the dividing line. You cannot insert blocks below the footer.
If you make a long pop-up that scrolls, the footer will be located on the bottom and will not scroll.
An example of a big pop-up that scrolls with footer:
You may set a reminder for your visitors about goods they have added to their cart to increase conversion to checkout. If you’re using system event “Added to cart”, just add a block with goods from a chart into a pop-up. We’ve added this block as an example for you to get the idea how would it look like. When you will launch pop-up on your website, your user will see those goods which he added to his chart, not the one you see in example.
Info about the goods in a cart will be achieved from from a system event $cart added. If an integration with CMS (InSales, Bitrix, Opencart, Wordpress) is set, this event will be collected automatically and you can easily integrate this block into your pop-ups. If you set up data acquiring yourself, you need to check if there is a system event is being collected, or the custom one.
If you see a warning that your event doesn’t work, there are few possible reasons for this:
You can change design of the block. Choose the number of products can be shown in a pop-up, 30 max. The latest added to the cart will be put in there. If user have lesser number of products he will see all of them in a pop-up. It’s important to remember that after a certain level of height a scroll will appear in a pop-up. That’s why we prefer choosing a lesser number of products to avoid this.
Choose a currency displayed on a price tag. If the currency you are looking for not presented in the list, then pick “Another currency” and type it’s name.
On a “Style“ tab you can change the colour of the buttons and text (name and price). Product pictures would be those you are sending to an event.
It’s important to remember that a pop-up with this block can only be shown to users who added any product in their cart, or they will see an empty pop-up. So let’s find out how to create automessage correctly.
The easiest way is to use presets.
Decide when do you want to show pop-up.
Here are some popular triggers:
Due to the trigger choose a time out (when user is trying to leave the site pop-up should be shown immediately, in other cases there could be a delay).
In the target audience settings you need to set following points:
For example, last time a product user added a product less than 30 minutes and a last order is being made more than 3 days ago - this means , that he definitely have products left in his cart. If you want to catch users during their next session, you can increase time period, for a week for example. Anyway, it’s important, that an event a product been added after an order or order as an event wasn’t made at all (“More or undefined” filter to use in this case).
We recommend to test pop-up on yourselves before launching, to be sure, that all the goods are placed correctly. You can do so by adding your e-mail in a user characteristics or in it’s card. Then test all the triggers and conditions and check how the pop-up looks like.
Good luck with your creations!