Divi Builder JavaScript API

Divi Builder JavaScript API

Divi Builder JavaScript API
The builder』s JavaScript API definition.

window : Window
Global window object.
Kind: global typedef
Emits: event:et_builder_api_ready
ETBuilderModule : React.Component | object
Custom module for the Divi Builder.
Kind: global typedef
Static Properties (Required)

Name
Type
Description

slug
string
The module』s slug as defined in it』s PHP class

 
Methods (Required)

Name
Type
Description

render
function

API
Divi Builder API object passed to registered callbacks of the event:et_builder_api_ready event.
Kind: global constant

API

.Modules

.register(modules)

.Utils

._()
.classnames() ⇒ string
.decodeOptionListValue(encoded_value) ⇒ object
.fontnameToClass(font_name) ⇒ string
.linkRel(saved_value) ⇒ string
.maybeLoadFont(font_name)
.processFontIcon(icon, is_down_icon) ⇒ string
.setElementFont(font_data, use_important, default_values) ⇒ string

.isRegistered(slug) ⇒ boolean
.registerModules(modules)

 
API.Modules
Manage custom modules.
Kind: static property of API
Since: 3.1
Modules.register(modules)
Register one or more custom modules.
Kind: static method of Modules
Since: 3.1

Param
Type
Description

modules
Array.
Modules to register.

 
API.Utils
Useful functions
Kind: static property of API
Since: 3.1

.Utils

._()
.classnames() ⇒ string
.decodeOptionListValue(encoded_value) ⇒ object
.fontnameToClass(font_name) ⇒ string
.linkRel(saved_value) ⇒ string
.maybeLoadFont(font_name)
.processFontIcon(icon, is_down_icon) ⇒ string
.setElementFont(font_data, use_important, default_values) ⇒ string

 
Utils._()
Lodash – A modern JavaScript utility library delivering modularity, performance & extras.
Kind: static method of Utils
Link: https://github.com/lodash/lodash
License: MIT
Copyright: JS Foundation and other contributors https://js.foundation/
Utils.classnames() ⇒ string
Generates className value based on the args provided. Takes any number of args which can be a string or an object. The argument foo is short for { foo: true }. If the value associated with a given key is falsy, the key won』t be included in the output.
Kind: static method of Utils
Link: https://github.com/JedWatson/classnames
License: MIT
Copyright: 2017 Jed Watson

Type

string | Object.

Examples:
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
 
Utils.decodeOptionListValue(encoded_value) ⇒ object
Decode string value of option_list module setting field type.
Kind: static method of Utils
Since: 3.1

Param
Type
Description

encoded_value
string
Value to be decoded

 
Utils.fontnameToClass(font_name) ⇒ string
Returns CSS class for a google font.
Kind: static method of Utils
Since??:

Param
Type
Description

font_name
string
Font name for which to return a CSS class

 
Utils.linkRel(saved_value) ⇒ string
Generate link rel HTML attribute value based on a value saved in a module』s settings.
Kind: static method of Utils
Since: 3.1

Param
Type
Description

saved_value
string
Value saved in module settings

 
Utils.maybeLoadFont(font_name)
Loads a Google Font if it hasn』t already been loaded.
Kind: static method of Utils
Since: 3.1

Param
Type
Description

font_name
string
The name of the font to load

 
Utils.processFontIcon(icon, is_down_icon) ⇒ string
Generates HTML for a saved font-based icon value.
Kind: static method of Utils
Since: 3.1

Param
Type
Description

icon
string
The saved icon value

is_down_icon
boolean
Whether or not the icon is one of the down arrow icons

 
Utils.setElementFont(font_data, use_important, default_values) ⇒ string
Generates font related CSS style properties from font data saved in a module』s settings.
Kind: static method of Utils
Since: 3.1

Param
Type
Description

font_data
string
Font data saved in module settings

use_important
boolean
Whether or not to use !important

default_values
object
Mapping of default values for the font settings

 
API.isRegistered(slug) ⇒ boolean
Whether or not a component is registered.
Kind: static method of API
Since: 3.1

Param
Type
Description

slug
string
The component』s slug

 
API.registerModules(modules)
Convenience wrapper for register
Kind: static method of API
Since: 3.1

Param
Type
Description

modules
Array.
Modules to register.

Using The Bloom Pop-Up Opt-In

Using The Bloom Pop-Up Opt-In

Using The Bloom Pop-Up Opt-In
Popups are incredibly effective, and they can be controlled using various custom triggers.

What Is The Pop-Up Opt-In?
The pop-up opt-in displays a ligthtbox pop-up on your website. Within the pop-up is a form that visitors can use to subscribe to your mailing list. Pop-ups are highly effective at collecting emails due to the simple fact that they cannot be ignored. These pop-ups can be placed anywhere on your website, and they can also be triggered based on unique user interactions. When combining pop-ups with triggers, you can make your opt-in form even more effective by asking visitors to subscribe at the optimum moment (such as when they have finished reading a post, after they have posted a comment, or after they have purchased a product).

Creating The Pop-Up
To create an opt-in form, click on the Bloom > Email Optins link in your WordPress Dashboard, or click on the 「Home」 icon within the Bloom settings page to open up the main settings tab. Here you can manage the opt-ins that you have created in the past, as well as create new opt-ins. To create your first opt-in form, click the 「New Optin」 button. This will reveal the 6 opt-in types that Bloom supports.

Click on the 「Pop-Up」 icon to begin building your new opt-in. Once you select your opt-in type, you will be taken to the opt-in creation screen where you can adjust the various opt-in settings. These settings are broken into three categories: Setup, Design and Display Settings.

Setup
Within the Setup tab of the opt-in creation process, you can give your opt-in a name (for future reference) and assign an email account to the opt-in form. Before you can start collecting email addresses, you first need to connect Bloom to your email marketing service, such as MailChimp or Constant Contact. If you have not already added an account to Bloom, you can do so here. If you have already added an account to Bloom, then you can select the account and the associate email list from within the Form Integration settings on this page. For detailed information about how to add accounts to bloom, as well as a comprehensive list of all account types support by Bloom, please refer to our in-depth accounts tutorial.
Design
Within the Design tab, you can customize the appearance of your opt-in form. Bloom comes with tons of design settings, such as background color, font color, button color, form color, image and form location, border styles and much more. Within this tab you can adjust all of these settings, as well as preview your form by clicking the Preview button. For an comprehensive look at the Bloom design settings, please refer to our in-depth design tutorial.
Display
The Display tab is where you adjust how, where and when your opt-in form appears on your website. You can choose to display your form on specific posts, pages or categories, or exclude specific posts or pages. You can also adjust the triggers that control when your pop-up and fly-in opt-ins appear. These opt-ins can be triggered based on different user interactions. For a detailed look at triggers and how to use them effectively, please refer to our in-depth triggers tutorial. For a comprehensive look at all of Bloom』s display settings, please refer to our in-depth locations tutorial.
Using these settings you can create a wide range of opt-in boxes, and have them appear on different areas of your website (or your entire website if you so choose).

Using The Bloom Inline Opt-In

Using The Bloom Inline Opt-In

Using The Bloom Inline Opt-In
Create your own opt-in shortcode that can be placed on any post or page inline with your content.

What Is The Bloom Inline Opt-In?
The inline opt-in allows you to place an opt-in form anywhere on your website manually using a shortcode. Unlike some of the other opt-in types, which are automatically displayed in certain locations, the inline opt-in form generates a shortcode that you can copy and paste inside the WordPress post editor, allowing to place the form anywhere inside of a post or page.

Creating The Inline Opt-In
To create an opt-in form, click on the
Bloom > Email Optins
link in your WordPress Dashboard, or click on the 「Home」 icon within the Bloom settings page to open up the main settings tab. Here you can manage the opt-ins that you have created in the past, as well as create new opt-ins. To create your first opt-in form, click the 「New Optin」 button. This will reveal the 6 opt-in types that Bloom supports.

Click on the 「Inline」 icon to begin building your new opt-in. Once you select your opt-in type, you will be taken to the opt-in creation screen where you can adjust the various opt-in settings. These settings are broken into two categories: Setup & Design.
After you finish designing your opt-in, you will reach the final step: Generate Shortcode.

Setup
Within the Setup tab of the opt-in creation process, you can give your opt-in a name (for future reference) and assign an email account to the opt-in form. Before you can start collecting email addresses, you first need to connect Bloom to your email marketing service, such as MailChimp or Constant Contact. If you have not already added an account to Bloom, you can do so here. If you have already added an account to Bloom, then you can select the account and the associate email list from within the Form Integration settings on this page. For detailed information about how to add accounts to bloom, as well as a comprehensive list of all account types support by Bloom, please refer to our in-depth accounts tutorial.
Design
Within the Design tab, you can customize the appearance of your opt-in form. Bloom comes with tons of design settings, such as background color, font color, button color, form color, image and form location, border styles and much more. Within this tab you can adjust all of these settings, as well as preview your form by clicking the Preview button. For an comprehensive look at the Bloom design settings, please refer to our in-depth design tutorial.
Generate Shortcode
After you have configured your locked content opt-in, you will be presented with a 「generate shortcode」 button. This button will display the shortcode that you can use to place your locked content opt-in form anywhere on your website. You can also access a list of all of your shortcodes from within the Bloom Shortcode button within the WordPress post editor, or by clicking the shortcode icon within the opt-in management tab in your Bloom settings panel. For more information about using shortcodes, be sure to read our in-depth shortcodes tutorial
Using these settings you can create a wide range of opt-in boxes, and have them appear on different areas of your website (or your entire website if you so choose).

How To Create A Divi Extension

How To Create A Divi Extension

How To Create A Divi Extension
Learn how to develop extensions for Divi

Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.
What』s A Divi Extension?
A Divi Extension is essentially a WordPress plugin that customizes Divi in some way. For example, an extension can add custom modules to the Divi Builder or add new options to the theme — the possibilities are almost endless! All Divi Extensions consist of some PHP code. Depending on their purpose, they can also consist of some JavaScript, HTML, and CSS. In this tutorial you』ll learn how to get started on a new Divi Extension.
Development Environment
Before you can create a Divi Extension you need to ensure that you have the proper environment setup on your local system. The requirements are:

A fully functional installation of WordPress
The latest LTS version of NodeJS
The latest version of Yarn (optional, but preferred)
The latest version of Divi

If you don』t have a development environment setup, there』s a tutorial for that!
Create Divi Extension
Create Divi Extension is a command line utility that streamlines the process of creating and maintaining Divi Extensions. Let』s create a new Divi Extension inside our WordPress plugins directory. First, you need to open a terminal and change to your WordPress plugins directory. If you followed our tutorial to setup your development environment you should already have a command prompt inside your docker container. If so, you can change to the plugins directory using the following command:
cd wp-content/plugins

Now, run the this command to create your extension:
npx create-divi-extension my-extension

You』ll be prompted to provide some details about your extension and then you』ll be able to find it inside your WordPress plugins directory!

Inside your new extension』s directory you』ll find an initial project structure that provides a minimal, fully functional Divi Extension waiting for you to make it your own

What』s Next?
Now that you』ve created your Divi Extension, you』ll probably want to learn How To Create A Divi Builder Module.

Adding Email Accounts In Bloom

Adding Email Accounts In Bloom

Adding Email Accounts In Bloom
Before you can create an opt-in form, you must create connect to your mailing list service.

Adding New Accounts
Before you can create a functioning opt-in form, you must first connect Bloom to your email marketing software/email newsletter software. Once connected, Bloom will be able to add subscribers to lists within each of your accounts. Bloom supports the following software: MailChimp, Constant Contact, MadMinim, iContact, InfusioSoft, Feedblitz, Aweber, Campaign Monitor, GetResponse, SendInBlue, MailPoet, Emma, HubSpot, ActiveCampaign, SalesForce and Ontraport. To connect Bloom with your email software, first navigation to the Tools > Bloom Settings page in your WordPress Dashboard. This will bring you to the Bloom control panel. Click on the Accounts icon on the top right of the settings panel to open the Accounts tab.

This is the page you will be using the manage your existing accounts, or to add new accounts to Bloom. If this is your first time visiting the Accounts tab, you will not see any accounts listed yet. You first need to add one. To get started, click the 「New Account」 button.

This will bring you to the account creation screen. Here you can choose from the dropdown list the email software that you are using. Once you have selected your account type, some additional settings will appear. These settings are used to verify your account and link it with Bloom. Once your account has been linked, Bloom will be able to use the software』s API to automatically add subscribers to your email list. Depending on the email software you are using, the verification steps will be different. In most cases, you will be asked for an API Key or additional account information. Next we will go over each of the different account types and their verification steps in detail:
ActiveCampaign
When you select ActiveCampaign from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
Form ID
Form ID』s are optional, but they can used to pull settings from a form created within your AcitveCampaign account in order to enable double opt-in confirmation.
API Key
The API Key is a special code that is given to you by ActiveCampaign that you can use to authenticate your account. This code can be found within your ActiveCampaign.com account dashboard.
API URL
The API URL is a special URL that is assigned to your account by ActiveCampaign. This code can be found just below the API Key in your ActiveCampaign account dashboard.
ActiveCampaign requires an API Key and API URL in order to integrate with Bloom. You can find both the key and url in the API tab of your account settings page. To access your account settings, click on your profile image located on the far-right side of the main navigation toolbar and then click My Settings.

Copy and paste the API Key and API URL into the appropriate fields on the Bloom account creation page. Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings.
Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the E-mail Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within that tab.
You also have the option to use the optional 「Form ID」 field while authorizing your account. This should be used if you need to enable double opt-in confirmation. To create a new form within your ActiveCampaign account, log in and click on the 「Apps」 link. Next click the 「Add Form」 link to create a new form.

There is no need to adjust the form settings, since Bloom only supports the Name and Email fields. Instead, we need to locate the Form ID so that it can be added to your Bloom integration settings. ActiveCampaign doesn』t list this ID unfortunately, but luckily you can find it my looking at the URL in the browser』s address bar. While on the form creation page, look at your URL. It might look something like this: https://elegantthemes.activehosted.com/admin/main.php?action=form_edit&id=31. You should see a number attached to the end of the URL. That』s your form ID! Copy and paste that number into the 「Form ID」 field in Bloom and click 「Authorize.」 Now that you have connected Bloom to a specific form, it will use the standard ActiveCampaign work flow, including double opt-in confirmation.
Aweber
When you select Aweber from the email provider dropdown menu, you will notice that a new tab is opened and some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
Authorization Code
This is the code that Aweber gives you to authenticate your account with Bloom. You can generate this code in the new tab that was opened upon selecting Aweber. If no new tab was opened, be sure to disable any popup blockers you are using and then try refreshing the page.
 

Inside the new tab that was opened when you selected Aweber, you will be prompted to log in to your Aweber account. Input your username and password and click the 「Allow Access」 button. This will generate your authorization code. Copy and paste the code into the 「Authorization Code」 field in the Bloom account creation page.

 
Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab. Once you click the link, you will be prompted to log in.
Campaign Monitor
When you select Campaign Monitor from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
API Key
The API Key is a special code that is given to you by Campaign Monitor that can be used to authenticate your account. This code can be found within your CampaignMonitor.com account.

Next you will need to locate your API Key. This can be found from within your CampaignMonitor.com account. Log in to your account, and then click the 「Account Settings」 link. On this page you will find a 「Show API Key」 link. Click this link to reveal your API Key. Copy and paste the API key into the Bloom account creation page.

Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab.
Constant Contact
When you select Constant Contact from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
API Key
The API Key is a special code that is given to you by Contact Contact that can be used to authenticate your account. This code can be found within your ConstantContact.com account.
Token
The Token is an additional code that is given to you by Contact Contact that can be used to authenticate your account. This code can be found within your ConstantContact.com account.

Before you can create an application, retrieve an API and register a Token, you must first create a Constant Contact Developer Account. Once you have created your account, log in to begin the application creation process.

When you first log in to your Constant Contact Developer account, you will notice a tab that says 「API Keys.」 Click this link, and then click the 「Applications」 link on the new page. This will reveal the 「Create An Application」 button.

Click the button to begin creating your new app. Simply give the App a name that you will remember, such as 「Bloom,」 and then complete the creation process. Once you have created your App, you will be brought back to the Applications tab and you will notice that your new application has been created, and an API key has been assigned. Copy this API key and save it.

Above your new App info you will see a link that says 「Get an access token.」 Click the link.

This will bring you to a new page with a list of your access tokens. You don』t have any yet, so you will need to create one. Click the 「Get Access Token」 button to continue. Next you will be prompted to log in to your normal Constant Contact account (not the developer account you just created). Once logged in, click the 「Allow Access」 button.

Your Application and your Constant Contact account have now been linked, and on the new page you will be given an Access Token. Copy this token and save it. You now have both your API key and your Access Token.

Head back over to the Bloom settings page and input your API Key and Token, and give your account a name that you can remember it by.
Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab.
Emma
When you select Emma from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
Account
This can be anything you like, and is merely a reference for you to remember the account by.
Public Key
The Public API Key is a special code that is given to you by Emma that can be used to authenticate your account. This code can be found within your MyEmma.com account.
Private Key
The Private API Key is an additional code that is given to you by Emma that can be used to authenticate your account. This code can be found within your MyEmma.com account.
To locate your Public API Key, Private API Key and Account Number, log in to your MyEmma.com account and click on the Account Settings link. On this new page you shoud see several tabs. Look for the API tab, inside of which will be all the information you need to integrate Emma into Bloom.

Copy and paste each of the three pieces of information into the relevant fields within the Bloom account creation page.

Once all three pieces of information have been added, and you have given your Account a name to remember it by, click the 「Authorize」 button. If all of your information was entered correctly, your authorization will be successful and you will get a given a list of your Emma mailing lists. After authorizing, click the 「Save & Exit」 button to finalize the process. You can now use Emma when creating a new opt-in form!
Feedblitz
When you select Feedblitz from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
API Key
The API Key is a special code that is given to you by Feedblitz that can be used to authenticate your account. This code can be found within your Feedblitz.com account.

Before you can authenticate your account, you first need to locate your API Key. This can be found within your Feedblitz.com account. Log in to your account, and from within the 「My Account」 tab, click the 「API Keys」 link. On this page you can view our current API Keys or generate new ones. Copy and paste your API Key into the Bloom account creation page.

Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab.
GetResponse
When you select GetResponse from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
API Key
The API Key is a special code that is given to you by GetResponse that can be used to authenticate your account. This code can be found within your GetResponse.com account.

Before you can authenticate your account, you need to locate your API Key. This can be found by logging in to your GetResponse.com account and clicking the 「Account Details」 link. On this page, you will notice a 「Getresponse API」 tab. Click this tab to reveal your API Key. Copy and paste this API Key into the field within the Bloom account creation page.

Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab.
HubSpot
When you select HubSpot from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
API Key
The API Key is a special code that is given to you by HubSpot that you can use to authenticate your account. This code can be generated from within yourHubSpot.com account.
Before you can authenticate your account, you need to locate your API Key. This can be found by logging in to your HubSpot.com account and clicking the 「Integrations」 link. p>

After clicking the Integrations link, you will be brought to a new page. On this page, look for the 「Get Your HubSpot API Key」 link.

This should bring you to a new page where you can view and copy your HubSpot API key. Copy this key so that you can paste it into the Bloom settings field.

Return to the Bloom HubSpot integration screen and paste in your API key into the API Key field. Click the 「Authorization」 link to authorize your account. Once your account has been authorized, click the 「Save & Exit」 button. You can now integrate your HubSpot account when creating new Bloom opt-in forms!
iContact
When you select iContact from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
App ID
This is a special code that you can create within the iContact App-Id generator. Log in to your account and then go to the App-Id Generator to create a new app and generate an App-Id.
Username
This is the username you use to log in to your iContact account.
Password
This is the password you created for your App-Id.

You should already know your Username and Password, so that just leaves the App ID.
This is a special code that must be generated from within your iContact.com online account. Log in to your online account, and then go to the App-Id Generator page to create a new app. After your app has been created, copy and paste the API-AppID into the field within the Bloom account creation tab.

Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab.
Infusionsoft
When you select Infusionsoft from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
API Key
The API Key is a special code that is given to you by Infusionsoft that can be used to authenticate your account. This code can be found within your Infusionsoft.com account.
Application Name
You will need to register a Application from within Infusionsoft.com account, and then input the name here.

Before you can authorize your account, you will first need to get your API Key. To get an API Key, log in to your Infusionsoft account, and then click the Admin > Settings link.

Next click the Application tab to open up your application settings.

Scroll down to the bottom of the page to find the API Key section. Here you can generate a new API Key to use with Bloom. Copy and paste your API key into the API Key field in the Bloom settings panel.

Next you will need your Application name. You can find this by looking at the URL in your address bar after logging in to your Infusionsoft account. Copy and paste the sub domain shown here into your Bloom settings panel.

Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab.
Mad Mimi
When you select Mad Mimi from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
Username
This is the username that you use to log in to your MadMimi account.
API Key
The API Key is a special code that is given to you by MadMimi that can be used to authenticate your account. This code can be found within your MadMimi.com account.

Before you can link your account, you must first obtain your API Key. This key can be found within your MadMimi.com account. Log in to your account and click the 「Account」 link. On this new page, look for the 「API」 tab. Click this tab to reveal your API Key. Copy and paste the key into the Bloom account creation page.

Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab.
MailChimp
When you select MailChimp from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
API Key
The API Key is a secret key that is used to verify your account. Once you have entered your API Key and authorized your account, Bloom will be fully connected.
MailChimp requires a single piece of information to link your account, your API Key. These API Keys can be generated within your MailChimp account, and then copied and pasted into the Bloom account creation page.

To generate an API key, you will need to log in to your MailChimp account. Log in to your account and then click the 「Account」 link. This will bring you to your account settings page. Next click the 「Extra」 link followed by the 「API keys」 link to bring you to the API management page. Locate and click the 「Create A Key」 button. This will generate a new API Key for your account.

Copy and paste that key into the 「API Key」 field in the Bloom account creation page, and then click 「Authorize.」 If you have copied the key correctly, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab.
MailPoet
When you select MailPoet from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
MailPoet does not require any additional authentication steps. All you need to do is install the MailPoet WordPress plugin. Once installed and activated, your lists will automatically appear. Simply input your Account Name.

Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab.
Ontraport
When you select OntraPort from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
API Key
The API Key is a special code that is given to you by Ontraport that can be used to authenticate your account. This code can be found within your Ontraport.com account.
APP ID
The API ID is a special code that is given to you by Ontraport that can be used to authenticate your account. This code can be found within your Ontraport.com account.

Before you can authenticate your account, you must first locate your API Key and APP ID. These can both be found by logging in to your Ontraport.com account. Once logged in, look for the dropdown menu on the top right of the screen. From within it, click the Administration link. On this page you will find the 「Ontraport API Instructions and Key Manager.」 Click this link to proceed to the API Key Manager. Here you can generate new keys, or manage your existing keys. Copy and paste your API Key and APP ID into the Bloom account creation page.

Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab.
ConvertKit
When you select ConvertKit from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
API Key
The API Key is a special code that is given to you by ConvertKit which can be used to authenticate your account. It can be found within your ConvertKit Account Dashboard.
API Secret
The API Secret is another special code that is given to you by ConvertKit which can be used to authenticate your account in order to perform certain actions. It can also be found within your ConvertKit Account Dashboard.

Now you need to locate your API Key and Secret. They can be found inside your ConvertKit Account Dashboard. Log in to your account, and then click the 「Account」 link. On this page you will find your API Key as well as a 「Show」 link for your API Secret. Click the link to reveal your API Secret. Copy and paste the API Key and Secret into the Bloom account creation page.

Finally, click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. The account and its associated lists will appear in the Accounts tab of your Bloom Dashboard going forward. You can manage or delete this account at any time from there.
MailerLite
When you select MailerLite from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
API Key
The API Key is a special code that is given to you by MailerLite which can be used to authenticate your account. It can be found within your MailerLite Account Dashboard.

Now you need to locate your API Key. It can be found inside your MailerLite Account Dashboard. Log in to your account, click your name and avatar located in the top-right corner, and then click 「Integrations」. Now find the integration list item labeled 「Developer API」 and click its 「Use」 button. On this page you will find your API Key. Copy and paste the API Key into the Bloom account creation page.

Finally, click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. The account and its associated lists will appear in the Accounts tab of your Bloom Dashboard going forward. You can manage or delete this account at any time from there.
Mailster
When you select Mailster from the email provider dropdown menu, you will notice that a new field appears:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.

Finally, click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. The account and its associated lists will appear in the Accounts tab of your Bloom Dashboard going forward. You can manage or delete this account at any time from there.
Salesforce
There are two integration methods offered by Salesforce: Simple and Full. Full integration requires your site to have a valid SSL certificate. You must access your WordPress Dashboard using https in order to configure Full integration. When you select Salesforce from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
Organization ID
Your Salesforce Organization ID.
If you are accssing Bloom』s Dashboard using https you will see the following additional fields:
Instance URL
Your Salesforce Instance URL. This is the URL of your Salesforce Account Dashboard (after you have logged in).
Consumer Key
The Consumer Key is a special code that is given to you by Salesforce which can be used to authenticate your account. It can be found within your Salesforce Account Dashboard.
Consumer Secret
The Consumer Secret is another special code that is given to you by Salesforce which can be used along with your Consumer Key to authenticate your account. It can be found within your Salesforce Account Dashboard.

First you need to locate your Organization ID. It can be found inside your Salesforce Account Dashboard. After logging in to your account, locate the main sidebar menu on the left side of the page and navigate to Settings >> Company Settings >> Company Information. Look for your 「Organzation ID」. Copy the ID and then paste it into the Bloom account creation page.

If your site doesn』t have an SSL certificate and/or you didn』t use https to access Bloom』s settings, then you have all that you need for the Simple Integration method. You can proceed to the last step below (it starts with Finally, click 「Authorize.」) If you used https to access Bloom』s settings then there are still a few more things you need to copy/paste before proceeding to the last step. Now, locate your Instance URL in your browser』s address bar and then copy/paste it into the Bloom account creation page.

Next, you』ll need to create a new Connected App in order to obtain a Consumer Key and Secret. Using the main sidebar navigation menu, go to Platform Tools >> Apps >> App Manager and then click the button labeled 「New Connected App」 located in the top-right corner of the page. Fill in the following fields:
Connected App Name
This name is displayed in the App Manager and on its App Launcher tile. Example: 「Bloom」
API Name
The app name without spaces. Only letters, numbers, and underscores are allowed.
Contact Email
Your contact email address.
Check the checkbox labeled 「Enable OAuth Settings」. For the field labeled 「Callback URL」, input a URL for your site using the following format:
https://yoursite.com/wp-admin/admin.php?page=et_bloom_options
Now, in the box labeled 「Available OAuth Scopes」, click 「Full access (full)」 and then click the 「Add」 button located on the right side of the box. Next, scroll down to the bottom of the page and click 「Save」.

You should now see your Consumer Key and Secret. Copy and paste them into the Bloom account creation page.

Finally, click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. The account and its associated lists will appear in the Accounts tab of your Bloom Dashboard going forward. You can manage or delete this account at any time from there.
SendInBlue
When you select SendInBlue from the email provider dropdown menu, you will notice that some new fields appear:
Account Name
This can be anything you like, and is merely a reference for you to remember the account by.
API Key
The API Key is a special code that is given to you by SendInBlue that can be used to authenticate your account. This code can be found within your SendInBlue.com account.

Before you can authenticate your account, you will first need to locate your API Key. This can be found from within your SendInBlue.com account. Log in to your account and then click the 「API & Integration」 link. Next location the API section and click the 「Manage your key」 link. This will bring you to a page where you can view your current keys or create new once. Copy your API Key and paste it into the Bloom account creation page.

Next click 「Authorize.」 If your information is correct, your account will be verified and your email lists will appear below the API Settings. Click 「Save & Exit」 to finalize the process and add the account to Bloom. Once added, the account and its associated lists will appear in the Accounts tab of your Bloom settings panel. You can manage or delete this account at any time from within this tab.

Creating And Using Shortcodes In Bloom

Creating And Using Shortcodes In Bloom

Creating And Using Shortcodes In Bloom
Certain opt-ins have shortcodes that you can use to place the opt-in form anywhere on your site.

Shortcodes Can Be Used To Place Opt-Ins Within Posts & Pages
Bloom creates shortcodes for two opt-in types: Locked Content and Inline. Whenever you create a Locked Content or Inline opt-in, you can use the shortcode to place this newly-created form anywhere on your website. You can access these shortcodes from within the Bloom settings panel, or from within the Bloom Shortcodes button in the WordPress post editor.
What Is A Shortcode?
A shortcode is a piece of code that has been simplified for convenience, and can be used to create an advanced element (in this case, a Bloom opt-in). A shortcode will look something like this: [et_bloom_inline optin_id=」optin_4″] Copying and pasting this code into the WordPress post editor will display the associated opt-in on the post or page you are editing.

Generating A Shortcode During Opt-In Creation
Shortcodes are only created for Locked Content and Inline opt-in forms. After you create either of these opt-in types, you will notice a 「Generate Shortcode」 button on the final tab of the settings page. Pressing this button will display the shortcode that you can copy and paste into your post or page.

Generation A Shortcode From The Opt-In List
You can also generate a shortcode for an Inline or Locked Content form from within the Bloom Settings page by clicking the shortcode icon for the desired opt-in in your opt-in list.

Generating A Shortcode From Within The Post Editor
All of your active opt-ins with associated shortcodes are also easily accessible right from the WordPress Post Editor. At any time while writing your post, you can use the Bloom button within the post editor to add a shortcode to your post. Simply click the button to get a list of available opt-ins and select the one that you would like to add.

Using The Locked Content Shortcode
The locked content shortcode is unique in that it must be 「wrapped around」 the content that you would like to lock. When you generate the shortcode you will notice that it has two parts: [et_bloom_locked optin_id=」optin_5″] and [/et_bloom_locked]. Whatever content is placed in between these two parts will be locked and only revealed with the visitor subscribes to your list.

How To Install Your Bloom WordPress Plugin

How To Install Your Bloom WordPress Plugin

How To Install Your Bloom WordPress Plugin
Installing our plugins is a snap using the WordPress Dashboard plugin installer.

Download Your Plugin

To update your new plugin, you must first upload it to your WordPress website via the WordPress dashboard. When you download Bloom from the Elegant Themes Member』s Area, you will be be given a file called bloom.zip. Some browsers (such as Safari on OSX) will automatically unzip that folder for you. In this case, you will need to re-size the Bloom folder by right clicking the folder and compressing it. Once you have located your bloom.zip file, you are read to upload it to your WordPress website.
Log in to your WordPress Dashboard and click the Plugins > Add New link. This will bring you to the WordPress plugins page.
Upload Your Plugin

After the plugins page in your dashboard has loaded, locate the 「Upload Plugin」 button towards the top of the screen. Click this button to proceed to the next step.
Choose Your Plugin ZIP File

After clicking 「Upload Plugin,」 you will be taken to a new page where you can select the plugin that you would like to install. In this case, we will be installing the bloom.zip file that you downloaded earlier. Click the 「Choose File」 button to open a local browser window.
Upload And Activate

You will need to browse your local machine and find the bloom.zip file. You will often find it in your Downloads folder, but it depends on your browser settings. Once you have located the file, select it and click the Open button. Next click the 「Install」 button to install the bloom.zip folder that you have just selected. After the plugin has been uploaded you will be taken to a confirmation page where you can activate the plugin. Click the 「activate」 button and you are good to go!

Using The Bloom Below Post Opt-In

Using The Bloom Below Post Opt-In

Using The Bloom Below Post Opt-In
Connect with your visitors when they are most engaged, after they have finished reading your post.

What Is The Bloom Below Post Opt-In?
This is perhaps the most simple and classic opt-in form. When this form is enabled, it places an opt-in box at the bottom of your posts and pages. If a visitor has enjoyed your post and read the entire thing, they will be greeted with a chance to subscribe when they are finished. This is a great way to capture your more attentive readers. These opt-ins can be placed site-wide, or they can be targeted to specific posts or post types.

Creating The Below Post Opt-In
To create an opt-in form, click on the
Bloom > Email Optins
link in your WordPress Dashboard, or click on the 「Home」 icon within the Bloom settings page to open up the main settings tab. Here you can manage the opt-ins that you have created in the past, as well as create new opt-ins. To create your first opt-in form, click the 「New Optin」 button. This will reveal the 6 opt-in types that Bloom supports.

Click on the 「Below Post」 icon to begin building your new opt-in. Once you select your opt-in type, you will be taken to the opt-in creation screen where you can adjust the various opt-in settings. These settings are broken into three categories: Setup, Design and Display Settings.

Setup
Within the Setup tab of the opt-in creation process, you can give your opt-in a name (for future reference) and assign an email account to the opt-in form. Before you can start collecting email addresses, you first need to connect Bloom to your email marketing service, such as MailChimp or Constant Contact. If you have not already added an account to Bloom, you can do so here. If you have already added an account to Bloom, then you can select the account and the associate email list from within the Form Integration settings on this page. For detailed information about how to add accounts to bloom, as well as a comprehensive list of all account types support by Bloom, please refer to our in-depth accounts tutorial.
Design
Within the Design tab, you can customize the appearance of your opt-in form. Bloom comes with tons of design settings, such as background color, font color, button color, form color, image and form location, border styles and much more. Within this tab you can adjust all of these settings, as well as preview your form by clicking the Preview button. For an comprehensive look at the Bloom design settings, please refer to our in-depth design tutorial.
Display
The Display tab is where you adjust how, where and when your opt-in form appears on your website. You can choose to display your form on specific posts, pages or categories, or exclude specific posts or pages. For a comprehensive look at all of Bloom』s display settings, please refer to our in-depth locations tutorial.
Using these settings you can create a wide range of opt-in boxes, and have them appear on different areas of your website (or your entire website if you so choose).

How To Perform Split Testing

How To Perform Split Testing

How To Perform Split Testing
Split tests are the key to optimizing your forms, making it easy to see which variation is most effective.

What Is Split Testing (Also Known As A/B Testing)
Split testing is an amazing feature that can help you greatly improve the effectiveness of your opt-in forms. Split tests can be created for any of the opt-in forms that you have built with Bloom. So what is a Split Test? Split testing is a way to compare the performance of multiple variations of the same opt-in form to help you figure out which one is the most effective. Using the Bloom Split Testing system, you can create different variations of an opt-in to test different headlines, colors, and offers. These different variations will be shown to different visitors, and their conversion rate will be compared to each other. Over time you can see which one is resulting in the most sign-ups, and you can pick the highest performing variation to be your main version.

Creating Your First Split Test
After you have created an opt-in, you can begin running split tests. Navigate to the Bloom > Email Optins tab in the WordPress Dashboard to display a list of your current opt-ins. You will notice that each of your active opt-ins have several icons to the right of the opt-in name. The first one is the 「split testing」 icon. Click this icon to initiate a split test.

Click the split testing icon shown above to initiate a split test.
Create New Variations
You can create as many variations as you like for your split test. Each of these variations will be split up equally between all of your visitors. To add your first variant, click the 「Add Variant」 button.

This will bring you to through the standard opt-in creation process. You will notice that the 「Display」 tab has been removed, since you are only modifying the appearance of the opt-in (not where the opt-in appears). Design your new opt-in with the changes you want to test (such as creating a new headline, or adjusting the colors of the button). Once you click 「Save & Exit,」 your new variation will be added to your opt-in list.
Beginning Your Split Test
As you create new variants for a given opt-in, you will notice that these variations appear below the main opt-in in your list of active opt-ins in the Bloom settings panel. Once you have created all of the variations that you want to test, it』s time to begin the test. Press the 「start test」 button to activate the split test. Once the test has been started, you can also pause the test at any time by clicking the 「pause test」 button.

Observing The Results & Ending Your Test
As your test runs, you can observe the conversion rate of each opt-in. The conversion rate is displayed right in the list of opt-ins, as well as in the Bloom stats page. Once you are satisfied with the results, it』s time to end the test and pick your favorite (the highest performing variation). To end the test, click the 「End Test And Pick Winner」 button.

This button will initiate a pop-up window with a list of all your variations, ranked by performance. Simply click on the one you would like to use to end the test and select this variant to use as the main version of your opt-in. This will delete the rest of your unused variations.

Using The Bloom Locked Content Opt-In

Using The Bloom Locked Content Opt-In

Using The Bloom Locked Content Opt-In
Required your visitors to subscribe before they get access to the content on your post or page.

What Is The Locked Content Opt-In?
Locked content is a great way to get new subscribers by requiring them to subscribe to your list before they get access to a free resource. After you finish creating your locked content opt-in, you will be give a shortcode that you can use to wrap the content that you would like to lock within any given post or page. For example, you could lock a link that gives down-loadable access to your eBook. Or you could write a great post, and lock the second half of the post for only your subscribers to access.

Creating The Locked Content Opt-In
To create an opt-in form, click on the Bloom > Email Optins link in your WordPress Dashboard, or click on the 「Home」 icon within the Bloom settings page to open up the main settings tab. Here you can manage the opt-ins that you have created in the past, as well as create new opt-ins. To create your first opt-in form, click the 「New Optin」 button. This will reveal the 6 opt-in types that Bloom supports.

Click on the 「Locked Content」 icon to begin building your new opt-in. Once you select your opt-in type, you will be taken to the opt-in creation screen where you can adjust the various opt-in settings. These settings are broken into two categories: Setup & Design.
After you finish designing your opt-in, you will reach the final step: Generate Shortcode.

Setup
Within the Setup tab of the opt-in creation process, you can give your opt-in a name (for future reference) and assign an email account to the opt-in form. Before you can start collecting email addresses, you first need to connect Bloom to your email marketing service, such as MailChimp or Constant Contact. If you have not already added an account to Bloom, you can do so here. If you have already added an account to Bloom, then you can select the account and the associate email list from within the Form Integration settings on this page. For detailed information about how to add accounts to bloom, as well as a comprehensive list of all account types support by Bloom, please refer to our in-depth accounts tutorial.
Design
Within the Design tab, you can customize the appearance of your opt-in form. Bloom comes with tons of design settings, such as background color, font color, button color, form color, image and form location, border styles and much more. Within this tab you can adjust all of these settings, as well as preview your form by clicking the Preview button. For an comprehensive look at the Bloom design settings, please refer to our in-depth design tutorial.
Generate Shortcode
After you have configured your locked content opt-in, you will be presented with a 「generate shortcode」 button. This button will display the shortcode that you can use to place your locked content opt-in form anywhere on your website. You can also access a list of all of your shortcodes from within the Bloom Shortcode button within the WordPress post editor, or by clicking the shortcode icon within the opt-in management tab in your Bloom settings panel. For more information about using shortcodes, be sure to read our in-depth shortcodes tutorial.
Using these settings you can create a wide range of opt-in boxes, and have them appear on different areas of your website (or your entire website if you so choose).