HubSpot Integration

What does the HubSpot integration do?

The HubSpot integration in the Studio allows you to access your HubSpot forms directly in the studio. This enables you to quickly locate your HubSpot forms, add them to your experiences and easily style them using custom CSS.

How do I connect HubSpot to my Studio account?

Before you get started with the below steps, be sure to contact your account manager to ensure the HubSpot integration is enabled for your account. You can also reach out directly to support in the Studio.

1. In the Studio admin, select "Settings" in the left-hand panel.

2. In the “Integrations” panel, turn the HubSpot toggle to “On” and select Connect.

   1. If you are not logged into HubSpot you will be asked to login

   2. If you have more than one HubSpot account associated with your login, you will be asked to choose which account you'd like to connect at the account level

3. Once enabled, a HubSpot icon will appear in the Studio enabling you to add forms to your experience.

How do I connect HubSpot to a specific Experience?

In addition to integrating at the account level, you can also set up the HubSpot integration at the experience level, allowing you to use a different HubSpot account for each experience.

Note: experience level integration will override account level integration for that specific experience.

1. Hover over the experience tile that you want to integrate with HubSpot

2. Select the ‘Integrations’ tab and activate the HubSpot toggle

3. Click the ‘Connect’ button

   1. If you are not logged into HubSpot you will be asked to login

   2. If you have more than one HubSpot account associated with your login, you will be asked to choose which account you’d like to connect

What HubSpot permissions do I need?

For each HubSpot account that you authorize you will be asked to grant access to:

1. User and Account Information

2. Read from and write to my Contacts

3. Read from and write to my Forms

Note: If you don’t have access to these permissions in HubSpot, please reach out to your Marketing department.

Adding a HubSpot form to your canvas

Once the HubSpot integration is all set up, a HubSpot icon will appear in the studio Toolbar. This is where you can Launch the Form Chooser which enables you to browse, search and preview existing HubSpot forms. To add a form to the Studio:

1. Locate the form in the Form Chooser, click add to place it on the canvas.

2. All forms will have the basic HubSpot styling by default, and on submit will display the “Thank You” message or redirect URL you have set in HubSpot.

Note: if you have already added a form to your canvas, and later update that form in HubSpot – the Studio and preview will need to be refreshed to have those changes reflected.

Styling your form

Once you have a form on your canvas you can style the form to match your experience using CSS. Form CSS can be edited in the Inspector panel with the form selected. You can modify the existing CSS or paste in your own.

Note: If you have more than one form on your canvas, it is important to note that the CSS includes a unique identifier for each form. In the code you will see a number before each element e.g. HubSpot-599c01a6c71eb. If you copy and paste code into this field the unique identifier will be overwritten, therefore you will be styling all forms on the page.

Use the “Replace Form” button to ensure the CSS styling is preserved for the new form, as well as any interactions that were previously applied.

On Form Submit Interactions

Another valuable feature of the HubSpot integration in Studio is the ability to add a number of different interactions to the form that will happen when the form is submitted. When the form is selected on the canvas you will see the actions that are possible from the Interactions tab of the Inspector Panel.
There are many different interactions you can add, but a popular use for this feature is creating a custom follow-up or “Thank You” message right in Studio to match the rest of your content using Studio elements and interactions! You can use text, graphics, shapes, and of course add animations to those elements.
When the form is selected on the canvas you will see the actions that are possible from the Interactions tab of the Inspector Panel.

Common approaches to this would be to position the follow-up message behind the form, and add a hide interaction to the form to reveal the message on submit, or have the message hidden, and show it on top of the form on submit.

Enable and disable pages to created Gated Content

You can create Gated Content within the Studio by using Enable/Disable page Interactions.

1. After designing all of your pages, disable the pages you want to be gated by clicking the arrow in the page selector and selecting “Disable.”

2. Once disabled, the page will appear greyed out in the page navigator. Disabled pages will not be navigable until an interaction enables them – e.g. on form submit > enable page x.

3. With the form still selected, navigate to the Interaction panel and set up an On Submit>Enable Pages interaction for your form.

4. Enter individual page numbers, separated by a comma, and/or a range of pages into the Enable page field.

5. Click update.

Note: Forms will always honor the Redirect URL or “Thank you” set in HubSpot. If you would like to design a custom follow-up using a Ceros interaction, you must have a “Thank you” message set up in HubSpot.

All of the other interactions, such as page navigation, show, hide, etc. will behave just as they normally would. Click here to learn more about Studio interactions.

When your form is live

Forms are live in your experience preview as well as your published experience. If you enter information and submit the form in the experience preview, the information will still be sent to HubSpot.

Disconnecting your HubSpot Account

You can disconnect the Studio from your HubSpot account at any time by deactivating the toggle in the Integrations panel. Users will no longer be able to add or replace forms in the studio. The form chooser will no longer be available. Users will still be able to move, edit, preview, and publish forms that are already existing in any experiences.

HubSpot user, but not using Ceros? Learn more about our integration and request a demo here!