How To Show a Popup From a Button Click

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 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 Classic Builder and Smart Builder landing page. 

How To Show a Popup From a Button Click in Classic Builder

Step 1: Finding Your Buttons Element ID

Every element within the Unbounce Classic Builder is assigned an element ID. To find this ID:

1. Click the button in Classic Builder.
2. On the right-hand side of Classic Builder, scroll down the Properties panel.
3. With the Element Metadata section, you will see the ID of the button:
   

In the example above, the ID for this button is lp-pom-button-14. Remember that different pages with different buttons have other element IDs. 

Copy or remember the button ID, as you'll need it when setting up your popup. 

Step 2: Targeting Your Popup To The Button

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

1. Create and style your popup
2. Navigate to the Trigger section of the Popup overview.
3. 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 (#):
   
4. Finalize your popup Target and Frequency settings. See this article to learn more: Creating a Popup in the Unbounce
5. Next, click Publish from the top of the Overview to publish your popup:
   
6. Copy the embed code from the popup that appears, or scroll down the Overview page and click the blue Copy button from the 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.

Once you've added the embed code 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. 

Try testing your popup within an incognito window, or refresh your cache. 

How To Show a Popup From a Button Click in Smart Builder

Step 1: Finding Your Buttons Element ID

Locate your element ID in Smart Builder

1. Navigate to your page in Smart Builder. 
2. Click on the button you want to launch a popup.
3. Next to the. button, you'll see it's unique ID; in this example, the button ID is button-236:
   
   
4. Copy this ID.

Step 2: Targeting Your Popup To The Button

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

1. Scroll down to the field titled 'When a visitor clicks an element with.'
2. Paste your button ID into the field preceded by a number sign (#):
   
3. Finalize your popup Target and Frequency settings.
   • See this article to learn more: Creating a Popup in the Unbounce.
4. Publish/save your popup. 
5. Copy the embed code from the popup that appears, or scroll down the Overview page and click the blue Copy button from the Installation section:
   
   

Step 3: Installing your popup embed code in Smart Builder

For the popup to show in Smart Builder, you must install the embed code. 

1. Navigate to the Appstab on the left-hand side of Smart Builder.
2. Search and locate the Popups and Sticky Bars App.
3. To install the app, click the plus button next to Popups and Sticky Bars.
4. In the blank field that appears, input your unique popup/sticky bar embed code:
   

And that's it! Be sure to Save your landing page to finalize these changes.

Step 4: Changing the link settings for the button in Smart Builder 

1. Navigate to your page in Smart Builder and find the button you want to launch with a popup.
2. Single-click the button, then click Link Settings .
3. Select Section from the Link to options. 
4. From the Select Section drop-down menu, choose None:
   
   
5. Click the X button at the top to close the Link Settings  window. 

Save and publish your page, and you're all set! Launch your live page, and click the button for the popup to appear:

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

Try testing your popup within an incognito window or refresh your cache. 

Trigger a Popup for Multiple Buttons on Your Page

Say you want several buttons on your page to show the same popup. 

You can update the trigger settings in the popup overview page to add multiple button IDs. 

1. Navigate to the Trigger section of the popup overview.
2. Scroll down to the field titled When a visitor clicks an element with. 
3. Change the drop-down to Selector.
4. Add the different button IDs from your Smart Builder or Classic Builder page - with a number sign # - separated by a comma:
   
5. Publish the changes made to the popup.

Now, when you visit your live landing page, clicking the buttons will trigger the popup on your page: