• What is a popup window?
• Make our popup active on the entire website
• How to get the link that opens our pop-up message
• Add the open popup action to a widget
• Get popup window link from browser inspector
• Get the internal link of the popup window from a widget
• Get the internal link of the pop-up window with a plugin
• Configuring our own link to open a popup
• How to apply the obtained link to open the pop-up window
• Apply link to the Text Editor widget
• Applying a link to the text of a post with the Gutenberg editor
• Apply link in WordPress menu
• “It doesn’t work, my pop-up window doesn’t appear.”
• Links of interest

What is a popup window?

A popup is a window that appears (” pops up”) while you are browsing a website. They are used for many reasons, offering discounts, notifications, encouraging subscription to a newsletter, promoting content and others. Click here to see an example of a popup.

But we are not going to extend much more about popups because this topic is not about how to create them but about how we can open them through a link similar to this one:

%3DeyJpZCI6IjE4NDI1IiwidG9nZ2xlIjpmYWxzZX0%

We will also learn in this topic how to configure our popup window to have a link like this: #enlace-popup

“link-popup” is a name invented by us, later we will see how we can set the ID we want to open our popup.

Make our popup active on the entire website

A very important thing to do is to set the condition that our popup window is active on the entire site. Imagine that we add the link in a blog post or in our main menu, if we do not have this display condition may be that in certain parts of our website the popup is not active and does not open. Let’s see how it is done.

1. We open with Elementor the pop-up message.
2. Click on the little arrow just to the right of the Refresh button > click on the Display Conditions option in the pop-up menu.
3. A pop-up window will open with several tabs on the left side, leave the Conditions tab > click on the Add condition button and leave the default condition which is All site.
4. All we have to do now is to save by clicking on the Save and close link or click on the Next button and then on the Save and close button.

Now our pop-up window will be active throughout our website. It is not necessary to configure Triggers or Advanced Rules if you do not need them.

How to get the link that opens our pop-up message

Let’s see three ways to get the link that opens our popup. We must know that each popup has its own link and this does not vary, so once we get it we can use it anywhere on our website, as many times as we want.

Add the open popup action to a widget

For the first two ways we need to add to an Elementor widget the action of opening the popup. We can use any widget that has the link field, in this example we are going to do it with the Button widget.

1. Click on the button to select it.
2. In the Content tab we click on the button Dynamic labels of the property Link > and select the action Popup window.
3. Click on Popup Window > click on All and type the name you have given to the popup, once you start typing it will show matching results, now click on the popup name.
4. Finally click the Update button to save the changes.

Once this is done, the button will be assigned the action of opening the popup and we will be able to get the link through it.

Get popup window link from browser inspector

Once we have added the action of opening the popup window to a widget, in this case a button, we only have to open the page where we have inserted it in the browser and follow these steps:

1. We open the page where the button is in the browser (in this case Google Chrome).
2. Right-click on the > button and click on Inspect from the pop-up menu.
3. From the Inspector we click with the right button on the link that includes the open action, we can distinguish it because it begins with #elementor-action… > click on Edit attribute from the pop-up menu.
4. Now the link will be shaded that means that it is selected and we can copy it by pressing CTRL+C or by right clicking on it > click on Copy from the popup menu.

Now we have the URL that triggers the action of opening the popup. We can paste it into a text file and then copy and paste it and use it wherever we want.

Get the internal link of the popup window from a widget

Another way to get the internal link from the popup window is to copy the link directly from the widget in this case from the button. Let’s see how to do it:

1. Right-click on the button > click on Copy link address
2. We use the notepad to paste the link with CTRL+V
3. We select and delete everything behind #elementor-action…

And we already have the link that opens the popup. The button has already performed its function and we can delete it, this will not influence anything since the link is always the same for that popup.

Get the internal link of the pop-up window with a plugin

We can also install the free plugin Popup Trigger URL for Elementor Pro that you can find in the WordPress repository.

This plugin has only one functionality and that is to add a button to the right of each popup template that when clicked shows you the link that opens the popup so you can copy it and use it wherever you want.

1. Install the Popup Trigger URL for Elementor Pro plugin.
2. Go to Templates > Pop-up messages.
3. In the list of templates you will find the Show URLs button to the right of each one, click on it and a popup will appear with all the available links for that popup message.

To show the popup we only need the first one (Open), but this plugin also provides three more: Toggle, Close and Close (Don`t Show Again).

Configuring our own link to open a popup

We can also customize and shorten the link of our popups, to do so follow these steps:

1. We open the popup in the Elementor builder.
2. Go to the pop-up window settings by clicking on the settings icon in the lower left corner.
3. In the Advanced tab > Open by selector, create an anchor activation link shortcode, example: a[href="#enlace-popup"]
4. Apply this link anywhere on your website by linking to the anchor trigger link (example: #link-popup).

The text #enlace-popup is our choice, we can set the name we want, always without spaces or special characters and preferably in lowercase. Remember to set the popup window display conditions to Sitewide.

How to apply the obtained link to open the pop-up window

Once we have the link we can apply it to any link created with Elementor, Gutenberg or even in the menu of our website. Let’s take a look at some examples.

Apply link to Text Editor widget

1. In the Text Editor we select the text to which we want to apply the popup opening link.
2. Click on the Insert/Edit a link tool (Ctrl+k).
3. Then we press Ctrl+V to paste the link, taking into account that we have previously copied the link with Ctrl+C.
4. All that remains is to click the Update button and test our popup opening link.

Applying a link to the text of a post with the Gutenberg editor

We can apply it not only to a text, but also to a button or any element that supports adding links.

1. We open an entry in the Gutenberg Editor and select the text to which we want to apply the popup opening link.
2. Click on the Link tool Ctrl+K.
3. Then we press Ctrl+V to paste the link, taking into account that we have previously copied the link with Ctrl+C.
4. All that remains is to click the Update button and test our popup opening link.

Apply link in WordPress menu

1. Open the menu from Appearance > Menus.
2. Click on the Custom Links drop-down and paste with Ctrl+V the internal link of the popup and type a name in Link Text.
3. Finally we click on the Save menu button.

Now you know how to apply the popup window opening link anywhere on your website.

“It doesn’t work, my pop-up window doesn’t appear.”

• Checks if the popup window can be triggered by Elementor’s dynamic action link. If it doesn’t activate, then there must be something wrong with your popup settings, not the activation URL.
• Make sure that you have correctly configured the“Display conditions” of the pop-up window. Otherwise, your pop-up window will not appear.
• Make sure you have correctly copied the activation URL into your link.
• Check if there is a javascript error that may be caused by other plugins (see Developer Tools > Console of your browser).
• If you have not set up your own link, the activation URL only works with the tag <a>. To activate the opening trigger, Elementor uses a Javascript code that only detects the link in the <a> tag.

Links of interest

• Plugin Popup Trigger URL for Elementor Pro.