Create pop-up calls-to-action (CTA) (BETA)

Last updated: January 17, 2023

In Beta

Applies to:

Use the pop-up calls-to-action (CTA) tool to create banners or pop-ups to add to your HubSpot pages and attract new visitors. Then, drive traffic by directing visitors to specific pages, meeting links, or external URLs.

Design your pop-up CTA

In the pop-up CTA editor, customize your pop-up CTA's design to attract visitors.

In your HubSpot account, navigate to Marketing > Lead Capture > Pop-up CTAs.
In the top right, click Create.
You can create a new workflow from scratch or from a template:
- To create a new pop-up CTA from a template, in the right panel, click HubSpot Templates. Then, select a template that matches your goals.
- To create a new pop-up CTA from a scratch, in the right panel, click Start from scratch. Then, select Sticky Banner or Pop-up box.
  - Sticky Banner: a permanent banner fixed to the top or bottom of your page. The banner will remain as visitors scroll through your page.
  - Pop-up box: a pop-up box that appears on a set schedule.

In the left panel, from the Add tab, add elements and edit the layout for your pop-up CTA:
- To add more content to your pop-up CTA, click and drag a new element directly into the right panel of the calls-to-action editor.
- To modify your pop-up CTA's layout, hover over an element and click and drag it to a new position.
- To duplicate the element, hover over the element and click the duplicateclone icon.
- To delete the element, hover over the element and click the deletetrash can icon.
- To edit an element, click the element. In the left panel, you can edit the content and design of the element.

TW - CTA

In the left panel, click the Content tab to manage your elements.
- To edit an element, click the name of the element. In the left panel, you can edit the content and design of the element.
- To delete an element, hover over the element and click the deletetrash can icon.
In the left panel, click the Design tab to customize and preview your pop-up CTA.
- To customize the appearance of your pop-up CTA, click Sizing, Layout, Styles, or Background. Then, configure your changes in the left panel. For sticky banner type calls-to-action, you can select a top or bottom position.
- To preview your pop-up CTA on specific pages, click the Preview on specific page dropdown menu and select the HubSpot page to preview the pop-up CTA.

Customize where and when your pop-up CTA displays

After setting up your pop-up CTA, target visitors by choosing when you want this pop-up CTA to appear on your site. Add filters to combine multiple sets of rules about which visitors see your pop-up CTA. Learn more about targeting rules.

Website URL

You can add conditional logic for specific webpage URLs and/or query parameter values. By default, the pop-up CTA will appear on all pages.

At the top, click the Targeting tab.
To show the pop-up CTA when a visitor is on a specific website URL, in the Website URL section
- Click the first dropdown menu and select Website URL.
- Click the second dropdown menu and select a targeting rule.
- Enter your rule criteria in the text field.

To show the pop-up CTA when a visitor is on a website page whose URL includes specific query parameters:
- Click the first dropdown menu and select Query parameter.
- In the first text field, enter the query parameter name.
- Click the dropdown and select a targeting rule.
- In the second text field, enter the query parameter value.

To add another rule, click Add rule.
To exclude the calls-to-action from certain pages (e.g., a privacy policy page), click Add exclusion rule.

Visitor information and behavior (Optional)

You can also target your pop-up CTA to specific contacts based on known visitor information and behavior. The type of filtering rules you can add depends on your account's subscriptions.

- In the Visitor information and behavior (Optional) section, click the first dropdown menu to choose when visitors see your pop-up CTA.

- Click the next dropdown menu to select your filtering rules.
- To add more rules for when to show your pop-up CTA, click Add rule and select your filters.

Select when to hide the pop-up CTA:
- Click Add exclusion rule.
- the first dropdown menu to choose when the pop-up CTA should be hidden.
- Click the next dropdown menu to select your filtering rules.
- To add more rules for when to hide your pop-up CTA, click Add exclusion rule and select your filters.
To create another set of filtering rules, click Add filter group and select your filtering rules.

Activation triggers

Select an activation trigger to determine when the pop-up CTA will display on your page. The pop-up CTA will appear once the first selected trigger is met.

In the How/When section, select the checkbox next to the activation triggers that you want to use:
- On 50% page scroll: the pop-up CTA will appear when the visitor has scrolled halfway down the page.
- On exit intent: the pop-up CTA will appear when the visitor moves their cursor to the top bar of the browser window.
- After elapsed time x seconds: the pop-up CTA will appear after the specified amount of seconds.
- Trigger on button click: the pop-up CTA will appear when a visitor clicks a button.
  - To set up your trigger on an external page:
    - Under the Trigger on button click section, click Code snippet.
    - In the dialog box, click Copy.
    - Paste the embed code as the href in your button on your external website.

- - To set up your trigger on a HubSpot page:
    - Select a button module on any HubSpot page.
    - In the left panel, click the Link to dropdown menu and select Call-to-action.
    - Click the Call-to-action dropdown menu and select an existing call-to-action.
    - Continue setting up your button module.

Customize your pop-up CTA options

On the Options tabs, customize the option to display your pop-up CTA on small screen sizes or not.

At the top, click the Options tab.
In the Small screen sizes section, toggle the switch off to hide the pop-up CTA on small screen sizes.

Publish your pop-up CTA

Once you've finished setting up your pop-up CTA, publish your pop-up CTA to take it live.

In the top-right, click Review and publish.
In the right panel, review your pop-up CTA, then click Publish now. The pop-up CTA will be automatically published to the targeted pages.

Was this article helpful? Yes No

This form is used for documentation feedback only. Learn how to get help with HubSpot.