{"id":33524,"date":"2025-03-28T10:36:00","date_gmt":"2025-03-28T10:36:00","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=features&#038;p=33524"},"modified":"2025-03-28T10:36:02","modified_gmt":"2025-03-28T10:36:02","slug":"popup-trigger-events-overview","status":"publish","type":"features","link":"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/","title":{"rendered":"Popup Trigger Events"},"content":{"rendered":"\n<p>With the <a href=\"https:\/\/crocoblock.com\/plugins\/jetpopup\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetPopup<\/em><\/a> plugin, one can connect the appearance of pop-ups with a widget or block.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"trigger-events-in-elementor\"><strong>Trigger Events in Elementor<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The page where the pop-up is to be placed should be opened in the <strong>Elementor<\/strong> editor. Then, a widget should be selected to connect to the pop-up and clicked with the left mouse button.<\/p>\n\n\n\n<p>The <strong>Advanced<\/strong> tab should be accessed, and the <strong>JetPopup<\/strong> section should be opened.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-elementor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-elementor-1024x640.webp\" alt=\"jetpopup trigger type options elementor\" class=\"wp-image-47533\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-elementor-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-elementor-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-elementor-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-elementor-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-elementor-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-elementor.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In the <strong>Attached Popup<\/strong> drop-down, one needs to select one of the pop-up templates created earlier. If there are none, proceed to the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-new-popup-template-from-scratch-based-on-jetpopup\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create a New Popup Template in Elementor<\/a> tutorial.<\/p>\n\n\n\n<p>The <strong>Trigger Type<\/strong> option goes right after, and one can specify when the pop-up will be shown on the page:<\/p>\n\n\n\n<ul>\n<li><strong>Click On Button<\/strong> \u2014 this option is selected if the pop-up is to appear when clicking the button in specific widgets that include this functionality (e.g., <em>JetElements<\/em> <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetelements-posts-widget-general-content-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Posts<\/a>, <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-showcase-your-services-in-the-form-of-a-flip-box-with-jetelements-animated-box-widget\/\" target=\"_blank\" rel=\"noreferrer noopener\">Animated Box<\/a>, <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-and-add-an-effective-pricing-table-to-pages-built-with-elementor-using-jetelements-pricing-table-widget\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pricing Table<\/a> widgets);<\/li>\n\n\n\n<li><strong>Click On Widget<\/strong> \u2014 this option is set to make the pop-up appear when the widget is clicked by a visitor;<\/li>\n\n\n\n<li><strong>Custom Selector Click<\/strong> \u2014 a custom selector from the widget can be inserted as a trigger for displaying the pop-up. The first available selector is the <strong>Class<\/strong> selector, which can be obtained by accessing the front end, pressing the <strong>F12<\/strong> keyboard button, and copying the selector inside the used widget. When pasting it into the <strong>Custom<\/strong> <strong>Selector<\/strong> bar, a dot should be placed before it. The second available option is a <strong>CSS ID<\/strong>, which is also copied from the code visible after pressing <strong>F12<\/strong>. When pasting this type of selector into the <strong>Custom Selector<\/strong> bar, a hash symbol should be placed before it. A <a href=\"https:\/\/youtube.com\/watch?v=IotXoKWbxos&amp;si=EnSIkaIECMiOmarE&amp;t=915\" target=\"_blank\" rel=\"noreferrer noopener\">video tutorial<\/a> can be viewed for further details on how this feature works;<\/li>\n\n\n\n<li><strong>Hover<\/strong> \u2014 this option is enabled to make the pop-up appear when hovering over the widget;<\/li>\n\n\n\n<li><strong>Scroll To Widget<\/strong> \u2014 this option is used to display the pop-up when a visitor scrolls to the section where the widget is located:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-container-elementor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-container-elementor-1024x640.webp\" alt=\"trigger type click on container\" class=\"wp-image-47534\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-container-elementor-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-container-elementor-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-container-elementor-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-container-elementor-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-container-elementor-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-container-elementor.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Click on Container<\/strong> \u2014 this trigger type (available for <strong>Container<\/strong> only) allows one to open a pop-up by clicking on an entire container instead of just a specific element like text or a button. It\u2019s best for making larger areas, such as wrappers or entire listing grid items, clickable to enhance user interaction.<\/li>\n<\/ul>\n\n\n\n<p>Upon selecting the needed option, the \u201c<strong>Publish<\/strong>\u201d button should be clicked to save the settings.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"trigger-events-in-gutenberg\"><strong>Trigger Events in Gutenberg<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The page where the pop-up is to be placed should be opened in the Gutenberg editor. Then, select the block that will connect to the pop-up and click it with the left mouse button.<\/p>\n\n\n\n<p>Open the <strong>Advanced<\/strong> tab in the <strong>Block<\/strong> section and scroll down.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-gutenberg.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-gutenberg-1024x640.webp\" alt=\"jetpopup trigger type options gutenberg\" class=\"wp-image-47535\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-gutenberg-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-gutenberg-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-gutenberg-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-gutenberg-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-gutenberg-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-gutenberg.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In the <strong>Attached Popup<\/strong> drop-down, one needs to select one of the pop-up templates created earlier. If there are none, proceed to the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-popup-in-gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create Popup in Gutenberg<\/a> tutorial.<\/p>\n\n\n\n<p>The <strong>Trigger Type<\/strong> option goes right after, and one can specify when the pop-up will be shown on the page:<\/p>\n\n\n\n<ul>\n<li><strong>Click<\/strong> \u2014 this option is set to make the pop-up appear when the block is clicked by a visitor;<\/li>\n\n\n\n<li><strong>Custom Selector Click<\/strong> \u2014 a custom selector from the block can be inserted as a trigger for displaying the pop-up. The first available selector is the <strong>Class<\/strong> selector, which can be obtained by accessing the front end, pressing the <strong>F12<\/strong> keyboard button, and copying the selector inside the used block. When pasting it into the <strong>Custom Selector<\/strong> bar, a dot should be placed before it. The second available option is a <strong>CSS ID<\/strong>, which is also copied from the code visible after pressing <strong>F12<\/strong>. When pasting this type of selector into the <strong>Custom Selector<\/strong> bar, a hash symbol should be placed before it;<\/li>\n\n\n\n<li><strong>Hover<\/strong> \u2014 this option is enabled to make the pop-up appear when hovering over the block;<\/li>\n\n\n\n<li><strong>Scroll To Block<\/strong> \u2014 this option is used to display the pop-up when a visitor scrolls to the section where the block is located.<\/li>\n<\/ul>\n\n\n\n<p>Select the needed option and hit the \u201c<strong>Publish\/Save<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n<p>That\u2019s all one needs to know about the trigger events of the <em>JetPopup<\/em> WordPress plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to attach a popup to a widget or block using the JetPopup functionality.<\/p>\n","protected":false},"author":1,"template":"","format":"standard","builder-category":[],"feature-category":[543],"article-category":[484],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Popup Trigger Events Overview | Crocoblock<\/title>\n<meta name=\"description\" content=\"Explore an overview of the JetPopup trigger events and use the knowledge to set up popups on the WordPress website built with Elementor or Gutenberg builders.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Popup Trigger Events Overview | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Explore an overview of the JetPopup trigger events and use the knowledge to set up popups on the WordPress website built with Elementor or Gutenberg builders.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-28T10:36:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-elementor-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/\",\"name\":\"Popup Trigger Events Overview | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-03-28T10:36:00+00:00\",\"dateModified\":\"2025-03-28T10:36:02+00:00\",\"description\":\"Explore an overview of the JetPopup trigger events and use the knowledge to set up popups on the WordPress website built with Elementor or Gutenberg builders.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Features\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Popup Trigger Events\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Popup Trigger Events Overview | Crocoblock","description":"Explore an overview of the JetPopup trigger events and use the knowledge to set up popups on the WordPress website built with Elementor or Gutenberg builders.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/","og_locale":"en_US","og_type":"article","og_title":"Popup Trigger Events Overview | Crocoblock","og_description":"Explore an overview of the JetPopup trigger events and use the knowledge to set up popups on the WordPress website built with Elementor or Gutenberg builders.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/","og_site_name":"Help Center","article_modified_time":"2025-03-28T10:36:02+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/jet-popup-triggers-elementor-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/","name":"Popup Trigger Events Overview | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-03-28T10:36:00+00:00","dateModified":"2025-03-28T10:36:02+00:00","description":"Explore an overview of the JetPopup trigger events and use the knowledge to set up popups on the WordPress website built with Elementor or Gutenberg builders.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/popup-trigger-events-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Features","item":"https:\/\/crocoblock.com\/knowledge-base\/features\/"},{"@type":"ListItem","position":3,"name":"Popup Trigger Events"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/features\/33524"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/features"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/features"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=33524"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=33524"},{"taxonomy":"feature-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/feature-category?post=33524"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=33524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}