<aside>

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

</aside>

Send data to Seen

1. Create a new Workflow in Hubspot to send data to Seen

2. Define your enrolment trigger for the Workflow. This decides who will be sent to Seen and when.

3. Add a new step: Custom code

   

   <aside>

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

   </aside>

4. Create your Secret - more information here

   <aside>

   In this example we use the API Token option

   </aside>

5. You can use the code below as a starting point:

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 } });
    }
};

<aside>

• Remember to modify the payload depending on the personalisations in your project.
• You can find your endpoint in the Run tab of your project </aside>

1. 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 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 or another similar service using the payload structure defined earlier:

       {
               "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. We are using “crm_id”, “Seen_player_url” for the landing page the receiver will be able to see their personalised film, and “email_thumbnail_url” for the personalised thumbnail image to be used in the distribution in this example. If you want to include additional fields, you can of course include those as well.
   • 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 landing page URL property as the value.

7. Navigate to your Project in Seen Platform

   <aside>

   This example uses a crm_id - custom property for the unique IDs for Seen Platform.

   More information about ID handling in the Seen Platform available here.

   </aside>

   • Click on “Add webhook”
     • Add your Hubspot webhook URL
     • Configure the payload.

8. You can now test the full integration flow.