The Divi Integration Tab is a powerful feature within the Divi theme that allows you to add custom code and third-party integrations to your website easily.
This tab provides a convenient interface for inserting scripts, styles, and other code snippets directly into your site's header, body, or footer.
In this article, we will explore the functions and benefits of the Divi Integration Tab.
Accessing the Integration tab
Go WordPress Dashboard → Divi → Theme Options
Click on the Integration Tab
The Integration tab options explained
Enable header code
When enabled, any code you place in the Add code to the < head > of your blog will appear in the head section of every website page. This is useful when you need to add JavaScript, HTML, or CSS code to all pages.
Enable body code
When enabled, any code you place in the Add code to the < body > (good for tracking codes such as Google Analytics) will appear in the body section of all pages of your blog. This is useful if you need to input a tracking pixel for a state counter such as Google Analytics.
Enable single top code
When enabled, any code you place here will appear at the top of all single posts. This is useful if you are looking to integrate things such as social bookmarking links.
Enable single bottom code
When enabled, any code you place here will be placed at the bottom of all single posts. This is useful if you are looking to integrate things such as social bookmarking links.
Example of different types of code that can be added in Divi's Integration tab
JavaScript or jQuery code
Any JavaScript or jQuery code has to be wrapped into <script> and </script> tags
<script>
console.log('Example of Js code');
</script>
HTML code
<meta name="robots" content="noindex, nofollow">
CSS code
Any CSS code has to be wrapped into <style> and </style> tags
<style>
.my-element {
background-color: lightgreen;
color: darkolivegreen;
font-size: 18px;
line-height: 1.5rem;
}
</style>
Important Note: Custom PHP code cannot be used in Divi's Integration Tab.