Thumbnail
WhatsApp Business API | Integration for HubSpot

In this tutorial, you will learn to integrate the Support Inbox WhatsApp channel with the HubSpot CRM, which will do exactly that automatically.

Integrating with HubSpot

Hi there!

Do you know the repetitive work of processing new customer contacts, when a customer sends you a WhatsApp message, you have to save it to your contacts and manually respond to welcome them? How about letting the computers do that for you?

In this tutorial, you will learn to integrate the Support Inbox WhatsApp channel with the HubSpot CRM, which will do exactly that automatically.

There are many integration possibilities with tyntec's Chat API and Support Inbox API. In this tutorial, you will achieve the following integration scenario: When a new customer messages to your WABA number, a new contact will be created in HubSpot with basic details and a free-form WhatsApp welcome message will be sent to the customer automatically.

You will need

  • A mobile phone with the WhatsApp application and a working phone number as a testing customer
  • Your WABA phone number that has been approved by tyntec
  • Your tyntec API key from the Business Center
  • A HubSpot CRM account with Super Admin access
  • Node.js and your favourite text editor or IDE with JavaScript highlighting

An ngrok account and the binary installed for development

Step One: HubSpot basic setup

Let’s get started with the basic setup of HubSpot.

  1. Create a HubSpot developer account, go to Manage apps and create an app, which will hold the webhook for processing contact creation events.
  2. In the app Auth tab, add oauth and contacts scopes for the app.

Important: Copy the client_id and client_secret of your app, you’re going to need them in the next step.

3. Create a custom contact property named origin. The app uses this flag to ensure that only contacts that came from WhatsApp, and not other contacts created in HubSpot, receive free-form welcome messages. This restriction is added to comply with the WhatsApp Business Policy.

Go to your non-developer HubSpot CRM account, then Settings and in the section Properties click on the Create property button.

Enter some Basic info for the property, important is to label the property as Origin.

Select Single-line text for the Field type and uncheck Show in forms, because this property will be used only by your app and not by humans.

Step Two: Get your integration app ready

For your quick start with integrations, we’ve prepared a WhatsApp HubSpot Integration Demo. Look at what the code does. You will notice that the server.js file contains two service routes (/ and /auth) to setup the app in HubSpot, and two integration webhooks:

  • /whatsAppTrigger which will handle callbacks from CMD API to receive a WhatsApp message from a customer, and calls HubSpot API to check that this contact is saved in the CRM and to create it, eventually.
  • /contactCreated which will handle callbacks from HubSpot API, once the new contact was created and calls CMD API to send the welcome message.

Let’s just quickly get your app running in the development style:

1. Clone the repository.
2. Install dependencies:

npm install

3. Run ngrok in a terminal:

ngrok http 3000

4. Set environment variables used by the app in your OS:

  • HS_CLIENT_ID – the client_id from HubSpot
  • HS_CLIENT_SECRET – the client_secret from HubSpot,
  • HS_OAUTH_REDIR – the redirect URI to complete app authorization (the /auth endpoint of your app),
  • CMD_API_KEY – the API key from tyntec,
  • WABA_NUMBER – your WABA number in the international format without leading +/00.

5. And finally, start the app in another terminal:

node server.js

Step Three: Subscribe your webhook to CMD

Let CMD know about your WhatsApp webhook!

1. Create a file subscribeCMD.json for subscription of your WhatsApp trigger webhook to WhatsApp message events in CMD:

{
  "events": [ "message" ],
  "url": "https://YOUR.ngrok.io/whatsAppTrigger"
}

2. Now use it with a call to CMD API to subscribe (fill in your API key and your WABA number or use the environment variables!):

curl -H "Content-Type: application/json" -H "Authorization: Bearer CMD_API_KEY" --data @subscribeCMD.json https://api.eazy.im/v3/channels/WABA_NUMBER@whatsapp.eazy.im/webhooks

There you go. The CMD API knows about your webhook and it will fire when it has a new WhatsApp message from a customer.

Step Four: Subscribe your webhook to HubSpot

Let HubSpot know about your other webhook!

1. Go back to your HubSpot app management in the developer account and in the app's settings select Webhooks.

Enter your webhook URL in the Target URL field, set throttling and save the setting.

2. Now click on Create subscription and subscribe to contact creation events.

Fill in the details and click on Subscribe.

3. To activate your subscription, select the checkbox of the subscription and click on Activate.

When it’s activated, it should look like this:

And that’s it!

Tip: HubSpot has the option to subscribe via its API as well, if you prefer that way.

Step Five: Install your app in HubSpot CRM

Awesome, now you get to install your app, so that HubSpot CRM connects with your webhook for created contacts.

1. Go to the root address of your app. The link is generated by your app and contains authorization information of your app required by HubSpot.

To initiate the installation of your app in the HubSpot, click the link.

2. Select the account, to which you want to install your app.

Any account that isn’t a developer account will do, it can be a CRM or testing account.

3. Grant access to the app and confirm that you’re not a robot.

Afterwards, HubSpot will redirect you back to your app to complete the authorization, which is done automatically.

4. Voila! Now when you check your Connected apps in your account > Settings > Integrations, you should see your app listed.

Step Six: Try it out

Let’s see what happens when a new user messages your WABA number.

1. In the dashboard of your non-developer HubSpot account, go to Contacts. You can see there are no contacts yet.

2. Now play at being a customer and send a WhatsApp message to your WABA number.

3. Voila! Contact created in HubSpot.

And you can see in the Support Inbox that your customer was sent a welcome message to their WhatsApp!

Congratulations on completing your integration!

Tip: You can do various other integrations as well by following similar steps. You might, for example, assign the customer as a new lead and based on that event, let your app create a task, assign it to an employee and notify them with a WhatsApp message on their work number.