Can I display a Popup instantly when a page is loaded?

  1. Home
  2. Knowledge Base
  3. Documentation
  4. Usage
  5. Can I display a Popup instantly when a page is loaded?

The short (and good) answer is: Yes that’s possible with both the free and premium plugins.

Divi Areas Pro

All Popup and Fly-In Areas have options for Custom Triggers that you can use for this. Just add a “Timed” trigger with a delay of 0 seconds to display the Area instantly when the page is loaded.

A Timed trigger with delay of 0 seconds will instantly display the Popup.

There’s nothing else (besides saving the Area). Once you add that Custom Trigger, the Area will display instantly

Display the Popup only once per day

Here’s how you can automatically trigger the Popup on the first page-visit each day, and then manually when the user clicks a button.

In the following screenshot, there is a Custom Click-Trigger for the selector “.show-notice” e.g., a Button Module with the CSS class “show-notice“. Simply change “show-notice” to the CSS class you want to use on your page.

Add a click-trigger. Now the Popup is triggered automatically during page load and can be manually opened by the user by clicking a button.
Limit the automatic opening of the Popup to once per day

That way, your visitors are guaranteed to see the Popup once and can later trigger the Popup on-demand, when they need the information.

Keep in mind, that the “show-notice” button must be placed on the page, not inside the Divi Area!

Popups for Divi

Though the free plugin does not offer such an easy-to-use interface, it still comes with the full JS API support of the premium plugin. That means, you can manually build the timed trigger by inserting a Code Module into the Popup section and inserting the following code:

<script>
jQuery(function() {
  var popupId = 'your-id'; // TODO: <-- Enter the ID of the Popup that you want to display!
  window.setTimeout( DiviArea.show(popupId), 250 );
});
</script>

Notice, how we add a 250-millisecond delay to the Popup. That delay is needed, so the plugin can fully initialize the Popup before it is displayed. If you want, you can play with the delay (change “250” to something else).

Place this JavaScript snippet into a Code Module inside your Popup, as displayed here:

Place the Code Module inside the Popup Section

Need help?

If the code is not working on your website, please check for JavaScript errors in your browsers’ console. Most likely you have a typo in your Popup-ID and will see the error message [DiviAreas] Could not find an area with the ID: #your-id. In that case, you need to adjust the variable popupId in the code snippet.

If you cannot get the snippet to work, then you can open a new support request with us, and we’ll look into this with you. In that case, please select the “Support” type and enter the URL to your web page in the form. We’ll have a look at the source code of your page and will reply with the changes that you need to make. However, please respect that we have limited capacity for free support and cannot respond in real-time. But we’ll get back to you eventually 😉

Was this article helpful?

Related Blog Posts

Related Articles