Глава 6: Развертывание вашего чат-бота в вебе и социальных сетях

В Dialogflow ES доступно множество готовых интеграций. Вы можете включить их, чтобы вывести своих агентов на (несколько) каналов. В этой главе будут рассмотрены следующие (текстовые) интеграции.

Интеграция Dialogflow Hangouts позволяет создавать текстовых чат-ботов, которых можно включать в Google Chat (ранее известный как Google Hangouts), как для личных чатов, так и для чат-ботов в чат-комнатах. Эта интеграция доступна только пользователям Google Workspace (ранее известного как G Suite), и администратор Google Workspace должен разрешить пользователям устанавливать ботов из панели администратора Google Workspace (https://admin.google.com/).

Реализация веб-демо — это простая веб-реализация, которая позволяет использовать чат через клавиатуру и даже через микрофон браузера. Это быстрый и простой способ реализовать чат-бота на вашем веб-сайте, или вы можете включить статические HTML-веб-сайты или генераторы сайтов (например, Google Sites). Однако это решение не позволяет изменять внешний вид чат-бота. Оно также не будет отвечать пользовательскими расширенными сообщениями, такими как Google Maps, гиперссылки или расширенные карточки. Если это то, что вам нужно, вам лучше реализовать виджет Dialogflow Messenger (см. последний раздел этой главы). Если вы разработчик или у вас есть разработчик в команде, реализуйте продвинутый веб-чат на своем сайте (см. Главу 11).

Интеграция Dialogflow Messenger предоставляет настраиваемый диалог чата для вашего агента, который можно встроить на ваш веб-сайт через веб-компонент. Диалог чата реализован как диалоговое окно, которое может открываться и закрываться вашим конечным пользователем. При открытии диалог чата появляется над вашим контентом в правом нижнем углу экрана.

Интеграция вашего агента с Google Chat

Google Chat — это коммуникационное программное обеспечение Google, часть Google Workspace, созданное для команд. Оно похоже на Slack, а также имеет функции группового обмена сообщениями, которые позволяют обмениваться контентом Google Drive.

В консоли Dialogflow щелкните меню Интеграции.

Щелкните интеграцию: Hangouts Chat.

Выберите все в вашем домене, чтобы убедиться, что все в вашем домене Google Workspace могут получить доступ к чат-боту. (При желании выберите среду агента.) Нажмите Начать.

Затем нажмите кнопку Настроить детали бота; это перенаправит вас в консоль Google Cloud (https://console.cloud.google.com), как показано на Рисунке 6-1. (Убедитесь, что вы вошли в систему с той же учетной записью Gmail/Google, что и в Dialogflow.)


Рисунок 6-1. Настройки API Google Chat/Hangouts


Если все верно, все уже заполнено, но вы можете изменить поля. Таблица 6-1 показывает обзор всех настроек.

Таблица 6-1. Настройки Google Chat
Настройка Описание
Имя бота Имя, которое ваши пользователи будут видеть при взаимодействии с чат-ботом.
URL аватара URL-адрес HTTPS, указывающий на квадратное изображение (PNG или JPEG), размером не менее 128x128, которое будет отображаться как аватар вашего чат-бота.
Описание Описание функциональности чат-бота.
Функциональность Способ взаимодействия с чат-ботом:
  • Добавить в комнату
  • Сообщение: Прямые сообщения чат-боту
Настройки подключения Конечная точка для чат-бота. Поскольку мы используем Dialogflow, выберите Dialogflow.
Разрешения Разрешения, кто может установить вашего чат-бота; все в вашем домене или определенные люди/группы в вашем домене.

Нажмите Сохранить. Вы можете закрыть консоль Google Cloud.

Включение вашего агента в Google Chat

Из интерфейса чата (https://chat.google.com) вы можете нажать кнопку + рядом с заголовком Боты, чтобы добавить ботов в ваш разговор. См. Рисунок 6-2.


Рисунок 6-2. Добавление ботов в Google Chat


Вы увидите каталог, как показано на Рисунке 6-3, и оттуда вы сможете найти созданного вами чат-бота Dialogflow. Кнопка Добавить покажет небольшое всплывающее окно для выбора стиля взаимодействия. Вы можете добавить чат-бота в комнату с помощью Добавить в комнату или выбрать Сообщение.


Рисунок 6-3. Каталог чат-ботов Google


Бот как сообщение означает, что вы разговариваете напрямую с ботом; комната чата не требуется. Добавьте бота как сообщение и обратите внимание на Рисунок 6-4, когда вы дважды щелкнете имя бота, которое отображается в левом меню, вы начнете разговор.


Рисунок 6-4. С взаимодействием через сообщения вам не нужна комната чата; вы можете напрямую разговаривать с ботом


Когда вы добавляете бота в комнату, вы можете разговаривать со всеми пользователями в комнате чата, но когда вы посвящаете сообщение боту, вы будете использовать нотацию @, например, @dialogflowcookbook. См. Рисунок 6-5.


Рисунок 6-5. Разговор с ботом в комнате Google Chat с использованием нотации @


Поддержка расширенных сообщений

Чтобы отправлять сообщения Google Chat, отличные от текстовых ответов, вы можете использовать пользовательскую полезную нагрузку (custom payload) на вкладке Ответы Hangouts в консоли Dialogflow для определенного намерения. Сначала вам нужно будет добавить Hangouts в качестве ответа интеграции, что можно сделать, нажав вкладку + в разделе ответов намерения, а затем вы можете нажать кнопку Добавить ответы, которую вы можете видеть на Рисунке 6-6.


Рисунок 6-6. Выберите Добавить ответы ➤ Пользовательская полезная нагрузка, чтобы включить расширенные сообщения на вкладке интеграции Hangouts намерения


Пользовательская полезная нагрузка Hangouts позволяет создавать более продвинутые типы сообщений, такие как карточки. Одна карточка может иметь один или несколько разделов. Каждый раздел может иметь заголовок. Вы можете изучить справочное руководство по форматам сообщений карточек Hangouts из документации Google Chat, чтобы увидеть некоторые комбинации, которые вы можете создать с этим. Однако использование пользовательских полезных нагрузок означает, что вам нужно будет предоставить формат JSON. Пример можно найти в Листинге 6-1.

Листинг 6-1. Пользовательская полезная нагрузка Google Chat

{
 "hangouts": {
  "header": {
   "title": "Ordering a console",
   "subtitle": "Some Video Games Store",
   "imageUrl": "https://lh3.googleusercontent.com/v8c6Jn1Aa7s6YO-5Qy6hM4yQ5K4onxgjYD0fzxpOKA7m1Z_0rqOJcXuncd17_W7CeqOcL6d6RfTAAUr1OuHl8uk=rw"
  },
  "sections": [{
   "widgets": [{
    "keyValue": {
     "icon": "TRAIN",
     "topLabel": "Order No.",
     "content": "12345"
    }
   },
   {
    "keyValue": {
     "topLabel": "Status",
     "content": "In Delivery"
    }
   }]
  },
  {
   "header": "Location",
   "widgets": [{
    "image": {
     "imageUrl": "https://dummyimage.com/600x400/000/fff"
    }
   }]
  },
  {
   "header": "Buttons - i could leave the header out",
   "widgets": [{
    "buttons": [{
     "textButton": {
      "text": "OPEN ORDER",
      "onClick": {
       "openLink": {
        "url": "https://example.com/orders/..."
       }
      }
     }
    }]
   }]
  }]
 }
}

Примечание: При копировании и вставке примеров из справочного руководства в поле пользовательской полезной нагрузки в Dialogflow вам нужно будет знать следующее:

  • Первый ключ не может называться cards, он должен называться hangouts.
  • Ключ hangouts указывает на объект, а не на массив (карточек).
  • Убедитесь, что редактор не содержит ошибок линтинга.
  • И вы не можете протестировать результаты в симуляторе Dialogflow; вам придется тестировать их непосредственно в Hangouts Chat.

Дополнительные варианты интеграции на основе текста/с открытым исходным кодом

Dialogflow также поддерживает интеграцию со Slack, Telegram, Line, Facebook Messenger, Facebook Workplace, Kik, Skype, Twitter, Viber, Spark и Twilio. Кстати, интеграция со Slack несколько похожа на Google Chat, так как приложения довольно похожи.

На Рисунке 6-7 вы увидите обзор всех текстовых/открытых интеграций. Google постоянно добавляет новые интеграции.


Рисунок 6-7. Обзор текстовых интеграций


Интеграция вашего агента с веб-демо

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

В консоли Dialogflow щелкните меню Интеграции.

Щелкните интеграцию: Веб-демо.

Это покажет всплывающее окно; см. Рисунок 6-8.


Рисунок 6-8. Реализация iframe веб-демо для копирования


Всплывающее окно покажет код iframe (Листинг 6-2) для включения на ваш веб-сайт. Вы можете щелкнуть ссылку, чтобы протестировать чат-бота в браузере. Когда вы будете готовы, вы можете реализовать код iframe на веб-сайте.

Листинг 6-2. Пример Iframe

"iframe
 allow="microphone;"
 width="350"
 height="430"
 src="https://console.dialogflow.com/api-client/demo/embedded/b2797be1-6a81-4897-918f-1d8b286dab15">
/iframe"

Обычно веб-разработчики помещают это во всплывающее окно веб-сайта, которое можно открыть с помощью кнопки внизу веб-сайта. Рисунок 6-9 показывает, как выглядит чат-бот на вашем веб-сайте.


Рисунок 6-9. Пример веб-демо


Вы можете настроить верхний логотип и описание под именем вашего агента Dialogflow на экране настроек Dialogflow. Здесь (см. Рисунок 6-10) вы можете загрузить аватар или изменить описание вашего агента.



Рисунок 6-10. Компонент веб-демо использует несколько настроек конфигурации


Интеграция вашего агента с Dialogflow Messenger

Интеграция Dialogflow Messenger — это более продвинутый виджет, который вы можете разместить на своем веб-сайте, который подключается к вашему агенту Dialogflow. Он работает только для текстовых чатов. Внешний вид этого компонента настраиваемый, хотя некоторые предприятия предпочитают создавать свои веб-интеграции самостоятельно (например, чтобы они могли подключаться к большему количеству систем), многие бизнесы любят компонент Dialogflow Messenger, так как это простой и быстрый способ интегрировать его с вашим веб-сайтом или веб-приложением.

В консоли Dialogflow щелкните меню Интеграции.

Щелкните интеграцию: Dialogflow Messenger.

Появится всплывающее окно (Рисунок 6-11), которое покажет фрагмент кода (JavaScript), который вы можете скопировать и вставить на свой веб-сайт.


Рисунок 6-11. Реализация Dialogflow Messenger


Когда вы нажмете кнопку Попробовать сейчас во всплывающем окне, вы увидите, как выглядит реализация. Он покажет всплывающую кнопку внизу экрана (Рисунок 6-12, с аватаром, который был установлен в Настройках Dialogflow).


Рисунок 6-12. Кнопка всплывающего окна Dialogflow Messenger


Эта кнопка откроет всплывающее окно чата (Рисунок 6-13), которое на самом деле является веб-компонентом (df-messenger).


Рисунок 6-13. Веб-компонент Dialogflow Messenger


Листинг 6-3 показывает код JavaScript, который можно реализовать на вашем веб-сайте. Вставьте код для встраивания, скопированный ранее, на веб-страницу вашего веб-сайта. Элементы HTML

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

Возможно развернуть веб-компонент без нажатия кнопки с помощью настройки expand="true" в компоненте df-messenger.

Вы также можете оставить начальный речевой пузырь закрытым при загрузке веб-страницы с помощью wait-open="true".

Компонент Dialogflow Messenger не будет поддерживать голос. Кроме того, он может поддерживать только один язык. Однако вы можете использовать мега-агента и создать несколько под-агентов на разных языках.

Изменение внешнего вида компонента чат-бота

Веб-компонент Dialogflow предоставляет широкий спектр настроек для переопределения стилей в вашем чат-боте. Вам просто нужно будет добавить тег стиля над компонентом , и вы можете включить переменные CSS по вашему выбору, как показано в Листинге 6-4.

Листинг 6-4. Стили Dialogflow Messenger веб-компонента

 <style>

 df-messenger {--df-messenger-bot-message: #282828;--df-messenger-button-titlebar-color: #ff9000;--df-messenger-button-titlebar-font-color: #ffffff;--df-messenger-chat-background-color: #121212;--df-messenger-font-color: white;--df-messenger-send-icon: #878fac;--df-messenger-user-message: #535353;--df-messenger-input-font-color: #000;

 136

Chapter 6  Deploying your Chatbot to Web anD SoCial MeDia ChannelS--df-messenger-input-placeholder-font-color: #cccccc;--df-minimized-chat-close-icon-color: #ff9000;

 }

 </style


Рисунок 6-14 показывает, как будут выглядеть эти настройки стиля после рендеринга чат-бота в браузере.


Рисунок 6-14. Dialogflow Messenger с пользовательским стилем


Поддержка расширенных сообщений

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


Рисунок 6-15. Пользовательская полезная нагрузка Dialogflow Messenger


Поддерживаемые расширенные сообщения: Информационные ответы, Изображения, Списки (как показано на Рисунке 6-16), Аккордеоны (поля, которые могут разворачиваться), Кнопки и Предлагаемые фишки. Обратите внимание, что поле richContent может содержать массивы. Примеры реализации можно найти в документации Dialogflow.


Рисунок 6-16. Пример пользовательской полезной нагрузки Dialogflow Messenger


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

Целью события для этих событий является либо элемент df-messenger (см. Листинг 6-5), либо глобальная переменная window.

Листинг 6-5. Dialogflow Messenger создает слушателей событий в веб-компоненте

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('eventType', function (event) {
 // Handle event
 ...
});

Чтобы добавить слушателя событий для окна, добавьте следующий код JavaScript (Листинг 6-6), где eventType — одно из имен событий, описанных.

Листинг 6-6. Dialogflow Messenger создает слушателей событий в элементе window

window.addEventListener('eventType', function (event) {
 // Handle event
 ...
});

Резюме

Эта глава описывает некоторые готовые (текстовые) интеграции, которые решают следующие задачи:

  • Вы хотите развернуть своего чат-бота в Google Chat с помощью интеграции Hangouts.
  • Вы хотите быстро развернуть своего чат-бота на веб-сайте с помощью веб-демо.
  • Вы хотите быстро развернуть своего чат-бота на веб-сайте и изменить внешний вид с помощью Dialogflow Messenger.

Исходный код для этой книги доступен на GitHub через страницу продукта книги, расположенную по адресу www.apress.com/978-1-4842-7013-4. Ищите папки deploying-integrations-webcomponent и _dialogflow-agent (намерение Buy_Console).

Дополнительные материалы

Предыдущая глава    Следующая глава

Другие статьи по этой теме: