Интеграция WhatsApp в Shopify

7 марта 2023 г.Автор:Rashed Talukder

Подписаться на блог "Новости для разработчиков"

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

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

Предварительные требования

Чтобы пройти этот курс, вам потребуется:

установить Node.js и npm;
иметь магазин в Shopify с настроенным каталогом товаров и процессом обработки платежей;
зарегистрировать аккаунт разработчика в Meta for Developers, настроить приложение для бизнеса и выбрать аккаунт WhatsApp Business.

Выполнив последнее действие, вы получите временный маркер доступа. Он понадобится для дальнейшей работы с этим курсом, поэтому сохраните его.

Чтобы продолжить работу с курсом, убедитесь, что все требования выполнены.

Создание шаблона сообщения в WhatsApp

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

Чтобы создать сообщение с уведомлением о заказе, выполните следующие действия:

войдите в Business Manager и выберите свой бизнес-аккаунт;
нажмите значок с тремя горизонтальными линиями в верхнем левом углу страницы и выберите WhatsApp Manager;
на боковой панели навигации наведите курсор на значок Инструменты для управления аккаунтом и нажмите Шаблоны сообщений;
в верхнем правом углу страницы нажмите Создать шаблон;
на следующей странице выберите категорию Сообщения о транзакциях, дайте имя шаблону (здесь используется имя order_confirmation) и выберите его язык;

нажмите Продолжить, чтобы перейти в редактор шаблонов.

Вы создали шаблон подтверждения заказа order_confirmation. Теперь его нужно настроить. Сообщение должно отображаться для клиента следующим образом:

Мы получили ваш заказ!
[Имя клиента], здравствуйте!
Благодарим за покупку.
Мы уже обрабатываем ваш заказ № 23190. Он будет отправлен в течение 2–3 рабочих дней.
Когда это произойдет, мы отправим вам сообщение.

В редакторе шаблона в разделе "Заголовок" выберите Текст. Строка "Мы получили ваш заказ!" будет заголовком, а остальной текст будет скопирован в раздел текста.

Далее под полем текста дважды нажмите Добавить переменную, чтобы добавить две переменные. Скопируйте и вставьте первую переменную — {{1}} — туда, где должно быть имя клиента. Затем скопируйте и вставьте вторую переменную — {{2}} — в то место, где указывается номер заказа.

Ваше сообщение будет выглядеть следующим образом. Его можно посмотреть на этой же странице.

Нажмите Отправить, чтобы сохранить шаблон сообщения.

Ваш шаблон готов. С помощью платформы WhatsApp Business создайте Webhooks в профиле администратора Shopify и добавьте приложение, которое автоматически отправляет сообщение клиенту при оформлении заказа.

Webhooks для отправки уведомлений на сервер Express

Предположим, вы хотите отправлять автоматические сообщения клиентам каждый раз, когда они оформляют заказ в вашем магазине в Shopify. Для этого можно регулярно проверять, есть ли в магазине новые заказы. Однако постоянная отправка запросов API к магазину не так эффективна, особенно если новых заказов нет.

Гораздо эффективнее, если Webhooks будет отслеживать событие создания заказа в вашем магазине и уведомлять вас каждый раз, когда клиент размещает заказ.

Рассмотрим, как создать Webhooks создания заказа и связать его с сервером Express.

Настройка проекта Node.js

Для начала создайте папку проекта с именем "whatsapp-demo".

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

npm init -y

Установите библиотеку express, которая используется для создания веб-сервера в Node.js, выполнив следующую команду:

npm i express

Вы настроили среду разработки. Теперь нужно создать сервер Express.

Создание сервера Express

В папке whatsapp-demo создайте файл с именем test.js. Откройте его в своем обычном редакторе кода, а затем скопируйте и вставьте туда следующий код:

const express = require('express')
const app = express()

app.post('/webhooks/orders/create', (req, res) => {
 console.log('Yes, We got an order!')
 res.sendStatus(200)
})

app.listen(3000, () => console.log('Now running on port 3000!'))

Этот код настраивает базовый сервер Express, который выдает сообщение в терминале сервера, когда Webhooks отправляет уведомление о событии создания заказа.

Прежде чем связывать его с Webhooks в Spotify, нужно настроить туннель.

Настройка туннеля трафика HTTPS

Когда вы настраиваете Webhooks, Shopify запрашивает общедоступный URL-адрес, по которому он будет отправлять уведомление.

Если вы используете общедоступный сервер, укажите его URL. Если вы проходите этот курс на локальном компьютере, создайте туннель с общедоступным URL, использующим HTTPS.

Прежде всего необходимо установить ngrok. Для этого выполните следующую команду:

npm install -g ngrok

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

ngrok http 3000
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

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

Создание Webhooks в Shopify

Перейдите в профиль администратора магазина в Shopify и откройте Settings > Notifications (Настройки > Уведомления). Затем прокрутите вниз до раздела Webhooks и нажмите Create webhook (Создать Webhooks).

Добавьте Webhooks создания заказа и укажите созданный ранее URL туннеля или общедоступный URL.

Запустите локальный сервер в другом терминале с узлом index.js и нажмите Send test notification (Отправить тестовое уведомление).

Если всё настроено правильно, в терминале сервера вы получите сообщение "Yes we got an order" (Да, есть новый заказ).

Итак, вы настроили подключение между своим магазином в Shopify и сервером Express. Теперь отправим шаблон сообщения WhatsApp клиенту после размещения заказа.

Отправка сообщения на базе шаблона order_notification

Установите Axios, выполнив в терминале следующую команду:

npm i axios

Axios понадобится для выполнения запроса POST, который отправляет клиенту сообщение WhatsApp.

После установки Axios создайте ещё один файл в папке проекта и назовите его customMessage.js. Затем импортируйте axios и express в этот файл, используя следующий код:

const axios = require('axios').default
const express = require('express')
const app = express()

Теперь создайте маршрут для обработки уведомления о создании заказа от Shopify. Для этого выполните следующий код:

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);

const order = JSON.parse(body.toString());

console.log("Yes, We got an order!", order.customer.phone);
  
// Remaining code will go here

})

Когда Shopify вызывает /webhooks/orders/create с заказом, сведения о заказе отправляются по маршруту, указанному в res, втором аргументе функции асинхронного обратного вызова и объекта JavaScript.

Теперь необходимо получить из сведений о заказе номер телефона, имя клиента и ID заказа, чтобы использовать их в параметрах запроса API:

        const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
}

Показанный выше объект содержит все параметры, необходимые для выполнения запроса. Убедитесь, что имя шаблона, указанное в объекте, совпадает с именем шаблона, созданным в WhatsApp Business Manager.

Затем создайте объект config с вложенным объектом headers. Внутри объекта headers укажите в качестве значения поля Authorization маркер доступа WhatsApp (замените ACCESS_TOKEN своим маркером), а Content-Type присвойте значение application/json:

 const config = {
 headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type':   'application/json'}
};

Теперь создайте запрос POST с помощью Axios и передайте в качестве аргументов объекты config и data. Вложите методы then и catch, чтобы показать результат (или сообщение об ошибке, если объект promise не сработал):

  if (order.customer.phone) {
   return res.sendStatus(403);
  } else {
  axios
  .post(
    "https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
  data,
  config
  )
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

  return res.sendStatus(200);
}

Замените YOUR_WABA_ID своим ID WhatsApp Business из панели приложения WhatsApp, а API_VERSION — значением совместимой версии облачного API (по умолчанию это версия 15.0).

Приложение настроено!

Чтобы протестировать настройку, туннель ngrok должен по-прежнему работать, а вам необходимо запустить сервер Express в другом терминале:

node customMessages.js

Другие события Shopify

Shopify поддерживает ещё более 50 Webhooks для других событий. Вы можете подписаться на добавление товаров в корзину, обновление корзины, создание коллекций товаров и их обновления, сбои при транзакциях и многие другие.

Чтобы использовать любой из этих Webhooks, следуйте описанной выше схеме: создайте новый Webhooks в профиле администратора Shopify и зарегистрируйте тему как маршрут на своем сервере Express.

Как вы могли убедиться, платформа WhatsApp Business помогает вам легко общаться с клиентами как вручную, так и программным путем на основании событий в магазине Shopify.

Интеграция WhatsApp в Shopify позволяет отправлять клиентам множество сообщений в режиме реального времени. Сообщения можно отправлять автоматически (например, на основании события) или вручную. Все это легко настраивается и масштабируется. WhatsApp и Shopify в сочетании помогают сделать общение с клиентами последовательным и эффективным.

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

Метки:

Инструменты для разработчиков Платформы 2023 WhatsApp

ПОХОЖИЕ НОВОСТИ