How To Show a Popup From a Button Click

Follow

Having a popup fire from a button click can be a handy way to pass on an important message, provide added content or even have two forms on one landing page!

With the added flexibility of our popups targeting, this can be a great option as an alternative to our lightbox feature.

This article will show you how to target a popup to a specific button element and embed it on a landing page, using the Classic Builder.

Step 1: Finding Your Buttons Element ID

Every element within the Unbounce Classic Builder is assigned an Element ID when created. You can find this ID by clicking the button and scrolling down on the right-hand side of the Classic Builder as seen here:

Annotated image of Classic Builder showing where to find element IDs

In the example above, the ID for this button is lp-pom-button-14. Keep in mind different pages with different buttons will commonly have different element IDs. 

Step 2: Targeting Your Popup To The Button

The next step is to create, target, and publish your popup.

Once you've created your popup and styled it to your liking, you can move to the Trigger section of the Popup overview.

Scroll down to the field titled 'When a visitor clicks an element with.' Paste your button ID into the field preceded by a number sign (#):

Annotated image of Classic Builder showing how to target a popup on button click

Finalize your popup Target and Frequency settings. See this article to learn more: Creating a Popup in the Unbounce.

Next, click Publish from the top of the Overview to publish your popup:
Publish button at the top right-hand corner of the Popup overview.

Copy the embed code from the pop-up that appears, or scroll down the Overview page click the blue Copy button from Installation section:
Annoated image if Copy button highlighted in a red box.

 

Navigate back to the Classic Builder. 

Step 3: Adding Your Popup to the Landing Page

For instructions on installing the embed code to your page, check out this handy guide: Installing Your Popup/Sticky Bar into the Classic Builder.

Step 4: Test!

Once you've added the embedding script to your page and published the page, you can go ahead and test. Here's our example popup in action! 

Gif demonstrating a button triggering a popup

Having trouble seeing the popup? Your browser may be caching the previous version of your landing page. 


Do you agree or disagree with this statement: This article helped me find the information I needed quickly and easily.

Select an option and leave us some feedback in the comments:

Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply