Setting up HubSpot for Episerver

The HubSpot® add-onA plug-in or module, developed by Episerver or its partners, to extend the capabilities of Episerver. Add-ons are available from the Episerver Add-on Store inside Episerver. automatically exports form data from your website to your HubSpot account database by mapping Episerver form fields to HubSpot database fields. For information about other Episerver add-ons, see Episerver Connect for Marketing Automation.

You need a separate license to install Episerver Connect for Marketing Automation with HubSpot into the Episerver user interface or into your Visual Studio environment. Also, you can use only one marketing automation product at a time. See Episerver World for details about installation and configuration.

You can watch the following demonstration video, Personalizing content with Episerver and the HubSpot database. Click the title of the video to open it in a new browser window. (2:34 minutes) See also Personalizing content.

  1. In your HubSpot account, on your user profile's Account tab, ensure that the API user box is checked.
  2. Log into the Episerver site and establish a connection with HubSpot.
    1. Open the global menu and click HubSpot. The HubSpot configuration settings screen appears.
    2. Enter a HubSpot API Key associated with your HubSpot account.
    3. Click Save.
  3. Select CMS > Edit to access pages on your website. You can create a new form to a block or a page (depending on your configuration). The following instructions describe creating a form in a new block.
  4. On a page, create a form in Episerver and connect to HubSpot with the following instructions. See Using forms (Legacy).
  5. Click Browse next to the form field. The Select Form screen appears.
  6. Click Contact from the Folder field at the top of the dialog box. The dialog box contents change.
  7. Click Create to start a new form. The Edit form screen appears.
    • Name of form. Give the form a name.
    • Form folder. MA DB: [0] Contact is the only value available to HubSpot.
    • Page shown after the form has been sent. Choose an existing page to display when a visitor submits the form.
    • Form can be sent without logging in. Enable to let the visitor submit the form without having login credentials.
    • Same person can send the form several times. Enable this to permit multiple form submissions.
  8. Select Table Layout > Add Row for as many fields as you want to display on the form.
  9. From the Form Fields tab, select a row and select the type of field that you want. The Properties pane appears. The following image shows a Text box selected to create a field for an email address.
    1. The Name field in the Properties pane lists the HubSpot database fields to which you map the field on your form. For example, email to email, First Name to Firstname, Last Name to Lastname, and so on.

      You must have one field mapped to the HubSpot email database field; other fields are optional. You can map one Episerver form field to only one HubSpot field. For example, you cannot map both Episerver email1 and email2 fields to the HubSpot email database field.
      Also, if you did not provide credentials for HubSpot, an empty text box appears below the form mapping drop-down field because the drop-down field did not get populated with HubSpot values.

    2. If a field requires validation, select the validation type from the Validate as field. For example, you can ensure that a Date of Birth is entered only as MM/DD/YYYY.
    3. Repeat this step for each field on the form. Be sure to add a Submit button so the contact information gets sent to the HubSpot database.
  10. Click Save and Close. The new form appears in the Select Form screen.
  11. Select the form and click Use to add the form to a page or a block.

Retrieving contact data

When a visitor submits the form, the data is sent to HubSpot. To see who submitted the form, go to HubSpot > Email > Email to open the subscribers screen, and choose Subscribers > All Subscribers.

Personalizing the form using a block

You can personalize a form to show only to a selected group of people. The following image shows personalizing a form to show only for people in the US Web Designers visitor group. For more information about creating a visitor group and displaying information based on a visitor group, see Personalizing content and Visitor groups.

Creating a visitor group for a HubSpot form

The HubSpot add-on integrates HubSpot web tracking to Episerver’s personalization engine by identifying a visitor via the _hsmai_trk cookie.

The following sets of visitor group criteria let you personalize your website content in Episerver CMS:

  • Profile. Identifies a visitor against metadata stored in HubSpot .
  • Scoring Model. Identifies a visitor based on scores against specific HubSpot scoring models.

When you set up criteria in a visitor group, the fields do not automatically populate with values. You must supply these yourself. Ensure that a field you create matches the type of field from the connector provider.

To create a visitor group, you can combine criteria, such as a geographic location and the scoring model criteria in HubSpot . See Visitor groups for information about creating visitor groups.

Defining visitor groups for HubSpot forms

Profile criteria

  1. Create a form block and a form.
  2. Save the form to a folder in the HubSpot database.
  3. Drag the form block to the page in your campaign or program, and publish it at the appropriate time.
  4. In Episerver CMS > Visitor Groups, create a visitor group using the Profile criteria. In this example, the desired visitors for the campaign or program have a profile containing Sweden in the Country column. A contact with this value is added to the HubSpot database.

Scoring model criteria

HubSpot uses a simple scoring model of the total score for a contact (called Lead Score), which you can change by a flow action in a smart campaign.

  1. In Episerver CMS > Visitor Groups, create a visitor group using the Scoring Model criteria.
  2. Create a form block and a form.
  3. Save the form to a folder in the HubSpot database.
  4. Drag the form block to the page in your campaign or program, and publish it at the appropriate time.

    When a contact has entered a specific form field, HubSpot adds a value to its database, (determined by the scoring model you set up, such as Scoring001_Score= 10).

    You can combine the Profile and Scoring Model criteria to select, such as visitors from Sweden with a total score over 10.

back to top




Episerver User Guide 16-8 | Released: 2016-11-14 | © Episerver 2016 | Send feedback to us