HubSpot All-In-One Marketing is a free marketing plugin that helps you capture more leads and grow your email list with powerful tools like forms, pop-ups, and live chat all built on top of a free contact management platform (CRM).
And if you’re using Genesis on your site, getting started has been made easy! If a Genesis child theme is activated on your site, you’ll be given the option to automatically set up HubSpot’s tools (live chat and popups) that will match the default style (font and color) of your theme.
Note: If you’ve changed the default color in Appearance > Customize > Colors or if you’ve customized your theme to use different fonts, the default theme styles will still be applied in the HubSpot setup process. You can, however, change the HubSpot styles as described in this article.
In this article:
To begin, install and activate the HubSpot All-in-One Marketing plugin.
Then click the HubSpot link in the dashboard menu and follow the prompts to create a free HubSpot account or connect your existing account, as shown in the image below.
After your site has been connected to your HubSpot account, click the Apply the tools to my live site button (shown below) to allow the plugin to automatically set up forms and live chat on your site. Remember, this option is only available if a Genesis child theme is activated on your site.
Now you can go to HubSpot > Forms to see a list of three (3) forms that were automatically created in your HubSpot account. See below for details about each form.
- On exit pop-up form: This form is automatically added to your site and will appear in the center of the screen when a user moves their cursor near the top of the screen.
- On scroll pop-up form: This form is automatically added to your site and will appear in the lower left corner of the screen after a user scrolls halfway down the page.
- Contact form: This form must be manually added to a page on your site. To add the contact form to your site, hover over the Contact form name, click the Copy shortcode button that appears (shown below), and then paste the shortcode into your page.
Live Chat Widget
A live chat widget has also been automatically added to your site. It will appear in the lower right corner of the screen.
Click Chatflows to be directed to your HubSpot account where you can customize the appearance of the widget and interact with your visitors.
Style the Forms
By default, the form styles (font and color) will match the default style of your theme, but you can change them, if desired.
In your HubSpot account, go to Settings (gear icon) > Marketing > Forms to edit the font and color of your forms, as shown in the image below.
We also recommend visiting the Non-HubSpot Forms tab to sync your other form tools to your HubSpot CRM. This is useful if you are using another third-party plugin to embed contact or opt-in forms. Using this feature, no matter what form tool you’re using, the contact information you collect will be centralized in your CRM.
Style the Live Chat Widget
By default, the live chat widget will match the default accent color of your theme, but you can change it, if desired.
In your HubSpot account, go to Settings (gear icon) > Conversations > Inboxes and then click on the name of the inbox you’d like to change.
On the next screen, click Chat to select a new accent color.
If you need help with configuring the HubSpot tools, please refer to the following resources: