Перенос живого агента,Перенос живого агента

1. Введение

53003251caaf2be5.png6717b85f57d859d3.png

Последнее обновление: 23 августа 2021 г.

Передача живого агента с помощью Business Messages

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

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

Что ты построишь

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

49aca3df6b196c50.png

Что вы узнаете

  • Как хранить состояние разговора и управлять им.
  • Как использовать бизнес-сообщения для отправки событий передачи живого агента.
  • Как настроить вебхук и базовый пользовательский интерфейс для присоединения к беседам в качестве агента.
  • Рекомендации по использованию 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 содержит вебхук и все его вспомогательные методы. Это основной файл, с которым вы будете работать и в который будете добавлять.
  • представления : этот каталог содержит файлы шаблонов 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/ .

Затем на странице информации об агенте настройте основной и дополнительный типы взаимодействия: «Бот» и «Человек» соответственно.

db0cca5b74f999ad.png

Разговор с эхо-ботом

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

536313929e5c0b3e.png

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

3. Присоединяйтесь к разговору

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

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

Перейдите в каталог step-2 и снова разверните приложение, как вы это делали на предыдущем шаге.

При развертывании приложения вы увидите целевой URL-адрес. Перейдите по этому URL-адресу в браузере, чтобы просмотреть список диалогов, которые вы начали на предыдущем шаге. Состояние разговора в настоящее время — «Управляется ботом», поскольку эхо-бот выступает в качестве представителя нашего агента в этом разговоре.

8f624e9befb8e827.png

Кнопка «Присоединиться к чату» появляется, но пока ничего не делает. Из этого интерфейса вы также не можете определить, хочет ли пользователь поговорить с живым агентом.

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

Взгляните на метод обратного вызова в index.js . Комментарий TODO указывает, где вам нужно перехватить запрос пользователя на активный агент и обновить состояние потока.

шаг-2/маршруты/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.
      }
    }
  });
...
});

Вам нужно использовать методы в libs/datastore_utils.js , чтобы загрузить текущий поток диалога и обновить его состояние до QUEUED_THREAD_STATE .

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

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

e58d2b77e9c64492.png

Теперь, если вы вернетесь в CRM, вы должны увидеть в цепочке разговора примечание «Запрошен Live Agent». Этому пользователю нужна помощь человека! Вам необходимо реализовать конечную точку joinConversation , чтобы кнопка работала.

Найдите другой комментарий TODO в заглушенном методе для /joinConversation .

шаг-2/маршруты/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 .

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

Имя поля

Намекать

parent

Установите для этого параметра значение «conversations/{conversationId}».

eventId

Создайте свой собственный случайный идентификатор для события.

auth

Используйте предоставленный метод initCredentials .

resource

Это само тело события. Вы должны установить eventType и представителя.

Для получения помощи обратитесь к справочной странице метода create или справочной странице событий .

Завершив реализацию, повторно разверните приложение и нажмите кнопку «Присоединиться к чату» . Появится диалоговое окно «Присоединился к беседе », и статус чата изменится на «Живой чат». Если вы посмотрите на разговор на своем мобильном устройстве, вы увидите в чате заметку о том, что ваш живой агент присоединился.

Поздравляем! На следующем этапе мы рассмотрим, как заставить вашего живого агента разговаривать с вашим пользователем.

4. Обмен сообщениями как живой агент

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

Перейдите в каталог step-3 и повторно разверните приложение. В CRM щелкните ветку разговора из предыдущего шага. Теперь вы должны увидеть базовый интерфейс чата. Отсюда вы можете видеть сообщения пользователя в режиме реального времени.

46dd083f08f43961.png

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

Откройте файл routes/index.js и посмотрите на три недавно добавленные конечные точки:

  • /messages : получает файл представления messages.ejs и отображает его в браузере. Щелкая ветку разговора в указателе, вы переходите на одну из этих страниц.
  • /retrieveMessages : получает содержимое сообщения потока и возвращает форматированный список всех сообщений в разговоре. Страница сообщений периодически вызывает эту конечную точку для отображения последних сообщений.
  • /sendMessage : отправляет пользователю сообщение от представителя действующего агента. Страница сообщений вызывает это, когда вы нажимаете «Отправить». В настоящее время это не реализовано.

Теперь взгляните на существующий метод storeAndSendResponse :

шаг-3/маршруты/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. Теперь вы можете видеть, что ваши сообщения появляются в истории чата. Вы также можете видеть, как сообщения вашего агента появляются на вашем мобильном устройстве для тестирования.

49aca3df6b196c50.png

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

5. Выход из разговора

После того как вы поможете пользователю ответить на его вопросы, вы можете выйти из разговора и позволить пользователю снова поговорить с ботом. В Business Messages об этом изменении сигнализирует событие REPRESENTATIVE_LEFT .

Перейдите в каталог step-4 , повторно разверните приложение и вернитесь в ветку разговора. Теперь можно закрыть и оставить ссылку на беседу внизу ветки. Эта ссылка пока не работает, поскольку конечная точка leaveConversation не реализована.

ef4ad8107c3fff2.png

Посмотрите файл index.js . Существует комментарий TODO, инструктирующий вас создать новую конечную точку leaveConversation .

шаг-4/маршруты/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.

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

Что дальше?

Ознакомьтесь с некоторыми из этих лабораторий кода:

Дальнейшее чтение

Справочная документация