How to open On Load/ On Click /On Hover Popup via the Shortcodes
Shortcodes can be used to open On Load, On Click, On Hover popups on pages, posts, etc.
Shortcodes of the popup can be set on the elements of other plugins as well, if those give a possibility to add shortcodes.
In this tutorial we have chosen to show how to place a popup via shortcode on a website.
First of all, create the popup and choose the appropriate event for it.
In this case, it needs to be either On Load, On Click or on Hover.
We selected On Click event:
From your WordPress Dashboard open the page/post where you want to show the popup and make sure you have switched to the Visual tab:
Click on the Insert Popup:
Select the popup from the list along with the same event, as you selected for the popup from the Events section and click Insert:
Note, you can select the Inherit event as well, which works like this: for example, if you selected on click event for the popup and Inherit event for the shortcode, it assumes, that you selected the same, on click event for the shortcode, since the shortcode event obtains the event chosen for the popup.
Put the Text or the CSS class of the element inside the shortcode clicking which you would like to open the popup and click Publish:
Let's suppose you want to add an Iframe Popup with an On click event. After all adjustments, the following result you will see on your website.
And the result:
Check the steps below on how to add the On Click popup on the button created with the Gutenberg editor.
After inserting the button on the page, click on the mentioned part of the screenshot to open the Show more settings tab.
Scroll down the settings tab and from the Advanced segment, insert the shortcode ( sg-popup-id-15 ), where 15 is the id of your popup, into the Additional CSS Class (es) section.
The logic of creating the On Click popup using shortcodes is the same for all elements created with the editor.
In the article, we showed how to open the popup with On Click event, but the logic is the same for the On Load and On Hover events as well.
Shortcodes of the popup can be set on the elements of other plugins as well, if those give a possibility to add shortcodes.
In this tutorial we have chosen to show how to place a popup via shortcode on a website.
First of all, create the popup and choose the appropriate event for it.
In this case, it needs to be either On Load, On Click or on Hover.
We selected On Click event:
Let's check how this works with the Classic Editor.
From your WordPress Dashboard open the page/post where you want to show the popup and make sure you have switched to the Visual tab:
Click on the Insert Popup:
Select the popup from the list along with the same event, as you selected for the popup from the Events section and click Insert:
Note, you can select the Inherit event as well, which works like this: for example, if you selected on click event for the popup and Inherit event for the shortcode, it assumes, that you selected the same, on click event for the shortcode, since the shortcode event obtains the event chosen for the popup.
Put the Text or the CSS class of the element inside the shortcode clicking which you would like to open the popup and click Publish:
Let's suppose you want to add an Iframe Popup with an On click event. After all adjustments, the following result you will see on your website.
And the result:
It is possible to use shortcodes for On Click popup with the Gutenberg editor as well.
Check the steps below on how to add the On Click popup on the button created with the Gutenberg editor.
After inserting the button on the page, click on the mentioned part of the screenshot to open the Show more settings tab.
Scroll down the settings tab and from the Advanced segment, insert the shortcode ( sg-popup-id-15 ), where 15 is the id of your popup, into the Additional CSS Class (es) section.
The logic of creating the On Click popup using shortcodes is the same for all elements created with the editor.
In the article, we showed how to open the popup with On Click event, but the logic is the same for the On Load and On Hover events as well.
Updated on: 11/04/2022
Thank you!