Open popup using URL parameter

In this tutorial, we will learn how to open a popup using a link. All we will need is a bit of JavaScript code, but it shouldn’t be too hard. For JavaScript code I will use WpCodeBox, but you can use any other code management plugin or you can even add JavaScript code directly on the page using the Code element.

Let’s get started.

First, you need to have a popup created. For this tutorial, I will consider that you know how to create a popup, but if you don’t, Brick’s team has great documentation on it. Make sure to set popup conditions correctly so that it will render on the page you will need it.

Once you have a popup, you must get the popup ID. You do this by going to the list of Bricks templates and there you will see the ID in the shortcode:

As you can see on the image above, my popup is named “Contact popup” and have the id 3879. Write this number down, as we will need it later.

Testing the code

Now that we have this ID, let’s first test if everything works correctly. First, open the page where the popup will open. Not in a builder, but like a normal page. In my case, it’s http://localhost/martejDev/a-page/ Of course, your URL will be different 🙂

Next, open developer tools (F12). We will now try to manually open a popup. In the developer tools console you just write bricksOpenPopup(3879) and press enter. The popup should now open. Of course you need to change the ID, so instead of 3897, you need to change it to yours.

You can also try to close it with bricksClosePopup(3879) and again, you need to change the ID number. When you press enter, the popup should hide.

Preparing the URL

Ok, our page is http://localhost/martejDev/a-page/ (yea, I know, yours is different 😉 )and we want to trigger a popup if there is some parameter. For example, if the parameter showPopup equals myPopup, then we show a popup, otherwise we don’t. The URL to show a popup will be: localhost/martejDev/a-page/?showPopup=myPopup.

Of course you can change both the name of the parameter (showPopup) and the value (myPopup), but then you need to change it also below in the code. You can also have more popups and open them regarding the parameter value, but I’ll let you do this as an exercise (or you can write me, I’ll help you 😉 ).

Coding

Ok, now we have a popup and the URL that will open it. Let’s do the most fun part, the code.

You can use Code element and you can put the code directly on the page, or you can use code snippet plugin. I will use WpCodeBox, but you can use anyone you want. You can enqueue this code using functions.php, it will still work 🙂

Note that the code below is JavaScript code, not PHP.

Below is a full code that you can use. In the code, there are also some comments that will help you understand the code, but if you need help with implementation, you can always contact me and I will try to help 😉

Enjoy!

//when everything loads...
window.addEventListener("load", () => {

    //we get URL paramteres as string
    const queryString = window.location.search;

    //We must parse paramteres
    const urlParameters = new URLSearchParams(queryString);

    //Let's get the value for showPopup
    const showPopup = urlParameters.get('showPopup'); //NOTE: If you have different URL parameter name, then you need to change it here. 

    //If the value is equal to 'myPopup'... 
    if(showPopup === 'myPopup'){ //NOTE: If you will have different parameter value, then change it here.
        //open popup with ID of 3879
        bricksOpenPopup(3879); //NOTE: Change this ID to match the ID of your popup template
    }
    //else, do nothing.
});