How To Use the JS API
Editorial Note We may earn a commission when you visit links from this website.

How To Use the JS API

Avatar PhilippTutorialsPopups for Divi

The Popups for Divi plugin comes with an extensive Javascript API which allows you to monitor and control popups on your webpage.

In the plugin documentation, you find two code examples that can display a popup after a timeout or after scrolling the page to a certain point.

In this tutorial, we use the first example and look at three ways you can integrate the custom behavior on your webpage.

Table of Contents

The Code You Want To Add

Here is the actual code that we want to add:

window.setTimeout(function(){ 
    DiviArea.show('get-newsletter') 
}, 3000);

Preparation

You can see that we display a popup with the ID #get-newsletter after three seconds. So let’s create a new Divi page and add that popup – I use the prebuilt template “Coffee Shop About Page” for this new page.

The predefined template “Coffee Shop About Page”

Cool, this template already contains a section with the title “Join our newsletter”. Let’s convert this section into our popup!

This is the newsletter section we want to use for our popup!

Simply edit the section config and set the CSS ID of the section to get-newsletter and add the CSS Class popup – and already we have our popup!

Add a CSS ID and Class to convert the section into a popup

Save the page and load the preview. You can see that the newsletter section is not displayed anymore since it was converted into a popup. Now let’s have a look at how you can display the popup after a three-second delay!

Option 1 – Divi Code Module

The fastest option is a simple Code Module. Go ahead and add a code module inside the popup.

Add a Code module into our popup

Inside this code module, we simply copy-paste the above JS code – just make sure you wrap the code in a <script></script> tag.
In the following screenshot, I marked the code module with a white dashed border, to make it visible to you:

Add the JS snippet into the Code content area

Tip: Technically it does not matter, where you place the code module. But I recommend adding it inside the popup, so you know that it belongs to the popup.

That’s it! Save the page again and open it up without the Visual Builder. You will see your popup automatically after three seconds.

Option 2 – Divis “Code Integration”

The first option above is very useful for popups that only appear on a few pages. But if you have popups on every page, you might want to have a central place to manage your code.

This is where the “Code Integration” options of the Divi Theme options page come in handy. So open your wp-admin panel, open the Divi section and navigate to the “Integration” tab. Scroll a bit down, to the field “Add code to the <body> tag” and copy paste the JS snippet into that field.

Simply add the custom JS code to the “Integrations” of the <body> element

This also works very good and can be done quickly. However, the big disadvantage of this approach is, that WordPress does not keep a history of the settings values. Once you change the script (and potentially break it) there’s no way to undo your change – except maybe from restoring a backup.

Option 3 – Your child theme

In most cases, this is the best way to go. Though it takes slightly more time to set up, it’s always worth the few extra minutes you spend on this.

Important: Only add this modification to a child theme, never to the main Divi theme!

To implement this option you create a .js file in your child theme and then enqueue that file inside your child themes functions.php

Step 1: Create a .js file in your child theme. I name this file “scripts.js”. This file gets our JS code (this time without the <script></script> tags)

window.setTimeout(function(){ 
    DiviArea.show('get-newsletter') 
}, 3000);

Step 2: Then simply enqueue our scripts.js file from within the child themes functions.php file.

<?php
add_action( 'wp_enqueue_scripts', 'pst_theme_customize_scripts' );

function pst_theme_customize_scripts() {
	wp_enqueue_script(
		'child-theme-scripts',
		get_stylesheet_directory_uri() . '/scripts.js',
		[ 'jquery' ],
		false,
		true
	);
}

So you see – it’s not that difficult. And you can save your JS code in a git repository or copy the file to your Dropbox as a backup. When something happens to your webpage or database you always have a copy of that file handy to restore the functionality very fast!

This option also reduces the HTML code of your webpage and allows browsers to cache the JS file, which can help to reduce the loading time of your page.

Try Divi Areas Pro today

Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.

Click here for more details

More Articles You Will Like