---
url: https://docs.seen.io/api/guides/hubspot.md
description: >-
  Send contact data from a HubSpot workflow to Seen for video generation, then
  receive the player and thumbnail links back as contact properties.
---

# HubSpot

::: warning Prerequisites
Custom Webhooks are available in the **Professional** and **Enterprise** tiers of the HubSpot Marketing Hub, Sales Hub and Service Hub.

Custom Code in Workflows is available in the **Professional** and **Enterprise** tiers of the HubSpot Operations Hub.

A Project needs to be created in Seen Platform prior to setting up the integration.
:::

## Send data to Seen

1. Create a new [Workflow](https://knowledge.hubspot.com/workflows/create-workflows) in HubSpot to send data to Seen.

2. Define your [enrolment trigger](https://knowledge.hubspot.com/workflows/set-your-workflow-enrollment-triggers) for the Workflow. This decides who will be sent to Seen and when.

3. Add a new step: **Custom code**.

   ![Adding a Custom code step in a HubSpot workflow](/images/hubspot-custom-code-step.png)

   ::: warning
   In this example we use Node.js 20.x as the **Language**.
   :::

4. Create your Secret. See [Authorization](/api/authorization) for more information.

   ::: warning
   In this example we use the API Token option.
   :::

5. Use the code below as a starting point:

```javascript
const axios = require('axios');

// This is the correct structure of the main function, accepting event and callback
exports.main = async (event, callback) => {
    // Access the input fields from the workflow's event object
    const firstname = event.inputFields.firstname;
    const lastname = event.inputFields.lastname;
    const crm_id = event.inputFields.hs_object_id; // Use HubSpot Contact ID as crm_id

    // Create the Seen API payload
    const SeenApiPayload =
        {
            first_name: firstname,
            last_name: lastname,
            crm_id: crm_id // Use HubSpot Contact ID as crm_id
        };

    // Define the Seen API endpoint and API key
    const SeenApiUrl = 'https://next.seen.io/v1/projects/{{project_id}}/data'; // Replace with the actual endpoint
    const apiKey = process.env.ACCESS_TOKEN; // Securely retrieve your API key from HubSpot secrets

    // Make the API request
    try {
        const response = await axios.post(SeenApiUrl, SeenApiPayload, {
            headers: {
                'Authorization': `Bearer ${apiKey}`,
                'Content-Type': 'application/json'
            }
        });

        // Check if the response status is not in the success range
        if (response.status < 200 || response.status >= 300) {
            throw new Error(`API responded with status code: ${response.status}`);
        }

        // Log the success response
        console.log('Seen API Response:', response.data);
        callback({ outputFields: { hs_execution_state: "SUCCESS" } });
    } catch (error) {
        console.error('Error sending data to Seen API:', error.response ? error.response.data : error.message);

        // Set the workflow output to indicate failure
        callback({ outputFields: { hs_execution_state: "FAILURE", error_message: error.message } });
    }
};
```

::: warning

* Remember to modify the payload depending on the personalisations in your project.
* You can find your endpoint in the Run tab of your project.
  :::

6. Add additional steps for error handling if needed.

## Receive data back from Seen

1. Create new Contact Property fields for **Seen player URL** and **Seen Email Thumbnail URL**. These are the two properties we will be using in this example.
2. Create a new [Workflow](https://knowledge.hubspot.com/workflows/create-workflows) to receive data from Seen.
3. Choose **When a webhook is received** under **Advanced options**.
4. Create a Webhook Event, and finish the setup by following these steps:
   * Name your webhook.
   * Send a test event to the provided endpoint. You can send this yourself via [Postman](https://www.postman.com/) or another similar service using the payload structure defined earlier:
     ```json
     {
       "crm_id": "12345",
       "seen_player_url": "https://player.seen.io/v/yQJfUuCG3uMJc3YrGmzB",
       "email_thumbnail_url": "https://storage.googleapis.com/output-artifacts-prod/41769660-ab12-4cd5-8328-1cb3e1bea334/outputs/7d124bf9a700d98cc76aae46798fa82d75d83480228614b486daa62bc38b378d/email_thumbnail.jpg"
     }
     ```
   * Choose which fields you would like to save to a HubSpot contact and in which format. This example uses "crm\_id", "seen\_player\_url" for the Player link the receiver will use to watch their personalised video, and "email\_thumbnail\_url" for the personalised thumbnail image used in distribution. You can include additional fields as needed.
   * Assign `crm_id` under **Third party property label** as **Record ID** under **HubSpot property label**.
5. Create a new step: **Set property value** under the **CRM** menu.
   * Choose **Contact (Current Object)** as the **Target Object**.
   * Choose **Seen player URL** you created in step 1 as **Property to set**.
   * Choose your webhook as the Action output, and the player URL property as the value.
6. Create a new step: **Set property value** under the **CRM** menu.
   * Choose **Contact (Current Object)** as the **Target Object**.
   * Choose **Seen Email Thumbnail URL** you created in step 1 as **Property to set**.
   * Choose your webhook as the Action output, and the email thumbnail URL property as the value.
7. Navigate to your Project in Seen Platform.

   ::: warning
   This example uses a `crm_id` [custom property](/platform/settings/properties) for the unique IDs for Seen Platform. See [Create Data](/api/create-data) for more information about ID handling in the Seen Platform.
   :::

   * Click on **Add webhook**.
     * Add your HubSpot webhook URL.
     * Configure the payload.
8. You can now test the full integration flow.