HubSpot (Using zapier)

This guide explains how to integrate Instruqt tracks within HubSpot, a Customer Relationship Management (CRM) system for marketing, sales, and customer service using Zapier.

Integration methods

Integrating Instruqt tracks within HubSpot is based on embedding tracks with a custom parameter into HubSpot landing pages and processing user interactions with these landing pages through webhooks with a workflow automation tool like Zapier.

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:

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:

   <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:

   {
       "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:

🌐 Web UI

1. Open your browser and go to 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:

   <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 src-line.

4. Click Copy embed code.

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

HubSpot

1. Navigate to 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:

    <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 src-line. ↳ Notice the {{contact.hs_object_id}} variable in the src-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.

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:

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 with the copied URL.

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

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.

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

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:
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.

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.

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

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:

Video tutorial

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

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.