Pop-up Builder

Create awesome design in a few minutes

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.

medium5.gif


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:

  • Big pop-up is shown in the center of the screen and blocks other objects. It attracts attention the most, but distracts your visitors from what they were doing, so a lot of big pop-ups may be annoying.
  • Small pop-up is shown on the side of the screen and doesn't distract from interactions with website.

1.png

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.

2.png

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.

3.png

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.

Pop-up background

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:

  • Big pop-up 580 px;
  • Small pop-up 350 px.

Unlike the image block, the background fills all the space of the pop-up. You can choose how to lay your image.

4.png

Columns

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:

_____________4_.png

And this one has two columns:

_____________1_.png

Image

Upload your picture and select its layout:

  • Centered
  • Fill;
  • Repeat;
  • Extend.

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).

Screenshot_9.png

Button

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:

  • Click on a link (paste the link in the box below);
  • Close pop-up (if visitors don’t need to perform any more actions or you want to show next pop-up).

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.

5.png

Field with a button

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:

  • Field border color
  • Background Color
  • Field text color
  • Button color
  • Button text color

Field with a big button

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.

6.png

Restrictions and style settings are the same as in a previous field.

Divider

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.

Footer: field with a button

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.

8.png

An example of a big pop-up that scrolls with footer:

Screenshot_16.png

 

Items in a shopping cart

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.  

tempsnip.png

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: 

  • This event never being activated before. You can easily check this by adding an item to cart on your web site. After that an event will be added to your card, and after you reload the page the warning will disappear (important: all the unsaved changes will be lost after you reload the page. So if you made any changes - save before reloading). If a warning still remains you have one of the following options.
  • Event configured wrong. After you added any good to your cart there were no events added to your card. Check your event settings or write down to us - we will help you. 
  • You are creating a custom event “An item added to cart”. Block with products won’t work. You need to reconfigure an event to be collected. There is an instruction how to configure it through WEB API or master of data gathering

______.JPG

Editing the block 

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. 

______.JPG

Configure items in a cart pop-up correctly

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:

  • Leaving the page
  • Second visit
  • User added products to the cart but didn’t proceed to checkout, while still staying on a website. 

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:

  • User added products to a cart (last action) less than [time period].
  • User placed an order (last action) more than or uncertain [time period]. 

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!

 

 

 

Powered by