HubSpot

Details an integration available for Hubspot, built and maintained by Umbraco HQ.

This integration provides a form picker and rendering component for forms managed within a Hubspot account.

Package Links

• NuGet install

• Source code

• Umbraco marketplace listing

Minimum version requirements

To ensure compatibility, check the Dependencies tab on NuGet for the required Umbraco CMS version. For example, see Umbraco.Cms.Integrations.Crm.Hubspot.

Authentication

The package uses the OAuth protocol for authentication or private access tokens if you are using a private app installed on your HubSpot account.

Additional Configuration

To support multi-region HubSpot forms, the following configuration is required:

Versions 9 and above

appsettings.json

  "Umbraco": {
    "Integrations": {
      "Crm": {
        "Hubspot": {
          "Settings": {
            "ApiKey": "[your_private_app_access_token]",
            "Region": "[region]"
          }
        }
      }
    }
  }

Version 8

For example, in Europe, a setting of eu1 should be used.

Self Hosted OAuth Configuration

The easiest way to configure the integration is to make use of an application Umbraco has pre-configured with HubSpot. With this in place, the authorization flow will go through a proxy website Umbraco maintains before redirecting back to your Umbraco backoffice.

From version 2.1.0, we introduced an alternate approach that requires a little more setup. It removes the need for relying on any services from Umbraco when using the integration.

To use this you need to setup your own app with HubSpot and use an extended configuration like this:

Versions 9 and above

appsettings.json

"Umbraco": {
  "CMS": {
    "Integrations": {
      "Crm": {
        "Hubspot": {
          "Settings": {
            ...
            "UseUmbracoAuthorization": true/false
          },
          "OAuthSettings": {
              "ClientId": "[your client id]",
              "ClientSecret": "[your client secret]",
              "RedirectUri": "https://[your website base URL]/umbraco/api/hubspotauthorization/oauth",
              "TokenEndpoint": "[hubspot token endpoint]",
              "Scopes": "[scopes]"
            }
        }
      }
    }
  }
}

Version 8

The authorization mode is toggled by the UseUmbracoAuthorization flag, which by default is set to true meaning that previous versions are not impacted.

Authorization specific methods are exposed by the IHubspotAuthorizationService and implemented by two services:

• UmbracoAuthorizationService

• AuthorizationService

The used service is provided using the AuthorizationImplementationFactory method, depending on the type of authorization selected.

If you are selecting your own authorization flow that uses the AuthorizationService, the redirect URL will be this one: /umbraco/api/hubspotauthorization/oauth, from HubspotAuthorizationController. Make sure to set to correct URL in the settings of the website and in the configuration of your Hubspot app.

The authorization controller uses the window.postMessage interface for cross-window communications when redirecting from the Hubspot authorization server.

Backoffice usage

To use the form picker, a new Data Type should be created based on the HubSpot Form Picker property editor.

The settings will be checked and a message presented indicating whether authentication is in place.

If OAuth is being used for authentication the Connect button will be enabled. When clicked, you will be prompted by the HubSpot authorization window.

The retrieved access token will be saved into the database and used for future requests.

The Revoke action will remove the access token from the database and the authorization process will need to be repeated.

If a private access token is used a message will be displayed notifying that the access token is being used.

Front-end rendering

A strongly typed model will be generated by the property value converter. An HTML helper is available, to render the form on the front end.

Ensure your template has a reference to the following using statement:

@using Umbraco.Cms.Integrations.Crm.Hubspot.Core.Helpers;

Assuming a property based on the created Data Type with the hubSpotForm has been created, render the form using:

@Html.RenderHubspotForm(Model.HubspotForm)