Integrating the WhatsApp Business Platform with HubSpot

HubSpot is a customer relationship management (CRM) platform that enables organizations to market, sell, and support their products or services more effectively.

The WhatsApp Business Platform allows businesses to use the Cloud API, hosted by Meta to communicate directly with their customers from their CRM through WhatsApp integrations. This provides easy access to messaging features and allows direct integration with most existing tech stacks.

Here we’ll take a look at how to set up this kind of integration with HubSpot and create a workflow within the CRM to automatically respond to messages based on events and custom rules on the HubSpot platform from WhatsApp.

Prerequisites

In order to complete this tutorial, you will need:

• A WhatsApp Business account.

• A Meta for Developers account.

• A HubSpot App Developer account (select App Developer if creating a new account). Hubspot App Developer accounts provide features and services listed in their terms and conditions, including giving access to their CRM APIs and the ability to create apps.

• A URL that points to the running instance of this sample Glitch app to receive messages from WhatsApp Business Messenger.

This article assumes you are familiar with the WhatsApp Business Platform, Meta for Developers, and HubSpot.

Sending Messages

The first step is setting up your accounts. To do so:

1. Create a Facebook developer account or log in if you have one already.

2. Complete the “Set up Developer Assets and Platform Access” step in the official get started documentation, and send a test message.

3. Add your phone number to the Cloud API app configuration.

Receiving Messages with a Sample App

We’ll need to set up a webhook and a webhook subscriber URL with an endpoint to test your webhooks. To do this we’ll be using the sample app mentioned above.

Click the Remix to Edit button on the top right to be able to edit the configuration details.

Open the .env file, paste your Cloud API access token into the WHATSAPP_TOKEN field. For the VERIFY_TOKEN, you can enter any string, but keep it handy as we’ll use it later.

Set up the Cloud API Webhook

Next, set up the webhook for the API to allow subscriptions to updates or responses to event changes by starting from the Meta for Developers App Dashboard for your app. Click the navigation bar for WhatsApp. Then, under Getting Started, click Configuration, then click Edit.

Complete the Callback URL and Verify token fields in the Edit webhook’s callback URL dialogue box. The callback URL will be https://<<PROJECT NAME>>.glitch.me. Replace project name with the name of your project (e.g. https://defiant-standing-mirror.glitch.me). Then verify the URL is the same as above.

Click Verify and save. Check out the developer guide for more details on the WhatsApp webhook setup.

Now you can send test notifications to the endpoint.

On the same page, under the Edit button, click Webhook fields, then click Manage and subscribe to the events you intend to listen for through the endpoint. Next, click Test to send a notification message to the recipient phone number configured earlier.

To verify the app is running and listening to events, go to Glitch, click logs, and view the logs for your selected event.

Setting up the HubSpot CRM

Now, you set up the HubSpot CRM to automatically send WhatsApp messages to customers who’s contact info includes a phone number.

Go to the HubSpot platform and login to your developer account or create one. The developer account provides a 90-day free trial of all HubSpot’s enterprise features, including marketing, sales, service, and CMS, so you can test the HubSpot API and tools.

After setting up your developer account, click Manage test accounts.

Then select Create an app test account, name it demo_whatsapp_integration (or whatever you’d like) and click Create.

Click the newly created app test account and navigate to its dashboard. Then click Contacts on the top left of the navigation bar. You will see two demo contacts. Feel free to remove them and add a new contact that includes a test phone number to use for WhatsApp testing.

Connect WhatsApp With HubSpot CRM

Next we’ll need to install a WhatsApp integration with HubSpot CRM. First, go to Settings in HubSpot. Under Account Setup, click Integrations, followed by Connected Apps.

Select Visit App Marketplace. Use the Search field to search for the WhatsApp application. Click WhatHub: WhatsApp Integration.

Select the demo_whatsapp_integration account and click Choose Account. You’ll then be able to see a WhatsApp icon on the contact page next to the other contact options. Click it to begin sending messages from the HubSpot CRM. You can use either custom messages or the predefined templates.

You’ll be able to see a list of messages and their status on the Activity tab as well.

Setting Up an Automated Workflow

Next, we’ll incorporate this into a workflow triggered by an event in the CRM. To do this, we’ll set up a custom workflow from the HubSpot dashboard. Click Automation in the navigation bar and then click Workflows to open the Workflow dashboard.

Click Create workflow and select the From scratch option. Now, click Contact-based, followed by next.

Click Set up triggers and select the WhatsApp message sent from HubSpot portal integration event option.

Select the Message sent filter type, set the workflow trigger to “is equal to any of,” and specify the value as Buy item. Finally, click the Apply filter and then Save.

Next, click the + icon and add another action. On the Choose an action list, click Create task.

Name it “Test Task” and assign it to your test account then click Save. Next, click Review, publish, and turn on the workflow by clicking “Turn on” in the window’s top-right corner.

Now, select Test and choose your test contact to test the workflow. This triggers the workflow, as shown below.

Next, we’ll create an integration that listens for WhatsApp and automatically updates data in the HubSpot CRM when a notification is received. Before setting up the workflow, we need to add the test contact to a list. Click Contacts, then Lists, to create a new list.

Once that’s done, navigate to the Workflow page and create a new workflow and name it “WhatsApp Automation.”

Select contact-based lists, add the list name, then select static list. Click Next and then click the + Add filter button.

Now, choose List membership from the Add filter list to add it as a filter and then click Save list.

Now you can continue setting up the workflow. Do this by selecting Contact-based and add the contact enrollment trigger to the List membership.

Set up a task to be triggered when this workflow is activated. Check that this task appears in the Actions timeline, and click Save.

On the Choose an action list, click Send a webhook.

Next, create an action for the workflow to send the payload to the endpoint when the workflow is triggered.

Make sure you use the URL you set up previously in the tutorial. Click Save. Finally, proceed to test the workflow like you did before: open the Test list, select your test contact from the Preview for list, and click Test. The workflow is complete.

Now let’s check your logs and Actions timeline. Navigate back to the Actions timeline to review the created task.

To check your logs, go back to your running Glitch app and view the Logs to confirm message delivery.

Conclusion

Integrating the WhatsApp Business Platform with HubSpot enables you to automate sending and receiving messages based on the rules you create for the events and actions taken by your customers.

This article covered how to connect these two services in a step-by-step tutorial to send WhatsApp messages to contacts with registered details in Hubspot. You set up custom workflows that trigger actions based on predefined events. Additionally, you set up a workflow that sends a notification to a previously set up endpoint and begins a new task.

To ensure your message flows and delivers timely, relevant, and expected updates to your customers, you should be mindful about the quantity of messages. Avoid spamming users to keep your customers happy and engaged.

For more on ways you can integrate WhatsApp into your apps and projects, see our other developer tutorials.