1. Введение


Последнее обновление: 23.08.2021
Переадресация звонков оператору в режиме реального времени с использованием бизнес-сообщений.
Функция переключения между операторами в Business Messages позволяет вашему оператору начать разговор в качестве бота, а в середине разговора переключиться на оператора (человека-консультанта). Бот может обрабатывать распространенные вопросы, например, о часах работы, в то время как оператор может обеспечить персонализированный подход, лучше понимая контекст пользователя. Когда переход между этими двумя режимами происходит плавно, пользователи получают ответы на свои вопросы быстро и точно, что приводит к повышению уровня вовлеченности и удовлетворенности клиентов.
В этом практическом занятии вы узнаете, как в полной мере использовать функцию перевода вызова оператора в режиме реального времени.
Что вы построите
В этом практическом задании вы создадите веб-хук для вашего агента, который сможет отправлять и получать события передачи запроса агенту в режиме реального времени. Для тестирования созданного вами интерфейса вы будете использовать базовый пользовательский интерфейс, предоставленный в стартовом коде.

Что вы узнаете
- Как хранить и управлять состоянием диалога.
- Как использовать бизнес-сообщения для отправки событий перевода звонков операторам в режиме реального времени.
- Как настроить веб-хук и базовый пользовательский интерфейс для присоединения к беседам в качестве агента.
- Рекомендации по использованию API бизнес-сообщений.
Данный практический урок посвящен использованию API бизнес-сообщений для реализации передачи сообщений оператору в режиме реального времени. Вы можете ознакомиться с исходным кодом для каждого этапа, но вам нужно реализовать только код, связанный с бизнес-сообщениями.
Что вам понадобится
- Агент Business Messages, включая ключ вашей учетной записи службы. Вы можете создать агента, следуя руководству по созданию агента .
- Рабочая конфигурация Cloud Datastore, связанная с проектом GCP вашего агента. Для настройки можно использовать руководство по быстрому запуску Cloud Datastore . Вам не нужно знать, как использовать Cloud Datastore.
- Компьютер с установленными Google Cloud SDK и Node.js (версия 10 или выше).
- Для тестирования пользовательского опыта потребуется устройство Android (версии 5 и выше) или устройство iOS.
- Опыт работы с веб-приложениями. Вам предстоит написать небольшой объем кода на JavaScript, и, возможно, потребуется отлаживать написанный код.
2. Создайте эхо-бота.
На этом этапе вы развернете базового представителя бота, называемого «эхо-ботом». Этот бот принимает сообщения пользователей, записывает их в цепочку сообщений в Cloud Datastore, а затем «повторяет» сообщение пользователя, отвечая тем же содержимым. После того, как у вас будет базовый бот и инфраструктура логирования, вы сможете расширить ее, чтобы создать полноценную реализацию передачи сообщений агенту в режиме реального времени на последующих этапах.
Получите стартовый код
В терминале клонируйте стартовый код Live Agent Transfer в рабочую директорию вашего проекта с помощью следующей команды:
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
Разберитесь в стартовом коде.
Давайте рассмотрим начальную структуру кода, с которой вы будете работать на протяжении всего практического занятия.
Перейдите в каталог step-1 и просмотрите его содержимое. Он содержит следующие элементы:
- bin : В этой директории находится стартовый скрипт www, который настраивает и конфигурирует сервер.
- libs : В этой директории находится файл
datastore_util.js, содержащий удобные методы для чтения и записи данных в Cloud Datastore. Вам не нужно понимать, как работает этот файл. Просто обратите внимание на доступные методы и их назначение. - Ресурсы : Здесь содержится ключ вашей учетной записи службы в файле с именем
credentials.json. - Маршруты : Файл
index.jsсодержит веб-хук и все его вспомогательные методы. Это основной файл, с которым вы будете работать и в который будете добавлять данные. - views : Эта директория содержит файлы шаблонов EJS для элементов пользовательского интерфейса. В последующих шагах она будет содержать больше файлов.
- Файлы app.js, app.yaml, package.json : Эти файлы настраивают приложение и его зависимости.
Перед развертыванием загрузите ключ своей учетной записи службы GCP и скопируйте файл учетных данных в формате JSON в каждый каталог ресурсов в примере кода. Повторите это для каждого шага практического задания.
cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json
Развертывание стартового кода
В терминале перейдите в каталог step-1 где находится пример. Затем настройте инструмент gcloud для использования вашего проекта Google Cloud, указав идентификатор проекта, который вы использовали для регистрации в API.
gcloud config set project <PROJECT_ID>
Для развертывания приложения выполните следующую команду:
gcloud app deploy
Обратите внимание на URL-адрес развернутого приложения в выводе последней команды:
Deployed service [default] to [https://PROJECT_ID.appspot.com]
В развернутом вами стартовом коде содержится веб-приложение с веб-хуком для получения сообщений от Business Messages. Приложение отправляет сообщения обратно пользователю и записывает цепочки сообщений в Cloud Datastore.
Настройте своего агента
Перейдите на страницу настроек учетной записи в консоли разработчика Business Communications и настройте веб-перехватчик на URL-адрес развернутого приложения. Например, https://PROJECT_ID.appspot.com/callback/ .
Затем на странице с информацией об агенте настройте основной и дополнительный типы взаимодействия, указав, что это должны быть «Бот» и «Человек» соответственно.

Ведение разговора с эхо-ботом
Откройте своего агента в консоли разработчика. Вы увидите страницу «Обзор» , где сможете просмотреть подробную информацию о вашем агенте. Скопируйте тестовый URL-адрес агента, соответствующий вашему мобильному тестовому устройству. Используйте этот URL-адрес на своем мобильном устройстве, чтобы запустить диалоговое окно вашего агента.

Взаимодействовать с агентом можно, отправив несколько сообщений. Интерфейс диалога лишь копирует ваши слова — это не очень удобный пользовательский опыт. Как жаль, что нет возможности поговорить с реальным человеком!
3. Присоединение к разговору
Теперь давайте посмотрим на разговор с точки зрения вашего оператора. Как оператор, вам необходимо знать некоторую информацию о разговоре, прежде чем присоединиться к нему, например, идентификатор разговора. Также полезно знать, запросил ли пользователь разговор с оператором. На этом этапе вы будете использовать стандартную страницу CRM (системы управления взаимоотношениями с клиентами), чтобы просмотреть эту информацию и присоединиться к разговору в качестве оператора.
В исходном коде для этого шага добавляется базовая CRM-система, которая отображает все текущие диалоги с агентом. Давайте посмотрим на эту CRM-систему, чтобы определить, какие разговоры могут потребовать внимания оператора.
Перейдите в каталог, step-2 , и снова разверните приложение, как это было сделано на предыдущем шаге.
После развертывания приложения вы увидите целевой URL-адрес. Перейдите по этому URL-адресу в браузере, чтобы увидеть список с цепочкой диалогов, которую вы начали на предыдущем шаге. В данный момент состояние диалога — «Управляется ботом», поскольку эхо-бот выступает в качестве представителя нашего агента в этом диалоге.

Кнопка «Присоединиться к чату» появляется, но пока ничего не делает. Также по этому интерфейсу невозможно понять, хочет ли пользователь поговорить с оператором.
В модуле «Деловые сообщения» есть событие «Запрос на общение с оператором» , которое указывает, когда пользователь хочет поговорить с оператором. Вам необходимо отслеживать это состояние, чтобы отображать его в пользовательском интерфейсе.
Взгляните на метод обратного вызова в index.js . Комментарий TODO указывает, где нужно перехватить запрос пользователя на связь с оператором и обновить состояние потока.
шаг-2/routes/index.js
/**
* The webhook callback method.
*/
router.post('/callback', async function(req, res, next) {
...
} else if (requestBody.userStatus !== undefined) {
if (requestBody.userStatus.requestedLiveAgent !== undefined) {
...
// TODO: Update the thread state to QUEUED_THREAD_STATE.
}
}
});
...
});
Для загрузки текущей ветки обсуждения и обновления её состояния до QUEUED_THREAD_STATE необходимо использовать методы из libs/datastore_utils.js .
Если вы не уверены, что делать, взгляните на решения. В стартовом коде под каждым шагом находится каталог solutions , где вам нужно доработать код. Эти каталоги содержат копию всего приложения с полной реализацией для данного шага.
После завершения внедрения и повторного развертывания приложения используйте меню дополнительных сообщений в диалоге на вашем мобильном устройстве, чтобы запросить связь с оператором.

Теперь, если вы вернетесь в CRM, вы увидите в ветке разговора сообщение «Запрос на помощь оператора». Пользователю нужна помощь человека! Вам необходимо реализовать конечную точку joinConversation , чтобы кнопка заработала.
Найдите другой комментарий TODO в заглушенном методе для /joinConversation .
шаг-2/routes/index.js
/**
* Updates the thread state and sends a representative join signal to the user.
*/
router.post('/joinConversation', async function(req, res, next) {
let conversationId = req.body.conversationId;
// TODO: Update the thread state to LIVE_AGENT_THREAD_STATE and post a REPRESENTATIVE_JOINED event.
res.json({
'result': 'ok',
});
});
Вам необходимо снова обновить состояние потока, на этот раз установив его на LIVE_AGENT_THREAD_STATE . Кроме того, вам нужно использовать метод conversations.events.create из API бизнес-сообщений, чтобы отправить событие REPRESENTATIVE_JOINED .
Для создания полезной нагрузки запроса необходимо задать поля, указанные в следующей таблице:
Название поля | Намекать |
| Установите значение 'conversations/{conversationId}'. |
| Сгенерируйте свой собственный случайный идентификатор для мероприятия. |
| Используйте предоставленный метод |
| Это сам текст события. Вам следует указать eventType и representative. |
Для получения справки обратитесь к справочной странице метода create или к справочной странице событий .
После завершения внедрения повторно разверните приложение и нажмите кнопку «Присоединиться к чату» . Появится диалоговое окно «Присоединился к беседе », и статус чата изменится на «Оперативный чат». Если вы посмотрите на беседу на своем мобильном устройстве, вы увидите сообщение о том, что ваш оператор присоединился к чату.
Поздравляем! На следующем шаге мы рассмотрим, как заставить вашего оператора общаться с пользователем.
4. Обмен сообщениями в режиме реального времени с оператором.
Теперь, когда вы присоединились к беседе, пришло время отправить несколько сообщений в качестве оператора в режиме реального времени.
Перейдите в каталог step-3 и повторно разверните приложение. В CRM щелкните по ветке переписки из предыдущего шага. Теперь вы должны увидеть базовый интерфейс чата. Отсюда вы можете видеть сообщения пользователей в режиме реального времени.

Однако отправка сообщения от имени агента пока не реализована. Вам необходимо завершить этот шаг.
Откройте файл routes/index.js и посмотрите на три недавно добавленных конечных точки:
-
/messages: Получает файл представленияmessages.ejsи отображает его в браузере. При щелчке по ветке обсуждения в индексе вы переходите на одну из этих страниц. -
/retrieveMessages: Получает содержимое сообщений в ветке обсуждения и возвращает отформатированный список всех сообщений в беседе. Страница сообщений периодически вызывает этот конечный пункт для отображения последних сообщений. -
/sendMessage: Отправляет сообщение от оператора пользователю. Эта функция вызывается на странице сообщений при нажатии кнопки «Отправить». В настоящее время она не реализована.
Теперь взгляните на существующий метод storeAndSendResponse :
шаг-3/routes/index.js
/**
* Updates the thread, adds a new message and sends a response to the user.
*
* @param {string} message The message content that was received.
* @param {string} conversationId The unique id for this user and agent.
* @param {string} threadState Represents who is managing the conversation for the CRM.
* @param {string} representativeType The representative sending the message, BOT or HUMAN.
*/
async function storeAndSendResponse(message, conversationId, threadState, representativeType) {
...
}
Веб-хук уже использует этот метод для отправки ответов от эхо-бота. Метод сначала сохраняет данные входящего сообщения в объекте Cloud Datastore для диалога. Затем он отправляет ответное сообщение. Внимательно изучите создаваемый им объект сообщения, особенно его тип.
Теперь реализуйте конечную точку /sendMessage самостоятельно. Для большей части работы вы можете использовать существующий метод storeAndSendResponse . Важно не забыть установить правильный представитель.
После того, как всё заработает, повторно разверните приложение и вернитесь к своим разговорам в CRM. Теперь вы сможете видеть свои сообщения в истории чата. Вы также сможете видеть сообщения вашего агента на своём мобильном тестовом устройстве.

Прежде чем продолжить, убедитесь, что вы понимаете, как работают новые конечные точки. На следующем шаге вы добавите свою собственную конечную точку для выхода из беседы.
5. Выход из разговора
После того, как вы помогли пользователю с его вопросами, вы можете захотеть выйти из диалога и позволить пользователю снова поговорить с ботом. В бизнес-сообщениях это изменение сигнализируется событием REPRESENTATIVE_LEFT .
Перейдите в каталог step-4 , повторно разверните приложение и вернитесь к ветке обсуждения. Теперь внизу ветки есть ссылка « Закрыть и покинуть беседу» . Эта ссылка пока не работает, поскольку конечная точка leaveConversation не реализована.

Посмотрите файл index.js . Там есть комментарий TODO, указывающий на необходимость создания новой конечной точки leaveConversation .
шаг-4/routes/index.js
/*
* TODO: Create a '/leaveConversation' endpoint that does the following:
* - Updates the thread to BOT_THREAD_STATE.
* - Sends a REPRESENTATIVE_LEFT event.
* - Sends a message to the thread informing the user that they are speaking to the echo bot again.
*
* Hint: You can use the same methods that '/joinConversation' uses.
*/
Для реализации этого вам необходимо объединить все, что вы изучили на практическом занятии. Этот конечный пункт должен выполнять следующие действия:
- Обновите состояние потока до
BOT_THREAD_STATE. - Отправьте событие
REPRESENTATIVE_LEFT. - Отправьте сообщение в диалоге, чтобы сообщить пользователю, что он общается с эхо-ботом. Используйте метод
storeAndSendResponse. Помните, что представитель снова сталBOT.
Последний шаг уточняет для пользователя состояние разговора. Пользователь видит событие, когда представитель покидает чат, но он не обязательно будет знать, что снова общается с эхо-ботом. Отправляя сообщение непосредственно от бота, вы уменьшаете путаницу у пользователя и улучшаете пользовательский опыт.
Теперь, когда бот обрабатывает запрос, ваш оператор может присоединиться к другому разговору. Попробуйте поэкспериментировать с примером кода и CRM-системой. Протестируйте различные идеи по улучшению процесса перевода звонков оператору в вашей компании и посмотрите, что у вас получится.
6. Подведение итогов
Поздравляем с завершением практического занятия по переносу агента в реальном времени!
Вы создали агента, способного обрабатывать переводы звонков от начала до конца. Вы также узнали один из способов отслеживания состояния разговора с помощью Cloud Datastore.
Благодаря функции передачи запросов оператору в режиме реального времени, вы сможете оставлять стандартные запросы своему боту, в то время как ваши операторы будут обрабатывать более сложные вопросы. Ваши пользователи будут более удовлетворены новым персонализированным и удобным интерфейсом, что повысит вероятность их возвращения и рекомендации вашей компании друзьям.
Что дальше?
Посмотрите некоторые из этих практических заданий:
Дополнительная информация
- Ознакомьтесь с основными принципами передачи запроса от бота к оператору в режиме реального времени, используя руководство по передаче запроса от бота к оператору .
- Превратите своего эхо-бота в бота для ответов на часто задаваемые вопросы, используя руководство Dialogflow .