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:
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 (#):
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:
Copy the embed code from the pop-up that appears, or scroll down the Overview page click the blue Copy button from Installation section:
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!
Having trouble seeing the popup? Your browser may be caching the previous version of your landing page.
