Hubspot

How to integrate Hubspot with SEEN

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.

Send data to SEEN

  1. Create a new Workflow in Hubspot to send data to SEEN
  1. Define your enrolment trigger for the Workflow. This decides who will be sent to SEEN and when.
  1. Add a new step: Custom code
    1. Notion image
      • In this example we use Node.js 20.x as the Language.
  1. Create your Secret - You will receive this token from SEEN
  1. 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 email = event.inputFields.email;
    const customer_id = event.inputFields.hs_object_id; // Use HubSpot Contact ID as customer_id

    // Create the Seen API payload
    const seenApiPayload = [
        {
            first_name: firstname,
            last_name: lastname,
            email: email,
            customer_id: customer_id // Use HubSpot Contact ID as customer_id
        }
    ];

    // Define the Seen API endpoint and API key
    const seenApiUrl = 'https://api.seen.io/v1/campaigns/campaign_slug/receivers/'; // 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': `Token ${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 } });
    }
};
  • Remember to modify the payload depending on the personalisations in your film.
  • You will receive your campaign_slug from SEEN to call the correct endpoint.
  1. Add additional steps for error handling if needed.

Receive data back from SEEN

  1. Create new Contact Property fields for “SEEN landing page URL” and “SEEN Email Thumbnail URL”. These are the two properties we will be using in this example.
  1. Create a new Workflow to receive data from SEEN.
  1. Choose “When a webhook is received” under “Advanced options”
  1. Create a Webhook Event, and finish the setup by following these steps:
      • Name your webhook
      • Send a test event to the provided endpoint. If you want to use the payload defined in our documentation, you can send this yourself via Postman or another similar service:
      {
              "customer_id": "101",
              "campaign_slug": "onboarding",
              "landing_page_url": "your.subdomain.com/v/12345",
              "video_url": "https://motions.seen.io/298abdcf-1f0f-46e7-9c26-a35b4c1e83cc/d3c1dffdf063986ad521a63e3e68fd7d1100c90a/output.m3u8",
              "thumbnail_url": "https://motions.seen.io/298abdcf-1f0f-46e7-9c26-a35b4c1e83cc/d3c1dffdf063986ad521a63e3e68fd7d1100c90a/thumbnail.jpg",
              "email_thumbnail_url": "https://motions.seen.io/298abdcf-1f0f-46e7-9c26-a35b4c1e83cc/d3c1dffdf063986ad521a63e3e68fd7d1100c90a/email_thumbnail.jpg"
      }
      • If you want to use a custom callback payload, SEEN can provide you with an example payload prior to sending a test event.
      • Choose which fields you would like to save to a Hubspot contact and in which format. We are using “customer_id”, “landing_page_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 [’customer_id’] under “Third party property label” as “Record ID” under “HubSpot property label“
  1. Create a new step: “Set property value” under the “CRM” menu.
      • Choose “Contact (Current Object)” as the “Target Object”
      • Choose “SEEN landing page 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.
  1. 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.
  1. You can now test the full integration flow.
Did this answer your question?
😞
😐
🤩

Last updated on September 17, 2024