Create Pop-Ups

Pop-up creation includes setting the rules that determine who sees the pop-up—and when these contacts see it—in addition to designing the pop-up. Pop-up activation settings determine where your pop-up displays.

About this task

There is no difference in the process for creating a mobile pop-up versus a normal pop-up. The best practice is to use the appropriate design principles for each. For example, the width of a mobile pop-up should be targeted for mobile devices.

After a pop-up is created, it must be activated to be displayed on your site. There is no limit to the number of pop-ups you can create. You can have four active pop-ups and two active ribbons at a time if you are using A/B testing.

Procedure

  1. Go to Contacts > Grow > Pop-Up Manager.
  2. Click Create Version.
  3. Enter a name for the pop-up in the Name box.
  4. Select whether you want a normal or mobile template to start with from Template list.
  5. Click Create Version.
  6. Click the Configuration tab.
  7. Configure pop-up's display settings:
    1. Click Display Triggers.
    2. In the Display Pop-Up After section:
      • In the Visits box, enter the number of times you want a contact to visit the site before seeing the pop-up.
      • In the Clicks box, enter the number of clicks you want a contact to make if you want to delay the pop-up until after a contact clicks a page.
      • In the Seconds box, enter the number of seconds if you want to set a time-based delay.
    3. If you want the pop-up to only display on certain areas on your site, specify the path in the Include URL Paths box.

      You only need to provide the path on the domain or subdomain you specified in your configuration settings. Offset multiple paths with a comma. For example, you might want a pop-up only to appear on your product pages, so you would include /product/ here. Any page with product in the path would now show the pop-up.

    4. If you want to prevent the pop-up from being displayed on certain pages, enter the paths in the Exclude URL Paths box.
  8. Configure pop-up's cookie settings:
    1. Click Cookie Policies.
    2. Select whether you want your cookies to be associated with the domain or with the pop-up using the Cookie Uniqueness list.

      Pop-up Manager uses this cookie to determine whether the activated pop-up is displayed. The default behavior is Domain setting, which writes the cookie for the entire domain so multiple activated pop-ups use the same cookie. You may decide that multiple pop-ups need to be displayed at different times on the same domain, and that's when you would use the Pop-up setting.

    3. Enter the number of days you want to pass before a contact sees a dismissed pop-up again in the Display Again X Days After Opt-Out box.
    4. Enter the number of days you want to pass before a contact will see the pop-up again after providing information in the Display Again X Days After Opt-In box.

      You can use Display Again X Days After Opt-In when you want to use variations of the same pop-up for seasonal campaigns.

    5. If you also use conversion tracking, you can indicate whether you want this pop-up to display if the conversion tracking cookie is present. Select Yes or No from the Display If Bronto Cookie Present? list.
    6. If you want to create a submission cookie, select Yes from the Create Bronto Cookie After Submission? list.
  9. Configure the platform settings:
    1. Click Bronto Settings.
    2. Select the status you want contacts who submit the pop-up to be given in Bronto from the Add Contacts With The Following Status list.
    3. Select the lists to which to add contacts:

      By default, all lists that you select are added to Master List For when you save your pop-up settings.

      • Master List For contains contacts who submit any pop-up.
      • List For Version contains contacts who submit this pop-up.
      • List For A/B Testing contains contacts who are part of an A/B test of this message.
      • Other List is a random list you can add contacts to when they submit the pop-up.
    4. If you want to pass any additional contact data to Bronto, select a contact field from the Set Hidden Field list and enter the field value in the Hidden Field X Value box.

      For example, if your pop-up is related to baseball you might want to select the contact field Sport and enter baseball in the Hidden Field Value box. This populates baseball into the Sport contact field for any contact who submits this pop-up.

  10. Click the Design tab to design your pop-up.
    Each pop-up has a main page and a confirmation page that you can style. The template you selected provides a baseline pop-up that you can customize.
  11. Click Background and design the background for your message:
    1. Use Canvas Width and Canvas Height to adjust the size of canvas the pop-up is on.

      You can use the canvas to place the close button for the pop-up outside of the pop-up's design.

    2. Use Width and Height to adjust the size of the pop-up.
    3. Use the Border settings to design a border for the pop-up's body.

      If you do not want a border, set this to 0.

    4. Use Border Radius to control whether your pop-op has rounded edges.
    5. To include your logo, click the Logo Image folder icon and upload your logo.

      You cannot adjust the size of the logo once it is uploaded, so do any image editing outside of Pop-Up Manager before uploading an image.

    6. Either select a background color from the Background Color list or upload a background image by clicking the Background Image folder icon and upload your image.

      If you uploaded a background image, set how you want the image to be displayed using the Background Image lists.

  12. Click Text Elements to add and design the text used in the pop-up:
    1. Highlight the text currently in the Title box and replace it with the new text you to be the main text in your pop-up.
    2. Ensure that the text is highlighted then use the formatting options in the banner of the Title box to style the text.
    3. Highlight the text currently in the Subtitle box and replace it with the new text you to be the secondary text in your pop-up.

      Having subtitle text is optional.

    4. Ensure that the text is highlighted then use the formatting options in the banner of the Subtitle box to style the text.
    5. To reposition the text, click the text in the canvas and move the text around.
  13. Click Input Fields to configure and style the input boxes for the pop-up.

    Email is always provided as a default input field because it is required, but you can add other input fields as needed.

    1. If you want to add more input fields to your pop-up, click the plus button, select the field from the list of fields, and click Add Field.
    2. To style a field, verify that the field is selected in the Selected Input list.
    3. To change the default text, enter new text in the Contextual Text box.
    4. Use Width and Height to adjust the size of the input box.
    5. Use the Font options to style the input text.
    6. Use the Required box to indicate whether your new field must be filled out before the form is submitted.

      Optionally, include a default value to pass to Bronto if the input field is left blank in the Default box.

  14. Click Preferences to add and configure an opt-in check box for marketing messages.
    1. Select Yes for Add Checkbox? to have a check box appear on your pop-up. Customers are required to check the box to successfully submit the form.
    2. Select Yes for Checked By Default? to have the check box automatically checked when the pop-up loads.
    3. Add a Label that displays next to the check box.
    4. Use Label Font to customize the display of your Label text.
    5. Add an Error Message that displays when a customer tries to submit the pop-up without checking the box.
    6. Use Error Message Font to customize the display of your Error Message text.
  15. Note: The submit button is grayed out by default until a contact enters a valid email address.
    Click Submit Button and design the pop-up's submit button.
    1. To change the default text, enter new text in the Text box.
    2. Use Width and Height to adjust the size of the button.
    3. Use the Border settings to design a border for the button.

      If you do not want a border, set Border to 0.

    4. Use Border Radius to control whether your pop-op has rounded edges.
    5. Use the Font options to style the button text.
    6. Use Background Color and Hover Background to set the button's colors, or use Background Image and Hover Background Image to use images for the button.

      If you use images, you might not want to also use button text.

  16. Click Close Links and design the pop-up's close button and text.
    1. Select the design for the close button from the Icon Style list.
    2. If you'd like to include a link someone can click to close the pop-up, enter text in the Link Text box.

      If you provide link text, style the text using the Link Font options.

  17. Click Confirmation Page to configure what happens when the pop-up is submitted and design the pop-up confirmation page.
    1. Select what you want to happen when the pop-up is submitted from the Behavior list.
      • Close Pop-up after submission removes the pop-up and does not display anything else on the page.
      • Redirect to a specified URL opens the provided URL in the same window.
      • Display HTML Content Within Pop-up displays a confirmation pop-up that can be dismissed.
    2. If you selected Redirect to a specified URL, enter the URL in the URL box.
    3. If you selected Display HTML Content Within Pop-up, style the confirmation pop-up using the same type of options you used to style the main pop-up.
  18. When you are happy with the pop-up design and settings, click Save & Close.