Create a Dynamic Pop-up Form

A dynamic pop-up is a powerful tool for gaining valuable information about your website visitors such as their email address, name, zip code, etc. It appears automatically to unknown and known visitors either right when the visitor loads the URL on his browser or when he attempts to leave the website (yeap, ContactPigeon platform can identify that).

In the context of e-commerce, pop-ups can be used to offer a discount or a promo code for the next purchase in exchange for the information that the user will provide.

Step.1: Navigate to the Dynamic Pop-ups section from the sidebar menu

How to Choose the Right Type of Pop-up

Step.2: Choose the type of Dynamic Pop-Up you want from the drop-down menu

ContactPigeon editor gives you the opportunity to choose among 3 types of dynamic pop-ups:

1. Email Sign-up Form: Use this type when you want users to fill a form (usually giving their email address). In this case, you have 2 previews, one for the CTA page and one for the Success page.
2. Classic Pop-up: This is a simple case when the pop-up contains a message and a button with a link. You can use this kind of pop-ups for communicating something specific to your audience or navigating users to specific landing pages.
3. Custom HTML: There is the option also to import your custom HTML in order to tailor the pop-ups to the look and feel of your website.

Create a Sign-up Form

Probably the most common type of Pop-ups is the Sign-up Form. You can create such a pop-up easily by performing the following steps.

Step.1: Choose design settings

You can perform various adjustments to the design of the pop-up such as picking the background image of your choice, changing dimensions, color, height etc. 

Tip: for mobile friendly pop-ups, limit the dimensions to Width:300px Height:300px

Step.2: Edit the text in the pop-up

From the subscribe tab you can easily edit the pop-up by changing:

1. The copy that will appear in the pop-up
2. The styling of the copy
3. The CTA button text
4. The email placeholder text

At any time you can preview live all the changes you make in your pop-up on the left part of the editor

How to Preview your Pop-up

At any stage of the creation process, you can preview how the pop-up will look like on your website just by clicking this icon in the bottom-right:

Add or Remove Input Fields

You can easily add or remove fields by going to the Fields tab and activate or deactivate the type of field you want. There is also the possibility to create your own custom fields just by activating the Custom field 1, 2, 3 and giving the respective names.

Choose the Contact List in Which the Emails Will Be Saved

It's very important to have predefined the list you want to save your newly acquired emails. You can create a list under the name "For Popup" where you will save your new contacts (for more info about this check this article ).

 Then move to the Popup settings tab in the editor and from the Contact list, drop-down menu, select the list to which new contact will be saved.

Set up the Trigger Settings

When you're done with the design of the Pop-up and you have created the list to which the contacts will be saved, it's time to set the trigger conditions. ContactPigeon gives you a range of options such as targeting:

  • On Exit - unknown visitors: The pop-up appears to unknown (no email) visitors when the move the mouse towards the exit button of the browser.
  • On Load - unknown visitors: The pop-up appears to unknown visitors when the load a page of your website in their browser.
  • On Exit - known visitors: The pop-up appears to known visitors when the move the mouse towards the exit button of the browser.
  • On Load - known visitor: The pop-up appears to known visitors when the load a page of your website in their browser.
  • Custom rules: You can also create custom scenarios that trigger your pop-ups just by filling the drop-down menus as you see in the photo below:

Please Note: The exit-intent feature does not work for mobile devices.

Last step: Preview, Save and Activate

Last but least, don't forget to preview your pop-up and then just click the "Save & Activate" button on the upper right side of the editor and your pop-up is ready!

Still need help? Contact Us Contact Us