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.
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 builder as seen here:
As you can see in this example 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 and target your popup. Once you've created your popup 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 #:
Step 3: Adding Your Popup Script to the Landing Page
Once you've set the URL Targeting and Triggers, you can publish the popup and copy the embedding code from the Installation section of the Popup overview near the button of the page. For instructions on how to install the embedding script to your page in a variety of ways, check out this handy guide:
Step 4: Test!
Once you've added the embedding script to your page and published both the popup and page, you can go ahead and test. Here's our example popup in action!