How to create a promotional pop-up

A promotional pop-up is an informational window that appears while a visitor is browsing your website. It can be used for important announcements, discounts, and promotions.

To create a promotional pop-up:

1. Navigate to the Forms page.

2. Click on the Promotions tab.

3. Click Create.

4. Name your promotional pop-up

5. Click Save and continue.

6. Choose a template. Take your time reviewing them, as templates include different elements.

7. To edit the blocks within your pop-up, hover over them and click the pencil icon.

8. Use the sidebar on the right to adjust form type, design, and other settings.

9. Once your promotional pop-up is complete, click Done editing to exit the editor and apply some settings to your pop-up.

On the right side of the editor, you can find form type, design, and additional settings that you can use to customize your pop-up.

Form type

Choose the style of your form: centralized pop-up, corner pop-up, or bottom banner.

Design settings

Customize form and content design:

• Form design: Set the background color, border size and radius, shadow; edit close button size and color.

• Content design: Choose header, title, text, and disclaimer color and font; adjust button color, size, and font.

Additional settings

Select image shape, alignment, and manage overlay.

These settings are the rules that determine when and where the promotional pop-up appears.

There are four behavioral factors you must apply settings to:

• Trigger - Choose when your pop-up will appear. For example, five seconds after the page is opened, when the visitor scrolls to 50% of the web page, or when the visitor intends to exit the page.

• Frequency - Choose how often your pop-up appears for the same visitor.

• Schedule - Have your pop-up go live immediately or set a start and finish date.

• Visibility - Choose whether you want to hide your pop-up on specific devices, or hide/show your pop-up on specific webpages.

Once you’re satisfied with your pop-up’s behavior settings, click Save changes to carry on to the next step: installing your pop-up.

When you create a promotional pop-up, it will show on every page of your website by default. However, in your Visibility settings, you can decide whether to have that pop-up show on every page of your website, some pages of your website, or you can choose to hide it on specific pages of your website.

To hide your pop-up on specific pages:

1. Select Hide on specific pages.

2. Copy and paste the webpage URL(s) of the pages you do not want your pop-up to appear on. Paste each URL on its own line.

3. Check the box labeled Apply strict equality to have your pop-up hidden only on pages that match the entered URLs exactly.

To show your pop-up only on specific pages:

1. Select Show on specific pages.

2. Copy and paste the webpage URL(s) of the pages you want your pop-up to appear on. Paste each URL on its own line.

3. Check the box labeled Apply strict equality to have your pop-up show only on pages that match the entered URLs exactly.

You can have the promotional pop-up come up on your website by itself or on a click event.

Displaying the pop-up automatically

You can add the promotional pop-up to your website using a JavaScript snippet or via integration if you host your website on WordPress or Shopify.

Find the detailed instructions here: How to add a form to your website.

Displaying the pop-up on click event

To use the Pop-up on click event feature:

1. Scroll down to the JavaScript snippet section. Here you will find the scripts you need, which should be inserted on each page of your site that you wish to add the pop-up to. Usually, the CMS has a special spot to implement this code and display it on every page.

2. Click Show on click event. Here you'll have access to all the click event JavaScript code. If you want the pop-up to show on a click event, then the JavaScript code must be added.

Choose the type of click event:

• Button: To create a button pop-up, copy the code in the first grey field. Replace the sentence Click here to show form with your own button CTA. The button style is the same as you have set on your website. If you want to change your button, you need to change the design settings on your website.

• Link: Copy the code in the second grey field to show your pop-up whenever a link is clicked. Replace the sentence Click here to show form with your text.

Once you’re done, don’t forget to set your pop-up Status to active: