Pop-up Modal
The Pop-up Modal shortcode for WordPress can be used to display a popup/modal with a specific message or banner based on visitor behaviour. This can be used to increase sales, offer a discount or reminder to register on your newsletter. Check below for example implementations and shortcode documentation:
Pop-up Modal Examples
Pop-up Modal Shortcodes
[x3m-modal id="1" message="pop-modal" type="onload" mode="every-time" delay="5" maxwidth="500px" maxheight="300px"]Pop-up Modal Documentation
Here are the shortcode option settings available for Pop-up Modal:
| Shortcode Settings | Details |
|---|---|
| id=”1″ | this id can be any number.
If you wish to implement multiple modals across your website or webpage, make sure to set unique IDs for each shortcode to avoid settings from one modal to overide settings from another |
| message=”pop-modal” | used to set which message to be displayed in the popup modal.
X3M Shortcodes plugin includes a templates/modal-messages/ folder where there are a default.html and a pop.html file. In this folder you can create other basic html files with your own content to be displayed. Use the name of the file in the message=”” setting, without including .html |
| country=”US”
optional |
used to include the country to target the popup modal. Multiple countries can be included in this list, listing them comma separated (ex: “US, JP, FR”). The countries listed should use the 2 letter/alpha-2 notation. Your website is required to be served through Cloudflare for geo-location to work. |
| type=”onload” | this can be set to: – “onload” to display modal on page load – “onclick” to display the modal on page click – “onscroll” to display the modal on page scroll – “onexit” to display the modal on page exit intent – “onadblock” to display the modal on Ad Block software detection |
| delay=”5″ | this sets the delay time in seconds before launching the modal. It should be used only in connection with type=”onload” |
| mode=”every-time” | this can be set to: – “every-time” to display modal on every page load – “once-session” to display the modal once per user session – “once-period” to display the modal once per period set in days |
| period=”10″ | this sets the number of days between modal displays. It should be used only in connection with mode=”once-period” |
| maxwidth=”500px” | this sets the maximum width of the modal, in pixel value (ex “500px”). The modal is responsive should the screen size require smaller width. |
| maxheight=”300px” | this sets the maximum height of the modal, in pixel value (ex “300px”). The modal is responsive should the screen size require smaller height. |