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

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

The short 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 “Delay” trigger with a delay of 0 seconds to instantly display the Area when the page is loaded.

After adding that Automatic Trigger, the Area will display instantly, there’s nothing else to do besides saving the Area.

Popups for Divi

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

<script>
 (function () {
  DiviArea.addAction('ready', function () {
   // Option 1: Show the Popup instantly.
   var popupId = 'your-id'; // TODO: ← Enter the ID of your Popup here!
   DiviArea.show(popupId);
  });
 })();
</script>

Modify this snippet in the Script Generator → %3B)

<script>
 (function () {
  DiviArea.addAction('ready', function () {
   // Option 2: Show the Popup after 2 seconds.
   var popupId = 'your-id'; // TODO: ← Enter the ID of your Popup here!

   window.setTimeout(function () {
    DiviArea.show(popupId);
   }, 2000);
  });
 })();
</script>

Modify this snippet in the Script Generator → %20%7B%0A%20%20%20%20DiviArea.show(popupId)%3B%0A%7D%2C%202000)%3B)

Where to add the code?

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

Need help?

We provide support for custom JS code for our paying members; if you want us to review and help you with the code, please purchase a premium license first.

Self-help tips

If the code is not working on your website, please check for JavaScript errors in your browsers’ console.

Most likely, you will see an error message like “[DiviAreas] Could not find an area with the ID: #your-id.” This means that you either have a typo in your Popup-ID or that the Popup is not present on the current page. Important: Popup-IDs are case sensitive!

You can find further API documentation in our Codex or check out the Script Generator, which has a few sample scripts (at the bottom of the page).

Was this article helpful?

Related Articles

Need Support?

Can't find the answer you're looking for?
Get in touch with us