Skip to main content

Add a page or form as a popup on a site

Use popups to grab attention, reward engagement, and turn visitors into subscribers.

Gareth Burroughes avatar
Written by Gareth Burroughes
Updated today

There are two ways to use surveys, pages, and forms within your existing site:

You can also publish a survey, page, or form independently on the Dotdigital hosting domain, or a custom domain that you’ve purchased.

Learn how in Publish a survey, page, or form.

Popups are a great way to highlight a page or form on your site without embedding it directly into the content. They appear over the webpage, helping you drive engagement, collect data, or promote offers.

Before you start

Things you need to know:

Publish as a popup

  1. Go to Content > Surveys, pages, and forms, and select the page you want to add as a popup on your site.

  2. Select PUBLISHED PAGE button, at the top-right of the page.

  3. Under Generate embed or popup code, select GENERATE POPUP CODE.

Display settings

You have access to a variety of options to give you fine control over the behaviour and appearance of the popup. For example, you could use an Exit intent trigger to display an offer or incentive to a visitor about to leave your site, or you could use a Scroll depth trigger to show information about a relevant event to particularly engaged visitors.

Triggers

To set the criteria or action which triggers the popup to display, expand the Triggers drop-down menu and select from:

  • Scroll depth
    Enter the percentage of the page that the visitor must scroll to for the popup to display.

  • Time spent on page
    Enter the time in seconds after which the popup should display.

  • Pages visited

    1. Enter the number of pages that must be visited for the popup to display.

    2. Enter the time in seconds after which the popup should display once the required number of pages have been browsed.

The Pages visited rule applies only to pages on your site that the script can track. For manual publication of the script, this is any page where the script is present.

For publication through the Dotdigital Tag, this is every page of your site except for any exclusions you set when you publish the popup, if using URL rules.

Learn more in the section Publish.

  • Exit intent
    The popup displays once the visitor moves their cursor towards the page’s close button.

Display rules

Before you start

These settings are cookie-based, so if a user clears their cookies, or accesses the webpage from a new browser or device, the settings won’t apply.

Select the switch for any rule you want to enable to set the status to On.

Available rules:

  • Unidentified visitors only
    Only show the popup to visitors who are not already known contacts in Dotdigital.

  • Show again if submitted
    Display the popup again to visitors who have already submitted it.

  • Show again if dismissed
    Display the popup again to users who have dismissed it without completing it. Enter the number of days to wait after the dismissal to show again.

You can also set the width of the popup in this section. Enter the width in pixels for the popup container.

Default width is 600px.

Accessibility

We provide a number of options to help you ensure that your popup meets accessibility standards, and is suitable for visitors using assistive technologies.

Learn more in Create accessible surveys, pages, and forms.

  1. Enter a text value into the Accessibility label (ARIA) field.
    ​An Aria-label is a text value that screen readers can access to inform users what a particular element on a webpage is.
    ​

  2. Select the switch for the following settings to set the status to On:

    1. Screen reader support
      Amends the web page source code to instruct screen readers to ignore main page elements when the popup is displayed.

    2. Show on mobile devices
      Allows the popup to display on phones and tablets.

    3. Close with 'Esc' key
      Allows the popup to be dismissed by pressing the Esc key on a keyboard.

Publish

We automatically generate the code required to power your popup. For any amendments to the popup settings that you make, the code snippet is automatically updated.

You have two options for publishing the popup.

If you’re using the Dotdigital Tag on your site, then you can instantly publish the popup without needing to involve your development team or agency. You can choose to publish on all pages of your site, or you can create a rule based on keywords in the page URL to specify only certain pages.

Otherwise, you can copy the code snippet we create for you, and manually add it to the required pages of your site.

Publish with the Dotdigital Tag

Before you start

  • You must already have installed the Dotdigital Tag on your site. Learn how in Add the Dotdigital Tag to your website.
    ​Once you have enabled the Tag on your site, you must wait for 1 hour for the forms script loader to be added in order to publish your popup.
    ​

  • If you want to specify which pages of your site the popup appears on, you can use URL rules. These rules work by adding keywords that page URLs must match in order for the popup to display. Keywords can be partial or full matches to the URL of a page.
    ​
    For example, to target https://www.example.com/request-a-demo you could add a Contains rule and use the full URL as your keyword. To target both https://www.example.com/request-a-demo and https://www.example.com/demo-feedback you could use the keyword demo to target both pages — and any others containing demo.

  1. Select Go live on your website instantly.

  2. Expand the Website name drop-down menu and select the name of the website you want to publish to.
    ​This is the profile name you added when you configured the Dotdigital Tag for your site.
    ​

  3. Expand the Shows drop-down menu and select from:

    1. On all pages
      Displays the popup on every page of your site, according to the display settings you’ve applied.
      ​

    2. Based on URL rule

      1. Expand the operator drop-down menus to set your page criteria.
        Available operators:

        • Contains

        • Does not contain

        • Is equal to

        • Is not equal to

        • Starts with

        • Ends with

        • Matches wildcard
          ​

        You can then select the grouping rule for the keywords you specify:

        • All of
          URL must contain all specified keywords.

        • Any of
          URL must contain at least one of the specified keywords.
          ​

      2. Enter the keyword you want use in your rule in the text field. To add another keyword, select ADD MORE.
        ​

  4. Select PUBLISH NOW.

When you publish a popup through the Dotdigital Tag, you don’t need to re-generate or re-add the script if you make changes to your form. Just republish the page and the updated version is automatically pushed to your site.

Publish manually

  1. Select Manual publish.

  2. Select COPY CODE TO CLIPBOARD.

This code can then be pasted onto the desired pages of your site.

If you make changes to your form, once you republish the page you must copy the updated code snippet and replace the old snippet on your site with it.

Related Articles
Add an email signup button to your Facebook page
Add a page or form as a pop-over with BigCommerce
Add a page or form as a pop-over with Shopify
Embed a survey, page, or form with BigCommerce
Embed a survey, page, or form with Shopify
Did this answer your question?