{"id":878,"date":"2023-09-26T14:16:28","date_gmt":"2023-09-26T12:16:28","guid":{"rendered":"https:\/\/wypo.io\/documentations\/%taxomony%\/popup\/"},"modified":"2026-02-26T15:07:46","modified_gmt":"2026-02-26T14:07:46","slug":"popup","status":"publish","type":"wypo_documentations","link":"https:\/\/wypo.io\/en\/documentations\/popup\/","title":{"rendered":"Popup"},"content":{"rendered":"            <div class=\"hf_animated fade_bottom none default wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<h2 class=\"wp-block-heading   \" datalink=\"content-prerequis\">Requirements<\/h2>\n\n\n\n<ul class=\"is-style-important wp-block-list\">\n<li class=\"\"><strong>WordPress<\/strong> : Version 5.9 or higher<\/li>\n\n\n\n<li class=\"\"><strong>PHP<\/strong> : Version 7.0 or higher<\/li>\n<\/ul>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n\n            <div class=\"hf_animated fade_bottom none default is-style-smallbordertop wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--50);--_hfal-cg-m-t-lg:var(--wp--preset--spacing--50);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--50);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--50);--_hfal-cg-m-t-md:var(--wp--preset--spacing--50);--_hfal-cg-m-t-sm:var(--wp--preset--spacing--50);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<div class=\"wp-block-group   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-installation\">Installation<\/h2>\n\n\n\n<p class=\"\">To install the plugin, please refer to the &#8220;<a href=\"https:\/\/wypo.io\/en\/complete-guide-installing-wordpress-plugin\/\">Installing a plugin<\/a>&#8221; documentation.  <\/p>\n<\/div>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n\n\n<div class=\"wp-block-group is-style-smallbordertop  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading\" datalink=\"content-usage\">Usage<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-style-shadow  \"><img loading=\"lazy\" decoding=\"async\" width=\"1317\" height=\"800\" src=\"https:\/\/wypo.io\/wp-content\/uploads\/2023\/09\/wypo-documentation-popups-cpt-back.png\" alt=\"Wypo Documentation Popups Cpt Back\" class=\"wp-image-497\" srcset=\"https:\/\/wypo.io\/wp-content\/uploads\/2023\/09\/wypo-documentation-popups-cpt-back.png 1317w, https:\/\/wypo.io\/wp-content\/uploads\/2023\/09\/wypo-documentation-popups-cpt-back-300x182.png 300w, https:\/\/wypo.io\/wp-content\/uploads\/2023\/09\/wypo-documentation-popups-cpt-back-1024x622.png 1024w, https:\/\/wypo.io\/wp-content\/uploads\/2023\/09\/wypo-documentation-popups-cpt-back-768x467.png 768w\" sizes=\"(max-width: 1317px) 100vw, 1317px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-content\">Content<\/h3>\n\n\n\n<p class=\"\">In the popup content, you can use all the blocks available in the Gutenberg editor. This means you can insert text, images, videos, galleries, buttons and much more to enrich your popup. The Gutenberg editor also lets you organise your content using columns, groups, dividers and other layout elements to create visually attractive and engaging popups. This flexibility gives you the freedom to design popups tailored to your specific needs, whether you&#8217;re promoting a special offer, collecting newsletter subscriptions, or displaying important announcements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-triggers\">Triggers<\/h3>\n\n\n\n<p class=\"\">Select the trigger for your popup to define how and when it should appear. You have several options for customising this behaviour:<\/p>\n\n\n\n<ul class=\"wp-block-list  \">\n<li class=\"\"><strong>Automatic opening<\/strong>: The popup opens automatically when the page is loaded. You can set a delay in milliseconds to determine how long after the page has loaded the popup should appear. This is useful for attracting visitors&#8217; attention immediately or after they&#8217;ve had time to read some of the content.<\/li>\n\n\n\n<li class=\"\"><strong>On click<\/strong>: The popup opens when a user clicks on a specific element of the page, such as a button or link. This method is ideal for intentional user actions, such as subscribing to a newsletter after clicking on a \u2018Subscribe\u2019 button.<\/li>\n\n\n\n<li class=\"\"><strong>JavaScript event<\/strong>: The popup opens in response to a custom JavaScript event. This offers maximum flexibility by allowing the popup to be triggered by specific user actions or other events on the page, such as scrolling to a certain section or interacting with a form.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-display\">Display<\/h3>\n\n\n\n<p class=\"\">Define the position and size of your popup so that it displays optimally on your site. These settings allow you to customise the appearance and location of the popup to suit your needs:<\/p>\n\n\n\n<ul class=\"wp-block-list  \">\n<li class=\"\"><strong>Position: <\/strong>Choose from the different positioning options available, such as the centre, bottom right-hand corner, top left-hand corner, etc. You can position your popup in the most strategic place to grab visitors&#8217; attention without hindering their browsing. For example, a popup in the centre can be highly visible, while a popup in a corner can be less intrusive.<\/li>\n\n\n\n<li class=\"\"><strong>Size<\/strong>: Specify the width and height of the popup in pixels or as a percentage of the screen size. This gives you precise control over the space occupied by the popup. A well-defined size ensures that the content is readable and attractive, without taking up too much screen space. You can create a small, discreet popup for notifications or a large popup for important promotions.<\/li>\n<\/ul>\n\n\n\n<p class=\"\">By adjusting these parameters, you can create popups that fit in perfectly with the design of your site and meet the objectives of your communication campaign.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" datalink=\"content-display-conditions\">Display conditions<\/h3>\n\n\n\n<p class=\"\">Customise the display conditions for your popup to ensure that it is displayed to the right people, at the right time, and on the right pages. These settings allow you to define precise rules for displaying your popup:<\/p>\n\n\n\n<ul class=\"wp-block-list  \">\n<li class=\"\"><strong>Specific pages<\/strong>: Add conditions to exclude certain pages where the popup should not be displayed. For example, you can choose not to display the popup on the home page, on contact pages, or on any other page where you feel the popup could be annoying or inappropriate. This allows you to target your popups more effectively and improve the user experience by avoiding unwanted interruptions.<\/li>\n\n\n\n<li class=\"\"><strong>Logged-in users<\/strong>: Define whether the popup should only be displayed to logged-in or logged-out users. You can, for example, display specific promotions or ads to offline users to encourage them to register or log in, while avoiding displaying these popups to users who are already logged in but don&#8217;t need them. This creates more personalised and relevant user experiences.<\/li>\n<\/ul>\n\n\n\n<p class=\"\">By configuring these display conditions, you can control exactly who sees your popup and where it appears, ensuring that your messages reach the right audiences strategically and effectively.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading\" datalink=\"content-examples-of-javascript-triggers\">Examples of JavaScript triggers<\/h2>\n\n\n\n<p class=\"\">Open the popup automatically after 500 milliseconds:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-js\">\n          JS        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1392863224\"\n        id=\"codemirror-1392863224\"\n      >(function(){\n\tsetTimeout(function(){\n\t\tvar event = new CustomEvent(&quot;wyp-popup-200&quot;);\n\t\twindow.dispatchEvent(event);\n\t},500);\n})();<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1392863224'), {\n          mode: 'javascript',\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\">Open the popup when you click on an item:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-js\">\n          JS        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1207756859\"\n        id=\"codemirror-1207756859\"\n      >document.addEventListener(&#039;DOMContentLoaded&#039;, function() {\n    document.getElementById(&#039;yourElementId&#039;).addEventListener(&#039;yourEvent&#039;, function() {\n        var event = new CustomEvent(&quot;wyp-popup-200&quot;);\n\t\twindow.dispatchEvent(event);\n    });\n});<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1207756859'), {\n          mode: 'javascript',\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    <\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading\" datalink=\"content-recurring-problems\">Recurring problems<\/h2>\n\n\n<div class=\"wp-block-hf-accordion \" data-classNameOnOpen=\"\" data-openChild=\"0\" data-onOpenCloseOther=\"0\" data-scrollToOpenedItem=\"0\">            <div class=\"wp-block-hf-accordion-item active \">\r\n                <button class=\"wp-block-hf-accordion-item-title\" aria-controls=\"panel-65194712-db03-4f77-a303-aceb6414c9ef-0\"\r\n                    aria-expanded=\"true\">\r\n                    My popup doesn&#8217;t work when the trigger button is loaded dynamically via AJAX. How can I solve this problem?                <\/button >\r\n                <div class=\"wp-block-hf-accordion-item-content\" id=\"panel-65194712-db03-4f77-a303-aceb6414c9ef-0\">\r\n                    <div class=\"wp-block-hf-accordion-item-content-layout is-layout-flow \">\r\n                        \n<p class=\"\">If your popup&#8217;s trigger button is loaded via AJAX, the events initially attached to this button will not be automatically applied.<br>To solve this problem, you need to force the events to be reset by executing the following code in your script:<\/p>\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-js\">\n          JS        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-654704725\"\n        id=\"codemirror-654704725\"\n      >window.dispatchEvent(new CustomEvent(&quot;refreshPopupEvents&quot;));<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-654704725'), {\n          mode: 'javascript',\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n<p class=\"\">This code triggers a custom event that your plugin can listen to to reset popup events. Be sure to run this code after dynamically adding your buttons to the DOM.<\/p>\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <\/div><\/div>\n","protected":false},"featured_media":0,"parent":0,"menu_order":51,"template":"","meta":{"_habefastfse_class":"","hf_wpseo_meta_title":"Create flexible, customised popups [separator] [sitetitle]","hf_wpseo_meta_description":"Discover how to use the Popup for Gutenberg plugin to create and manage custom popups on your WordPress site. Follow our complete guide to configure triggers, positions, sizes and display conditions to optimise interaction with your visitors.","hf_wpseo_meta_robots_index":"","hf_wpseo_meta_robots_follow":true,"hf_wpseo_meta_robots_advanced":"{}","hf_wpseo_meta_canonical_url":"","documentation_description":"The \u2018Popup\u2019 plugin lets you create and manage popups in the WordPress Gutenberg editor. It offers great content flexibility and allows extensive customisation to meet different needs.","documentation_menu_text":"","documentation_related_pageid":190,"wypo_hidden_role_wypo_users_not_logged":false,"wypo_visibility_role_wypo_users_not_logged":false,"wypo_hidden_role_administrator":false,"wypo_visibility_role_administrator":false,"wypo_hidden_role_habefast":false,"wypo_visibility_role_habefast":false,"wypo_hidden_role_customer":false,"wypo_visibility_role_customer":false,"wypo_hidden_role_habefast_manager":false,"wypo_visibility_role_habefast_manager":false,"wypo_hidden_for_role":false,"wypo_visibility_for_role":false},"class_list":["post-878","wypo_documentations","type-wypo_documentations","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations\/878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations"}],"about":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/types\/wypo_documentations"}],"wp:attachment":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/media?parent=878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}