How to use the same on-click pop-up box for multiple elements

Please note that the snippets in this article will only work for pages using the new and improved page generator, the Thor Rendering Engine. We recommend testing the snippet functionality in case your page was created before 2019 or duplicated from an older page, as the two render engines have a different code structure in the backend. To migrate your older pages to the new Thor Rendering Engine, you can contact our support team at help@instapage.com.

If you plan on adding the same pop-up to your page multiple times, you can actually trigger that very pop-up upon a click-event on different elements of your choice. This means that you won't have to create the pop-up multiple times!

How do I trigger the same pop-up multiple times?

First you will need to create the pop-up on one of your elements in the builder. Click on your desired image, button or text element, then choose Click Event and select Pop-up. Create the pop-up normally and then save it. 

Once you are satisfied with the way the pop-up looks, paste the following code snippet under Settings > Javascript > Head.

After you have added the code, make sure that you customize it with the appropriate element IDs that refer to your buttons. You will need to change the element ID of the original button, the one that hosts the pop-up, and then also the element IDs of the other buttons, that you want to open the same pop-up. Please watch the video below to see exactly what needs to be changed and how you can find the element IDs.


 

In case you need help with a custom functionality or any code customization that is not provided through our Help Center articles we have a Professional Services team that can help our Enterprise users. The Enterprise Solution includes Professional Services as well as additional features and services that can be seen here: https://instapage.com/enterprise-benefits