Как подключить официальный WhatsApp бизнес API через Gupshup и интегрировать с Битрикс24
В данной пошаговой инструкции мы подробно опишем весь процесс получения доступа к WhatsApp Business API через официального партнера Facebook — сервис Gupshup и подключения WhatsApp к Открытым линиям Битрикс24 CRM. Данный сервис мы нашли для себя, для своих бизнес задач и хотим этим поделиться с вами.
Отличительные особенности сервиса Gupshup
- Можно подключать любые свои существующие номера телефонов (мобильные, стационарные, виртуальные). Количество подключаемых телефонных номеров не ограничено и не влияет на стоимость. То есть, можно организовать неограниченное количество каналов.
- Нет ежемесячной абонентской платы и платы за подключение. В рамках 24 часового сессионного окна оплачиваются только сессионные входящие и исходящие сообщения по цене $0.001 (~7—8 коп.) за одно сообщение. Пополнение баланса сервиса от $10 любой банковской картой. Время использования средств на балансе не ограничено. Нет ограничений по количеству диалогов и клиентов.
- Для возможности написать пользователю по истечению 24 часов с момента последнего сообщения от него, можно подготовить специальные шаблоны и получить их одобрение со стороны WhatsApp. Общая стоимость отправки шаблонного сообщения составит $0.001 (~7—8 коп.) + стоимость сообщения по тарифам WhatsApp (для России $0.0477 (~3—4 руб.)).
- При регистрации в сервисе, на баланс бесплатно зачисляется $1. Эти деньги можно расходовать на полноценное использование сервиса в начале работы. Если к примеру отправлять и получать только сессионные сообщения, то хватит на 1000 сообщений. Время использования пробного баланса не ограничено.
Основным условием Facebook для подключения к WhatsApp Business API является наличие зарегистрированного юридического лица, например ООО или ИП, на физическое лицо доступ получить не получится.
Итак, начнем двигаться по шагам.
1. Создание аккаунта в Facebook Business Manager
Если у Вас уже есть аккаунт в Facebook Business Manager, то пропустите этот пункт и переходите к следующему.
Войдем в свой личный аккаунт в Facebook и создадим аккаунт Business Manager, для чего перейдем по ссылке https://business.facebook.com/overview и нажмем кнопку «СОЗДАТЬ АККАУНТ», откроется окно для ввода данных компании. Согласно подсказкам над полями, вводим название компании, имя и фамилию, e-mail и нажимаем кнопку «Отправить». В следующем окне введем информацию о компании и нажмем кнопку «Отправить». После отправки появится сообщение, что аккаунт создан и необходимо подтвердить адрес электронной почты. Зайдем в почту и нажмем на кнопку «Подтвердить» из письма. Если у Вас эта кнопка уже активна или ваша компания уже подтверждена в Facebook Business Manager, то пропустите этот пункт и переходите к следующему. По умолчанию, кнопка для начала подтверждения компании в Facebook Business Manager не активна. Для того, чтобы её сделать активной, нужно произвести описанные ниже действия. Залогиньтесь в https://developers.facebook.com. Для этого нажмите в верхнем меню на пункт «Начало работы». В следующем окне нажмите кнопку «Продолжить». В следующем окне поставьте галочку и нажмите кнопку «Подтвердить электронный адрес». В следующем окне выберите «Разработчик» и нажмите кнопку «Завершить регистрацию». В следующем окне нажмите кнопку «Создать приложение». В следующем окне выберите «Управление бизнес-интеграциями» и нажмите кнопку «Продолжить». В следующем окне введите любое «Отображаемое название приложения», выберите «Назначение приложения» — «Вы или принадлежащая вам компания», выберите ваш «Аккаунт Business Manager» и нажмите кнопку «Создание приложения». Если ваша компания уже подтверждена в Facebook Business Manager, то пропустите этот пункт и переходите к следующему. Перейдите в раздел «Центр безопасности» по ссылке https://business.facebook.com/settings/security. Кнопка «Начать подтверждение» стала активной. Нажмите ее для начала подтверждения. С официальной информацией от Facebook о подтверждении компании можно ознакомиться по ссылке: https://www.facebook.com/business/help/2058515294227817?id=180505742745347. На первом шаге подтверждения введем данные нашей компании: Юридическое название компании — название компании, как в указано в документах на регистрацию компании. Страна — страна регистрации компании. Адрес (улица, № дома) — улица и номер дома юридического адреса компании, как в указано в документах на регистрацию компании. Адрес 2/Населенный пункт — вводим, если имеется. Город — город юридического адреса компании, как в указано в документах на регистрацию компании. Штат/провинция/регион — регион юридического адреса компании, как в указано в документах на регистрацию компании. Почтовый индекс — почтовый индекс юридического адреса компании, как в указано в документах на регистрацию компании. Номер телефона компании — номер телефона, который принадлежит данному юридическому лицу (должны быть подтверждающие документы: договор, счета на оплату за телефон и т.п.). Сайт — адрес веб-сайта компании (домен сайта должен совпадать с доменом электронного адреса компании). На втором шаге подтверждения компании необходимо подтвердить юридическое название компании. Для этого нужно загрузить документы из списка: Мы, когда это делали для себя, загружали сканы ОГРН и ИНН компании. На третьем шаге подтверждения компании необходимо подтвердить юридический адрес и номер телефона компании. Для этого нужно загрузить документы из списка: Мы загрузили сканы: договора на аренду офисного помещения по юридическому адресу, информационного письма об учете в Статрегистре Росстата, счета на оплату за телефонный номер от оператора связи. На четвертом шаге необходимо получить и ввести код подтверждения. Для этого нужно в разделе «Выберите, как с вами связаться» выбрать телефон и нажать кнопку «Позвоните мне». Поле «Мой рабочий электронный адрес» оставляем пустым. Позвонит робот и продиктует цифры, которые нужно ввести в поле ввода кода подтверждения. Вводим цифры кода подтверждения и нажимаем кнопку «Отправить». Ждем подтверждения от Facebook, это может занять 2–7 рабочих дней. Мы получили подтверждение компании от Facebook в течении 1-го рабочего дня. Чтобы создать аккаунт в Gupshup, достаточно просто войти в этот сервис через любой из ваших существующих аккаунтов в Google, Facebook или GitHub на странице https://www.gupshup.io/developer/whatsapp-api. Сразу после входа, откроется Дашборд WhatsApp. Нажимаем там на кнопку «Создайте ваше первое приложение». Далее нажимаем на кнопку «API доступа». Вводим любое свободное имя приложения, например «TestApp555» и нажимаем кнопку «Отправить». Откроется длинная страница, прокручиваем ее мышкой вниз и нажимаем внизу кнопку «Следующее». Далее ниже появится кнопка «Перейти в дашборд» нажимаем ее для перехода туда. В дашборде https://www.gupshup.io/whatsapp/dashboard нажимаем на кнопку «Стать онлайн» в созданном приложении. На следующем экране нажимаем на кнопку «Я готов(а)». На следующем экране выбираем свою страну из списка. Затем прокручиваем фрейм вниз и нажимаем на кнопку «Следующее». На следующем экране заполняем форму данными о вашей компании согласно информации о вашей компании из Facebook Business Manager https://business.facebook.com/settings/info и нажимаем на кнопку «Следующее». На введеный в форму электронный адрес придет письмо от Gupshup с кнопкой для его подтверждения. Подтвердим этот email нажав кнопку «Verify Now» в тексте письма. После успешного подтверждения откроется окно «Email Verification Complete» и придет письмо, что email успешно верифицирован. Возвращаемся к окну с формой в Gupshup. Проверяем всю введенную информацию и нажимаем кнопку «Подтвердить». На следующем экране вводим ID вашей верифицированной компании в Facebook Business Manager, который скопируем на странице https://business.facebook.com/settings/info, и нажимаем кнопку «Сохранить». Если ваша компания еще не верифицирована, то появится ошибка: «The Facebook Business Manager ID does not seem to be verified. Please try again with a verified ID.» Если это так, то нужно будет сначала пройти верификацию вашей компании в Facebook Business Manager, и потом вернуться к данному шагу. Этот процесс подробно описан в 1–3 пунктах данной инструкции. Если все в порядке и ваша компания подтверждена, то откроется следующий экран, где мы вводим свой номер телефона, который хотим использовать для WhatsApp Business API. Обязательно перед этим изучаем правила Facebook по выбору такого телефонного номера по ссылке http://developers.facebook.com/docs/whatsapp/guides/phone-number. Выбираем код страны и вводим номер телефона, нажимаем кнопку «Сохранить». Далее вводим отображаемое имя вашей компании в WhatsApp. Обязательно перед этим изучаем правила Facebook по выбору отображаемого имени по ссылке https://developers.facebook.com/docs/whatsapp/guides/display-name. Вводим отображаемое имя и нажимаем кнопку «Сохранить». Далее, нужно будет подтвердить на вашей странице в Facebook Business Manager привязку к Gupshup, для этого в новой вкладке браузера переходим по ссылке https://business.facebook.com/settings/requests или в Facebook Business Manager в меню слева выбираем пункт «Запросы». Во вкладке «Полученные» будет полученный от Gupshup запрос, нажимаем на кнопку «Одобрить». Возвращаемся к окну Gupshup и нажимаем кнопку «Одобрил». Откроется окно с информацией о том, что Ваш запрос отправлен и ожидается его одобрение со стороны WhatsApp. Сообщается, что это займет от 2 до 7 рабочих дней. Часто все происходит быстрее, и возможно Вы получите ответ на ваш email уже в течении суток. Нажимаем на кнопку «Перейти в Дашборд». Откроется основная страница Дашборда и в списке приложений в синей кнопке мы увидим текущий статус «Ожидание подтверждения». После подтверждения, получим на email соответствующее письмо от Gupshup и статус в синей кнопке изменится на «Завершить верификацию». Далее нужно будет подтвердить ваш номер телефона с помощью SMS или голосового вызова. Для этого нажимаем на кнопку «Завершить верификацию». В открывшемся окне нажимаем на кнопку «Запросить код по СМС», если номер телефона мобильный, или «Запросить код через голосовой вызов», если номер телефона не мобильный. Ждем автоматического обновления экрана и отправки кода подтверждения на ваш номер. После отправки кода на ваш номер, автоматически откроется следующий экран, где мы вводим полученный код и нажимаем кнопку «Отправить». После успешной отправки откроется следующее окно с сообщением, что данные вашей учетной записи одобрены и верификация пройдена успешно. Нажимаем на кнопку «Перейти в Дашборд». Откроется основная страница Дашборда и в списке приложений мы увидим текущий зеленый статус «LIVE». Теперь можно использовать ваш номер телефона в WhatsApp Business API. Также можем настроить профиль вашей компании в WhatsApp, например загрузить изображение профиля и внести другую информацию о вашей компании. Для этого переходим по ссылке «Настройки профиля» в списке приложений для редактирования профиля. Откроется окно для редактирования профиля, вводим там всю нужную информацию. После ввода данных профиля, нажимаем на кнопку «Сохранить изменения». Для того, чтобы начать получать и отправлять сообщения через ваш подключенный номер телефона к WhatsApp Business API Gupshup, подключим ваш аккаунт Gupshup к вашему порталу Битрикс24. В Битрикс24 устанавливаем приложение WhatsApp Business API Gupshup из маркетплейса, для этого переходим по ссылке https://www.bitrix24.ru/apps/?app=aiappspro.whatsapp_business_api_gupshup_subscription и нажимаем на зеленую кнопку «УСТАНОВИТЬ». Если Вы еще не залогинились в маркетплейсе Битрикс24, то откроется всплывающее окно с кнопкой «ВХОД». Нажмите ее для входа под вашей учетной записью Битрикс24. После успешного входа в маркетплейс Битрикс24, в том же самом всплывающем окне, которое появилось после нажатия зеленой кнопки «УСТАНОВИТЬ», выбираем из списка ваш портал Битрикс24. В новой вкладке вашего браузера откроется ваш Битрикс24 с предложением установить приложение WhatsApp Business API Gupshup. Нажимаем синюю кнопку «УСТАНОВИТЬ». Ознакамливаемся с лицензионным соглашением и политикой конфиденциальности по ссылкам и ставим галочки в случае согласия с условиями. Нажимаем зеленую кнопку «УСТАНОВИТЬ». После успешной установки, в вашем Битрикс24 автоматически будет создан чат 24/7 поддержки приложения, в который Вы сможете писать в любое время, если будут возникать любые вопросы по работе с приложением. Итак приложение установлено, переходим к активации коннектора для WhatsApp Business API в Контакт-центре Битрикс24. Закрываем слайд установки приложение, переходим в Контакт-центр Битрикс24 и там кликаем по установленному коннектору «WhatsApp Business API Gupshup». В открывшемся слайдере настроек коннектора, кликните по кнопке «ПОДКЛЮЧИТЬ». Если в вашем Битрикс24 создано несколько Открытых линий, то ниже необходимо будет выбрать нужную Открытую линию, к которой Вы хотите подключить WhatsApp, и уже после выбора нажать кнопку «ПОДКЛЮЧИТЬ». В этом же самом слайдере откроется интерфейс настроек коннектора. В новой вкладке браузера перейдите в ваш Дашборд Gupshup по ссылке https://www.gupshup.io/whatsapp/dashboard, кликните по иконке вашего профиля и во всплывающем окне скопируйте API Key. Возвращаемся к окну настроек коннектора в Битрикс24 и в поле «Gupshup API key» вводим API Key, скопированный в вашем аккаунте Gupshup. В новой вкладке браузера возвращаемся в ваш Дашборд Gupshup по ссылке https://www.gupshup.io/whatsapp/dashboard и копируем номер телефона для поля «Gupshup sender», для чего переходим по ссылке «Настройки» в списке приложений в вашем аккаунте Gupshup. Откроется интерфейс настроек приложения в Gupshup, прокручиваем страницу вниз до раздела «Проверить API доступа и установить URL обратного вызова» и копируем телефонный номер из поля «Отправитель». Если ваш собственный номер телефона еще ожидает подтверждения, то в этом поле будет указан тестовый телефонный номер от Gupshup, который пока можно использовать для тестирования приложения. Не закрываем пока это окно настроек приложения в Gupshup, оно нам еще пригодится ниже. Возвращаемся к окну настроек коннектора в Битрикс24 и в поле «Gupshup sender» вводим скопированный номер телефона отправителя. Нажимаем кнопку «Подключить». После успешного подключения появятся сообщения «Коннектор успешно подключен» и «Скопируйте callback URL и введите его в настройках Gupshup». Копируем «Gupshup callback URL» нажатием кнопки «Копировать». Возвращаемся в наше открытое окно настроек приложения в Gupshup, кликаем по вкладке «URL обратного вызова / Свяжите со своим ботом», переключаем ползунок в положение «ON». Устанавливаем ниже все галочки в разделе «Выберите, какие события состояния сообщений вы хотите получать по URL-адресу обратного вызова». В поле «Введите URL обратного вызова» вводим скопированный в настройках коннектора в Битрикс24 «Gupshup callback URL» и нажимаем кнопку «Set» для применения настроек. Коннектор «WhatsApp Business API Gupshup» готов к работе! Если Вы еще ожидаете подтверждения вашего телефонного номера и хотите пока протестировать коннектор через тестовый телефонный номер от Gupshup, то прокрутите вверх страницу настроек приложения в Gupshup до раздела «Смарт-механизмы для регистрации и вовлечения пользователей» и кликните по иконке «Нажать на ссылку». В новой вкладке откроется кнопка для подтверждения согласия на прием тестовых сообщений. Установите галочку «I agree...» и нажмите кнопку «Send Message». Откроется приложение WhatsApp для отправки предустановленного сообщения «PROXY...» с вашего личного номера WhatsApp. Отправьте данное сообщение без изменения на тестовый номер Gupshup. Поступит ответ «Welcome! You’re now chatting with...». Теперь Вы можете отправлять тестовые сообщения, которые будут поступать в Открытую линию Битрикс24. Далее приведем примеры отправки и приема сообщений через рабочий номер телефона. Отправьте сообщение, например с Вашего личного номера WhatsApp на ваш номер телефона WhatsApp Business API, одобренный через сервис Gupshup. Примите сообщение в Открытой линии вашего Битрикс24 и напишите ответ. Поддерживаются любые типы сообщений: текстовые сообщения, изображения, видео, голосовые сообщения, файлы, координаты местоположения. Обработка сообщений производится в соответствии с настройками открытой линии. Для возможности написать пользователю по истечению 24 часов с момента последнего сообщения от него, необходимо подготовить специальные шаблоны и получить их одобрение со стороны WhatsApp. Сообщение не должно нести рекламный характер — WhatsApp одобряет только сервисные и транзакционные шаблоны. Шаблоны должны соответствовать правилам: Политика WhatsApp Business, Торговая политика WhatsApp. Шаблоны нужно создавать в вашем аккаунте Gupshup. Для этого перейдите в Дашборд Gupshup по ссылке https://www.gupshup.io/whatsapp/dashboard, перейдите по ссылке «Настройки» в списке приложений Gupshup. Прокрутите открывшуюся страницу настроек вниз до раздела «Проверить API доступа и установить URL обратного вызова» и там перейдите по ссылке «Посмотреть шаблоны». В новой вкладке браузера откроется страница «Список шаблонов». В открывшемся списке будут только шаблоны для отправки через тестовый номер Gupshup с пометкой «Разрешено к использованию на тестовом сервере». Для вашего номера их не получится использовать, нужно будет создать свои шаблоны. Для добавления своего шаблона нажмите на кнопку «Добавить еще». В открывшемся интерфейсе заполните все необходимые поля и нажмите кнопку «Предварительный просмотр и отправка». Ниже приводим пример заполнения полей для нашего одобренного шаблона. Проверьте все данные и нажмите кнопку «Отправить». После отправки, ожидаем 1–2 рабочих дня одобрения шаблона со стороны WhatsApp. Писем при этом никаких не приходит, проверять изменение статусов отправленных шаблонов нужно самим в своем аккаунте Gupshup. В фильтре выберите «Утверждено» и откроется список всех ваших одобренных шаблонов. Ниже на скриншоте приводим пример отправки шаблонного сообщения из Битрикс24. Во время установки в Битрикс24, приложение «WhatsApp Business API Gupshup» автоматически создает нового SMS-провайдера «[WhatsApp Business API Gupshup]», только при этом отправляются не SMS, а сообщения в WhatsApp. Отправка осуществляется как вручную, так и автоматически из любого места CRM: из роботов, бизнес-процессов, SMS и Мессенджер рассылок из раздела CRM-маркетинг, таймлайна Лидов, Сделок, Контактов и Компаний. Приводим примеры отправки таких сообщений ниже на скриншотах.
2. Активация кнопки «Начать подтверждение» в Facebook Business Manager
3. Подтверждение компании в Facebook Business Manager
4. Создание аккаунта в Gupshup и подключение своего телефонного номера к WhatsApp Business API
5. Подключение WhatsApp Business API Gupshup к Битрикс24
6. Создание шаблонов исходящих сообщений
7. Отправка автоматических сообщений в WhatsApp из Битрикс24
