# HubSpot (Using zapier)

This guide explains how to integrate Instruqt tracks within [HubSpot](https://www.hubspot.com/), a **Customer Relationship Management (CRM)** system for marketing, sales, and customer service using  [Zapier](https://zapier.com/).

### Integration methods

Integrating Instruqt tracks within HubSpot is based on [embedding tracks](https://docs.instruqt.com/tracks/share/embed-a-track) with a [custom parameter](https://docs.instruqt.com/tracks/share/embed-a-track#embed-custom-parameters) into HubSpot landing pages and processing user interactions with these landing pages through [webhooks](https://docs.instruqt.com/settings/platform/webhooks) with a workflow automation tool like [Zapier](https://zapier.com/).

The customer parameter holds the HubSpot contact ID and is the key element in the integration as it travels from step to step, connecting all systems involved:

![](https://2094212015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MGJDYBXyftBAZb1Wq0e%2Fuploads%2FzzT6pppJXkyE6D5DPkND%2FHubSpotIntegration.png?alt=media\&token=79d374da-f6d8-415f-b240-ea760faf8229)

Let's zoom in on the steps and systems in this integration:

1. HubSpot has a landing page with an embedded Instruqt track that holds the HubSpot contact ID as the custom parameter `icp_hsid` in the `src` property of its `<iframe>` element. For example:

   ```markup
   <iframe 
       width="1140" 
       height="640" 
       sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals allow-popups-to-escape-sandbox" 
       src="https://play.instruqt.com/embed/instruqt/tracks/container?token=em_yREWHxpW3xqWPimG&amp;icp_hsid=16025401" 
       style="border: 0;"
       data-service="play.instruqt">
   </iframe>
   ```
2. Your prospect starts playing the embedded Instruqt track.\
   ↳ The Instruct platform receives the custom parameter `icp_hsid`, strips the `icp_` part, and processes it further as the custom parameter `hsid` with the value `16025401` through webhooks events like `track.challenge_started`. The message content of the webhook event looks like this:

   ```json
   {
       "challenge_id":string"wmp8t3g5ktah"
       "challenge_index":int1
       "custom_parameters":{
           "hsid":string"16025401"
       }
       "invite_id":NULL
       "participant_id":string"lg1pzctxx014"
       "team_id":string"p1qlyur60v9g"
       "timestamp":string"2022-05-02T16:37:40.941645389Z"
       "total_challenges":int1
       "track_id":string"rif557kt3jx4"
       "track_slug":string"container"
       "type":string"track.challenge_started"
       "user_id":string"6C3esSlZD5S0toTldffZLnOo5JH3"
   }
   ```
3. Zapier catches the webhook message from the Instruqt platform and processes a `Create Engagement in HubSpot` action that writes a *Note* in HubSpot for the HubSpot contact that contains the `track ID` and `starting time`.

#### Application

With such an integration, you can keep track of statistics such as how many times a prospect has played your Instruqt track. Prospects who have played a track more than once are likely to have more potential so that you can focus on them.

## Before you begin

You must be added as a contact in HubSpot. And the same applies to the prospects that you want to track.

## Integrate with HubSpot

Now let's create an integration yourself.

### Step 1: Embed an Instruqt track into a HubSpot landing page

Start with generating and copying the HTML \<iframe> embed code from Instruqt:

{% tabs %}
{% tab title="🌐 Web UI" %}

1. Open your browser and go to [play.instruqt.com](https://play.instruqt.com/).\
   ↳ Instruqt shows your content.
2. Click the TRACK\_NAME of the track you want to embed.\
   ↳ Instruqt shows the corresponding *Track overview page*.
3. Click **Edit track details** followed by **Embed**.\
   ↳ The *Embed page* opens. And under `Embed Iframe` you will see a code snippet like this:

   ```markup
   <iframe 
       width="1140"
       height="640"
       sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals allow-popups-to-escape-sandbox" 
       src="https://play.instruqt.com/embed/TEAM/tracks/TRACK_NAME?token=YOUR_GENERATED_TOKEN"
       style="border: 0;">
   </iframe>
   ```

   ⇨ `TEAM` , `TRACK_NAME`*,* and `YOUR_GENERATED_TOKEN` will contain your team, track name, and token in the <mark style="color:red;">src</mark>-line.
4. Click **Copy embed code**.
   {% endtab %}
   {% endtabs %}

Now move over to HubSpot to embed the track in a landing page:

{% tabs %}
{% tab title="HubSpot" %}

1. Navigate to [app.hubspot.com](https://app.hubspot.com).\
   ↳ HubSpot opens the *User Guide page*.
2. Click **Marketing > Landing pages**.\
   ↳ You see a list of all landing pages.
3. Click **Create > Landing page**.\
   ↳ The *Create a page pop-up* opens.
4. In the **Page name** field, enter a name for your landing page—for example, `Introduction to GreatApp`.\
   ↳ The *Choose a template page* opens.
5. Select the **Landing page** template and click **Select template**.\
   ↳ Your new landing page opens in edit mode.
6. Drag a **Rich Text** module from the Add tab onto your landing page.
7. Delete the prefilled text from the added Rich Text module.
8. Click **Advanced > Source code**.\
   ↳ The *Edit source code pop-up* opens.
9. Paste the earlier copied *embed code* into the pop-up.
10. Modify the pasted *embed code* to this:

    ```markup
    <iframe 
        width="1140" 
        height="640" 
        sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals allow-popups-to-escape-sandbox" 
        src="https://play.instruqt.com/embed/TEAM/tracks/TRACK_NAME?token=YOUR_GENERATED_TOKEN&amp;icp_hsid={{contact.hs_object_id}}" 
        style="border: 0;"
        data-service="play.instruqt">
    </iframe>
    ```

    ⇨ `TEAM` , `TRACK_NAME`*,* and `YOUR_GENERATED_TOKEN` will contain your team, track name, and token in the <mark style="color:red;">src</mark>-line.\
    ↳ Notice the `{{contact.hs_object_id}}` variable in the <mark style="color:red;">src</mark>-line that will be replaced with the actual contact ID when your prospect opens the landing page. The actual contact ID is sent to Instruqt, and Instruqt processes it further as the custom parameter `hsid`.
11. Click **Save changes**.\
    ↳ You see a preview of your track now.
12. Click **Save** to store your landing page.
    {% endtab %}
    {% endtabs %}

### Step 2: Create a Zap (Zapier) that processes webhook events

HubSpot can't process Instruqt webhook events directly, but the workflow automation tool Zapier can, and Zapier has a connector for HubSpot. So, Zapier is used as an intermediary between Instruqt and HubSpot:

{% tabs %}
{% tab title="Zapier" %}

1. Create a new Zap.
2. Configure the *Webhooks by Zapier* trigger.
3. Select the *Catch Hook* trigger.
4. Copy the **Custom Webhook URL** that Zapier created for the *Catch Hook* trigger.
5. Go to Instruqt Web UI and [add an endpoint](https://docs.instruqt.com/platform/webhooks#add-an-endpoint) with the copied URL.
   {% endtab %}
   {% endtabs %}

Now go back to HubSpot to view your newly created landing page and start the embedded track:

{% tabs %}
{% tab title="HubSpot" %}
Your landing page is still opened in edit mode. From here:

1. Click **Publish** to publish your landing page.\
   ↳ The *Publish landing page pop-up* opens.
2. Click **Publish now**.\
   ↳ The *Published* page opens.
3. Click **More > View**.\
   ↳ The new landing page with the embedded track opens in a new browser tab.
4. Click **Launch** in the embedded track.\
   ↳ The Instruqt platform creates the environment.
5. Click **Start** to play the track.\
   ↳ Instruqt fires webhook event messages for this track now, which can be caught by the Zap. These webhook messages contain the custom parameter `hsid` which holds the HubSpot contact ID.
   {% endtab %}
   {% endtabs %}

Now go back to Zapier to finish catching and processing the webhook events:

{% tabs %}
{% tab title="Zapier" %}

1. Click **Test trigger** and select the request that Zapier caught.\
   ↳ Zapier shows the Instruqt webhooks message. Notice the custom parameter:

   ```
   custom_parameters:
       hsid: 16025401
   ```
2. Click **Continue**.
3. Click **+** to add a new action to your Zap and select **HubSpot**.
4. In the **Action Event** list, select **Find Contact** and click **Continue**.
5. In the **Choose account** list, select your HubSpot account and click **Continue**.\
   ↳ The *Set up action dialog* opens.
6. In the **First search property name** list, select **Contact information: contact ID**.
7. In the **First search property value** list, select **Custom Parameters Hsid**.
8. Click **Continue** and test the action.
9. Click **+** to add a new action to your Zap and select **HubSpot**.
10. In the **Action Event** list, select **Create Engagement** and click **Continue**.
11. In the **Choose account** list, select your HubSpot account and click **Continue**.\
    ↳ The *Set up action dialog* opens.
12. In the **Engagement Type** list, select **Note**.
13. In the **Note Body** field, enter **Started track**, and in the **Insert Data** list, select the `Catch Hook trigger`.
14. Click **Show all options** and click the **Track id** item to insert it into the **Note Body**.
15. Do the same for the **Timestamp** item.\
    ↳ Your Note Body should look something like this:\
    ![](https://2094212015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MGJDYBXyftBAZb1Wq0e%2Fuploads%2FNMqRu8a2zUpOFxGojH1h%2Fimage.png?alt=media\&token=da6d9466-071e-452b-9cca-c1c3fdb9fcdb)
16. In the **Id's of the contact objects that should be associated with engagement** list, select the **ID** item from the `Find Contact in HubSpot` action.
17. Click **Continue** and test the action.
18. Click **Turn on Zap**.
    {% endtab %}
    {% endtabs %}

{% hint style="info" %}
**Create Enterprise Event action**

If you have the *Marketing Hub Enterprise plan* for HubSpot, you can add a `Create Enterprise Event` action to your Zap instead of the `Create Engagement` action.
{% endhint %}

Now go back to HubSpot to view the note that Zapier created on behalf of Instruqt:

{% tabs %}
{% tab title="HubSpot" %}

1. Click **Contacts > Contacts**.\
   ↳ The *Contacts page* opens.
2. Click your name to open your contact details.\
   ↳ The *Contacts details page* opens.
3. Click the **Notes** tab.\
   ↳ You see the note that Zapier created:\
   ![](https://2094212015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MGJDYBXyftBAZb1Wq0e%2Fuploads%2FpvZNnBbAh0vUqdOT6wHJ%2Fimage.png?alt=media\&token=d3516f97-a922-463a-8066-3c25318ad027)
   {% endtab %}
   {% endtabs %}

#### Video tutorial

This video tutorial shows you how to embed a HubSpot form into a track:

{% embed url="<https://www.youtube.com/embed/IB7evweY29g>" %}

{% hint style="success" %}
Magnificent! Every time a prospect plays a track from your landing page, a note is written in HubSpot. This way you can track which prospects have a high potential. And inspired by this guide, you can design and build your own integration if you want to.
{% endhint %}