Назад к новостям для разработчиков

Integrating the WhatsApp Business Platform with HubSpot

HubSpot — это платформа управления взаимодействием с клиентами (CRM), которая позволяет организациям более эффективно продвигать и продавать свои продукты или услуги, а также обеспечивать их поддержку.

Платформа WhatsApp Business позволяет компаниям использовать облачный API, размещенный на серверах Meta, для прямого общения с клиентами из своей CRM через интеграции WhatsApp. Это обеспечивает простой доступ к функциям обмена сообщениями и прямую интеграцию с большинством существующих технологических стеков.

В этой статье мы рассмотрим, как настроить подобную интеграцию с HubSpot и создать рабочий процесс в CRM для автоматического ответа на сообщения, основанные на событиях и пользовательских правилах платформы HubSpot, из WhatsApp.

Необходимые условия

Вам понадобятся:

  • аккаунт WhatsApp Business;

  • аккаунт Meta for Developers;

  • аккаунт HubSpot App Developer (при создании аккаунта выберите App Developer), с помощью которого вы получите доступ к разным функциям и службам, перечисленным в условиях использования, в том числе к API CRM и возможности создавать приложения;

  • URL, указывающий на запущенный экземпляр этого примера приложения Glitch, чтобы получать сообщения из WhatsApp Business.

Руководство рассчитано на пользователей, которые умеют работать с платформой WhatsApp Business, Meta for Developers и HubSpot.

Отправка сообщений

Прежде всего необходимо настроить аккаунты. Вот как это сделать:

  1. Создайте аккаунт разработчика Facebook. Если он у вас уже есть, войдите в него.

  2. Настройте ресурсы разработчика и доступ к платформе, как описано в руководстве по началу работы, а затем отправьте тестовое сообщение.

  3. Добавьте свой номер телефона в конфигурацию приложения облачного API.

Получение сообщений в приложении-примере

Теперь нужно настроить Webhooks и URL подписчика Webhooks с конечной точкой для тестирования ваших Webhooks. Для этого мы будем использовать упомянутый ранее пример приложения.

Нажмите кнопку Remix to Edit в верхнем правом углу экрана, чтобы отредактировать настройки конфигурации.

Откройте файл .env и вставьте маркер доступа облачного API в поле WHATSAPP_TOKEN. В поле VERIFY_TOKEN можно вставить любую строку. Это поле мы будем использовать позже.

Настройка Webhooks облачного API

Настроим Webhooks для API, чтобы разрешить подписку на обновления и ответы на изменения событий. Откройте панель приложений на сайте Meta for Developers. Нажмите панель навигации для WhatsApp. Затем в разделе "Начало работы" выберите "Настройка" > "Редактировать".

Заполните поля "URL обратного вызова" и "Маркер подтверждения" в диалоговом окне изменения URL обратного вызова Webhooks. Укажите URL https://<<PROJECT NAME>>.glitch.me. Укажите название своего проекта (например, https://defiant-standing-mirror.glitch.me). Затем убедитесь, что URL совпадает с указанным выше.

Нажмите "Подтвердить и сохранить". Дополнительную информацию о настройке Webhooks для WhatsApp см. в руководстве для разработчиков.

Экран изменения URL обратного вызова Webhooks

Теперь можно отправить тестовое уведомление конечной точке.

На той же странице под кнопкой "Редактировать" нажмите "Поля Webhooks" > "Управление" и подпишитесь на события, которые нужно прослушивать через конечную точку. Затем нажмите кнопку "Тестировать", чтобы отправить сообщение с уведомлением на ранее настроенный номер телефона получателя.

Экран полей Webhooks

Чтобы убедиться, что приложение запущено и прослушивает события, перейдите в Glitch, выберите Logs (Журналы) и просмотрите журналы выбранного события.

Экран просмотра журналов в Glitch

Настройка CRM HubSpot

Теперь настроим CRM HubSpot, чтобы автоматически отправлять сообщения в WhatsApp клиентам, в контактной информации которых указан номер телефона.

Перейдите на платформу HubSpot и войдите в свой аккаунт разработчика либо создайте его. Для аккаунта разработчика предлагается 90-дневный бесплатный пробный период использования всех функций HubSpot для организаций, в том числе для отделов маркетинга, продаж, обслуживания, а также CMS. Вы можете протестировать все API и инструменты HubSpot.

Настроив аккаунт разработчика, нажмите Manage test accounts (Управление тестовыми аккаунтами).

Интерфейс CRM HubSpot из аккаунта разработчика

Затем выберите Create app test account (Создать тестовый аккаунт приложения), укажите имя (например, "demo_whatsapp_integration" или любое другое) и нажмите Create (Создать).

Экран создания тестового аккаунта приложения

Нажмите созданный тестовый аккаунт и перейдите в его панель управления. Нажмите Contacts (Контакты) в верхнем левом углу панели навигации. Вы увидите два демоконтакта, которые можно удалить. Вместо них добавьте новый контакт с номером телефона для тестирования в WhatsApp.

Панель управления тестовым аккаунтом приложения

Подключение WhatsApp к CRM HubSpot

На этом шаге установим интеграцию WhatsApp с CRM HubSpot. Перейдите в раздел настроек на HubSpot. В разделе Account Setup (Настройка аккаунта) выберите Integrations (Интеграции) > Connected Apps (Подключенные приложения).

Экран подключенных приложений

Нажмите Visit App Marketplace (Перейти к площадке приложений). Найдите приложение WhatsApp через поле поиска. Выберите WhatHub: WhatsApp Integration.

Площадка приложений

Выберите аккаунт demo_whatsapp_integration и нажмите Choose Account (Выбрать аккаунт). После этого вы увидите значок WhatsApp на странице контактов рядом с другими вариантами контактов. Нажмите его, чтобы начать отправку сообщений из CRM HubSpot. Можно использовать собственные сообщения или готовые шаблоны.

Пользовательское сообщение WhatsApp

На вкладке Activity (Действия) можно также посмотреть список сообщений и их статусы.

Настройка автоматизированного процесса

Теперь добавим эти действия в рабочий процесс, запускаемый событием в CRM. Для этого сначала нужно настроить пользовательский процесс на панели HubSpot. На панели навигации выберите Automation (Автоматизация) > Workflows (Рабочие процессы), чтобы открыть панель рабочих процессов.

Нажмите Create workflow (Создать рабочий процесс) и выберите вариант From scratch (С нуля). Затем укажите Contact-based (На основе контакта) и перейдите далее.

Возврат к экрану рабочих процессов

Нажмите Set up triggers (Настроить триггеры) и выберите WhatsApp message sent from HubSpot portal integration event (Сообщение WhatsApp, отправленное через интеграцию с порталом HubSpot).

Экран настройки триггеров

Выберите Message sent filter type (Тип фильтрации отправленных сообщений), задайте для триггера процесса критерий is equal to any of (равно любому значению из) и укажите Buy item (Покупка товара). Нажмите Apply filter (Применить фильтр) и Save (Сохранить).

Затем нажмите значок "+" и добавьте новое действие. В списке Choose an action (Выберите действие) нажмите Create task (Создать задачу).

Экран выбора действия

Назовите ее "Test Task", назначьте своему тестовому аккаунту и нажмите Save (Сохранить). Затем нажмите Review (Проверка), опубликуйте изменения и нажмите Turn on (Включить) в верхнем правом углу, чтобы включить рабочий процесс.

Экран включения рабочего процесса

Нажмите Test (Тестировать) и выберите контакт для тестирования процесса. Процесс должен активироваться, как показано ниже.

Экран выбора тестового контакта

Далее мы создадим интеграцию, которая будет прослушивать WhatsApp и автоматически обновлять данные в CRM HubSpot при получении уведомления. Перед настройкой рабочего процесса необходимо добавить тестовый контакт в список. Нажмите Contacts (Контакты) > Lists (Списки), чтобы создать список.

После этого перейдите на страницу рабочих процессов и создайте новый процесс с именем "WhatsApp Automation".

Выберите списки на основе контактов, дайте списку имя и выберите статический список. Нажмите Next (Далее), а затем нажмите кнопку + Add filter (Добавить фильтр).

Выберите в списке List membership (Нахождение в списке) — это будет критерий фильтра. Нажмите Save list (Сохранить список).

Экран добавления фильтра

Теперь можно продолжить настройку рабочего процесса. Выберите Contact-based (На основе контакта) и добавьте в качестве триггера критерия List membership (Нахождение в списке) добавление контакта.

Экран триггера "Добавление контакта"

Настройте задачу, которая будет запускаться при активации этого рабочего процесса. Убедитесь, что задача отображается в ленте Actions (Действия), и нажмите Save (Сохранить).

В списке Choose an action (Выберите действие) нажмите Send a webhook (Отправить Webhooks).

Вариант "Отправить Webhooks"

Затем создайте следующее действие рабочего процесса: когда рабочий процесс активируется, на конечную точку должны отправляться полезные данные.

Экран отправки Webhooks

Используйте указанный ранее URL. Нажмите Save (Сохранить). Теперь протестируйте рабочий процесс, как вы это делали ранее: откройте список Test (Тестирование), выберите тестовый контакт в списке Preview for (Предварительный просмотр для) и нажмите Test (Тестировать). На этом настройка рабочего процесса завершена.

Теперь нужно проверить журналы и ленту действий. Вернитесь в ленту Actions (Действия), чтобы посмотреть созданную задачу.

Журналы и лента действий

Вернитесь в запущенное приложение Glitch и просмотрите раздел Logs (Журналы), чтобы проверить журналы и подтвердить доставку сообщения.

Просмотр журналов в приложении Glitch

Заключение

Интеграция платформы WhatsApp Business с HubSpot позволяет автоматизировать отправку и получение сообщений на основании правил, которые вы создаете для событий и действий, совершаемых вашими клиентами.

В этом пошаговом руководстве описано подключение этих двух служб для отправки сообщений WhatsApp контактам с зарегистрированными в Hubspot данными. Теперь вы знаете, как настраивать пользовательские рабочие процессы, которые запускают действия на основании заранее определенных событий. Кроме того, теперь вы умеете настраивать рабочий процесс, который отправляет уведомление на ранее заданную конечную точку и начинает новую задачу.

Чтобы ваши сообщения без проблем доходили до клиентов, а они получали своевременные, актуальные и ожидаемые обновления, обращайте внимание на количество сообщений. Избегайте спама, чтобы ваши клиенты оставались вовлеченными и были довольны вашим сервисом.

Другие способы интеграции WhatsApp с приложениями и проектами см. в наших руководствах для разработчиков.