Contents x
    How to Create a Pop-up Form
    • 31 Mar 2024
    • 3 Minutes to read
    • Print
    • Dark
      Light
    • PDF
    Contents

    How to Create a Pop-up Form

    • Updated on 31 Mar 2024
    • 3 Minutes to read
    • Print
    • Dark
      Light
    • PDF
    Article summary

    How to add pop-up forms in Maestra

    You can add a pop-up form using the UI.

    Go to Campaigns → Campaign manager and select a relevant campaign or create a new one for your pop-ups:

    00_popup

    Click Add → Pop-up:

    01_popup

    You need a full integration to be able to work with data from carts or pages visited. To do this, simply follow these guidelines: https://

    Choose a template

    Choose the template that works best for the purpose of your pop-up:

    • Generate leads;
    • Increase conversion & average order value;
    • Notify visitors;
    • Conduct a survey;
    • Custom templates.

    02_popup

    A marketer can customize a pop-up form template (text, position, or size) in Maestra. See more on this below.

    You can find more details on the mechanics and their settings in relevant guidelines.

    General settings

    Go to General settings to select:

    • Endpoint;
    • Days of the week when to show the pop-up form;
    • Pop-up frequency;
    • Priority level of this form over others.

    Here is an example of settings. This pop-up will be displayed each day of the week, but only once during a single user session on a website. This is also a high-priority pop-up form.

    03_popup

    Display conditions

    Select when you’d like to display the pop-up form:

    • when a customer intends to exit a web page;
    • when a customer spent a certain time period on the web page;
    • when a customer has visited a certain amount of pages;
    • when a customer has committed a triggered action on the website.

    Here are settings of a pop up that will be displayed to a customer when 2 web pages have been visited all-time total.

    04_popup

    The web page views and website visits are counted from the moment the pop-up script is set up on the website. So if you set up the script a day ago, views will be counted starting from that day.

    Targeting

    Filter the target audience of your pop-up and set the applicable conditions. You can set up a customer segment in Maestra in advance and decide whether the pop-up form will be displayed to these customers.

    Here’s a sample filter for customers who have at least one purchase. You can set up any other customer segment according to your needs. For more info, please refer to this article.

    05_popup

    What to do once the pop-up form has been filled in by the customer

    There is no need to add any API methods when you add a pop-up through the Maestra interface.

    06_popup

    Create new customer

    Maestra field: the target field in the customer profile in Maestra that you’d like to add the data from the pop-up to.

    Form's field: the source field in the pop-up to export data from.

    Subscription management: a customer will be automatically subscribed to the selected channel or topic.

    Edit the existing one

    Data type: the target field to record data in. You can edit the gender, area, and public custom fields.

    Form field: the source field in the pop-up to export data from.

    Here’s an example of a dialog form setup in which you can create a new customer: enter the name and email, select an email subscription for the News topic:

    07_popup

    You can edit the gender, area, and public custom fields. If a custom field can be edited, this is indicated in Maestra settings.

    Advanced options

    — Transfer events to Google Analytics when pop-up was displayed, filled in or clicked:

    12_popup

    Follow these guidelines to configure the integration with GA.

    — Call webhook:

    13_popup_1

    Set up a webhook call:

    • Custom field key: a variable for data transfer
    • Custom field value: a value exported from the pop-up form.

    The form fields are described above where it is explained how to create/edit customers as well as in the Custom fields section where it is explained how to edit the design of your pop-up form.

    — Call custom JS:

    14_popup

    Insert the code that will run once the pop-up form is rendered, shown, or closed, or when a target action is performed.

    How to edit a template

    This is how the template editing window looks like:

    09_popup

    Here you can:

    1. Save the settings;

    2. Preview your pop-up on the website;

    3. See how various devices will display your pop-up;

    4. Set up your pop-up in the HTML code;

    5. Select a background color, icons, frame size, and sizes of input fields as well as everything else you might need in your pop-up.

    In this window, you can set up individual parameters for every selected form. Parameters include a timer, privacy policy checkboxes, and fonts;

    1. Hide the Settings field to have a full view of a form;

    2. Edit the position of a pop-up on a web page;

    3. Set up the main screen and the screen displayed after a target action;

    4. Write to the Maestra support chat if you have any questions regarding the editor.

    How to preview a pop-up on the website

    Click Form preview Insert your website URL and click it:

    10_popup

    You will see the pop-up on your website:

    11_popup

    If you have any questions, please feel free to contact our support chat.

    What's Next