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.

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:

Annotated image of Classic Builder showing where to find element IDs

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 #:

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

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:

Installing Your Popup/Sticky Bar 

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! 

Gif demonstrating a button triggering a popup