help center

Add a pop-up

Pop-ups could skyrocket your conversion rates in no time. Discover how to add them to your website step by step with the help of this article. We’ll take you through every part of the process from implementation to design.

light-bulb-shine

This article will teach you:

  • How to add a pop-up
  • When to trigger a pop-up
  • How to style a pop-up

The first step is to create and edit a case in your editor. If you don’t know how to do this, you can follow this article about how to Add a case .

  1. Once the editor has loaded you’ll have to click the + button to add an element to your page.
  2. After clicking the + button you’ll get a complete overview of all the elements that can be added to your page. Drag the Popup button to the page to activate it.

    alert-trianglePlease note that you have to drag the button instead of just clicking it.

The next step is to choose the position of the pop-up on your page. Once you’ve done this, you’ll be able to decide what triggers it.

  1. If you select the Initial trigger, your pop-up will immediately show itself from the moment your visitor lands on your page.
  2. Page Scroll gives you the option to trigger a pop-up once the visitor has scrolled a certain amount on your page. If you set it at 30 for instance, the pop-up will be triggered from the moment someone has scrolled 30% of the page.
  3. Visit Time allows you to show a pop-up after a certain amount of time a visitor has spent on the page.
  4. If you select the Amount Of Visits trigger, you’ll be able to decide how many times a visitor has to return to your page before seeing the pop-up.
  5. Exit Intent is the practice of showing a pop-up when someone is about to leave your page. The pop-up will be triggered from the moment your website senses a movement to the exit button or when a visitor is about to close the page.

After determining what triggers the pop-up you’ll have to decide how at what frequency it has to show itself to your visitors.

Next up: completely tailoring the layout of it. Our editor enables you to add or delete elements, customize and style them.

In this case let’s focus on redirecting people to our blog:

  • We’ll first add elements like a blog banner and a heading.
  • Once we’ve done this, we can drag the items in the right order for the pop-up.

This is what our layout looks like right now.

  1. Once you’ve chosen all the elements you wanted, you can start with customizing every element by clicking the gear tool right next to it.

The settings are quite straightforward, the styling, however, might be a little tricky. Let’s dive deeper into this.

alert-triangle

Please note that if you would like to use your own pictures they have to be part of your media library. If you don’t know how this works you can read it in this article on how to add a media library .

Every element has 5 key styling options:

  1. Background allows you to choose a specific background color or image to spice up your element.
  2. Typography allows you to change fonts, font sizes, color and so on. This enables you to match the design with the rest of your website.
  3. Decorations enables you to add borders to your element and change the radius of it. You can also add a shadow to your element in this part of the editor.
  4. Dimensions gives you the option to change the width and height of your element. Another feature of this part of the styling is the option to customize the padding and margin of your element.

    Padding enables you to change the position of for example the text of a certain element within the text area itself.

    Margin on the other hand enables you to change the position of the complete element compared to other elements in the pop-up.

  5. Position lets you decide the position your element towards other elements. A static position keeps the element in its place while an absolute position moves is to the back and puts the other elements on top of it. We recommend using static positions for elements in a pop-up.

Once you have finalized all your element settings you have to press the finish button and you’ll be able to change the styling of the pop-up itself.

alert-triangle Please note that you have to click the pop-up you created to access the options on the left.

  1. Clicking the styling button brings you to the part of the editor where you can start customizing the dimensions of the pop-up itself instead of the separate elements.

The styling of your pop-up works the same way as the styling of all your elements earlier before.

When you’re ready with the styling of your pop-up container, you can add it to a journey and start driving your visitors in the right direction for conversion!