With JetPopup plugin you are able to connect the appearance of the popup with a widget in a few clicks. Let’s learn how to do that!
1 Step — Open the JetPopup settings
Open the page where you would like to place the popup. Choose the widget that will be connected with the popup and click on it with the left mouse button.
Go to the Advanced tab and open the JetPopup section.
2 Step — Do the popup customization
In the Attached Popup field you need to select one of popup templates you created earlier. The Trigger Type option goes right after, and you can specify when the popup is going to be shown on the page.
- Select Click On Button if you want the popup will appear by clicking the button in some specific widgets, which includes it (e.g. JetElements Posts, Animated Box, Pricing Table widgets).
- Click On Widget function allows setting the appearance of the popup when a visitor clicks on the widget.
- Using Click On Custom Selector option you can insert a custom selector from the widget, which will be a trigger for displaying the popup. There are two types of selectors you can use here. The first one is the Class selector. To get it, push F12 keyboard button and copy the selector inside the used widget. When pasting it into Custom Selector bar, put a dot in front of it. The second is a CSS id. It is also copied from the code you see after clicking F12. When pasting this type of selector into Custom Selector bar, put a hash symbol in front of it.
- Enable Hover option if you want the popup will emerge by hovering on the widget.
- Scroll To Widget option lets to show the popup when a visitor scrolls to spot where the widget is located.
Great! Now you know the function of each trigger type of JetPopup plugin.