How to add 3rd party component to Divi Builder? (ex. custom email provider)

We have an awesome SendFox for WordPress plugin. SendFox is an email provider that I wanted to integrate to Divi Builder’s Email Opt-in Block. To just add it to the list of other email providers. Here’s the story and the solution at the end. I am proud to share it, because I was not really able to find anything anywhere, besides one raw example on GitHub.

Firstly, I was able to build a custom wrapper for SendFox API following the Divi’s standards and just used one of the other classes there as an example.

Then I was able to test it by putting it into the folder with other providers at Divi/core/components/api/email/SendFox.php and hardcoding it into the Divi/core/_metadata.php

It worked and I was happy. Because it took me only a few hours to build and test.

Contacting Divi support

I was desperate to add SendFox to Divi’s Email Opt-in as one of the email providers, so I contacted Divi’s support to see if it’s possible to just add my class into the core. I was not able to find any Divi Builder API documentation or samples on this topic.

The support team replied saying it is actually possible to register your custom component for Divi with some code.

Here was the code quote from the core:

They told me:

It should be pretty straight forward but here’s a quick example:

Elegant Themes Support

Following the with the sample code using this filter hook:

I was satisfied because I thought that I will just copy & paste this sample into my plugin and it will work. And I did not even test yet 😉

All the nightmare started right here.

The provided sample did not work.

It was simply not adding my “SendFox” provider to the list of all email providers.

I knew my custom class and the naming were correct, because it was working if hardcoded into the core directly.

It was something with this sample that was not letting it work.

You know, I spent days debugging Divi Builder’s core and googling to figure this out.

What I found on Google?

Thanks to some guy on GitHub who shared another sample of using this hook for another 3rd party email provider:

I got some hints. I noticed the parameters fed into new ET_Core_API_Email_MC4WP(); class

Here’s a list of what I tried:

• copying parameters from above example
• writing my own custom parameters
• empty parameters
• using example provided by Divi support
• different hook priority values

None of this helped.

I had to dig into the Divi Builder core to find out how registration of 3rd party components works.

Here am I saving your time, countless hours of debugging and a heavy head.

The Solution.

You wonder why “et_core_get_third_party_components” is not working?

Because there are 2 certain rules that are not written anywhere, defining how the custom component key should be typed and what parameters should be passed into your custom class.

I still didn’t have enough time to fully grasp the essence of these requirements, but was able to crack the code and make it work.

The working code:

Pay attention to highlighted things (line 7).

First requirement: the component key is not allowed to have capital letters, should be all lower case. Not sure why though. If you have any capital letter there, it’s just not displayed in the dropdown.

Second requirement: The parameters passed into your custom class should be exactly the same ( ‘builder’, ‘default’, ” );. From my understanding, it tells the core that this components is related to the set of core components and is whitelisted.

What these parameters are in the defined class fyi:

You don’t need to pass the API key as the third parameter, because it will not let you add your API key and pick the email list in this case. It will be assuming you have already defined them somewhere else. (???)

And still it will not be working.

Here’s how Divi Builder’s et_core_get_third_party_components() looks like in the core (comments removed):

I am not sure how it is supposed to work if it is ALWAYS NOT NULL in this condition (lines 5-7). This is some weird stuff that only Elegant Themes developers would know.

But thanks God it is a pluggable function.

Third requirement: Replace the et_core_get_third_party_components() function.

Use this code in your plugin to make this filter hook finally work:

This will remove the dumb “not null” check.

And finally, you component is registered properly and it works now.

Here’s the final code:

All the best!

3 Comments

in Tips and Tricks

Bogdan

In 2009 he started contributing to WordPress and couple years later built his first WooCommerce store. Now he's helping WooCommerce storeowners all over the world make more money with their stores. Wordpress problem solving expert, backend developer, founder of BogdanFix.