Как создать кнопочного бота на Dialogflow

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

Как начать пользоваться сервисом DialogFlow и запустить первого бота с интеграцией в один клик рассказывать не буду. Подобной информации достаточно в открытых источниках, в том числе и на Хабре. Сразу перейду к процессу реализации кнопочного меню.

Реализовать кнопки меню можно двумя способами:

1. При помощи стандартного «ADD RESPONSES».

Возьмем любой уже созданный интент либо создадим новый. В исходящем контексте прописываем новый параметр, например, «menu».



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

В нашем интенте находим кнопку «Add response» и выбираем «Quick Replies».



В строке «Title» указываем любой текст, который будет отправляться в чат перед выводом меню с кнопками. Это может быть, например, призыв к действию или указание на выбор пункта меню.

В строке ниже указывается непосредственно название кнопки (не более 20-и символов). Последующие кнопки просто добавляем в строках ниже. Таким образом можно добавить любое количество кнопок, которые будут располагаться в том же порядке в чате.

Для каждой кнопки создаем одноименный отдельный интент. Во входящем контексте таких интентов должен быть параметр «menu», который мы указывали в нашем основном интенте.



Контекст позволяет нам связать наши команды меню с действиями бота на эти команды.

Особенностью такого варианта добавления меню является отправка пользователем текста с названием кнопки в чат при ее нажатии. Т.е. когда пользователь нажмет кнопку «Консультация» он фактически отправит в чат текст «Консультация». Для отработки ботом этой команды необходимо добавить текстовый ответ, ссылку или картинку в интент «Консультация».

В Viber, например, это выглядит так:



Недостатком такого меню является отсутствие редиректа пользователя сразу при нажатии кнопки. Ссылку для перехода можно только отправить в чат. Также недоступны такие возможности при нажатии кнопки, как: отправка номера телефона пользователя в чат, открытия витрины с товарами и т.д. Но все это можно реализовать при помощи «Custom Payload». Оч ем и пойдет речь ниже.

2. При помощи «Custom Payload».

Данный способ предусматривает использование кода. Но уже готовый код можно получить в открытых ресурсах (о них речь пойдет ниже). И немного отредактировав его, можно создать крутое меню без навыков программирования. Расмотрим это способ на примере меню в мессенджере Viber.

Выбираем в интенте пункт «Custom Payload».



Перед нами открывается рабочая область, куда и будем вставлять код кнопок меню. Теперь вопрос, где же взять этот код, если не писать самому? Все очень просто. Идем на официальный сайт Viber для разработчиков (ссылка будет в конце статьи) и в Viber Api Documentation находим keyboard examples.



Здесь же приведено множество вариантов пользовательских меню с примерами кода и графической визуализацией. Заменяем текст кнопок, фон и изображения и наше уникальное меню готово всего в несколько кликов. Кнопки могут содержать ссылки для перехода на веб-ресурсы и другие команды, которые предусматривает документация Viber.

Ниже пример такой реализации.

{
  "viber": {
    "type": "text",
    "text": "Выберите один из пунктов меню ",
    "keyboard": {
      "Type": "keyboard",
      "DefaultHeight": true,
      "Buttons": [
        {
          "Columns": 3,
          "Rows": 2,
          "ActionType": "reply",
          "ActionBody": "Стоимость услуг",
          "BgColor": "#f45b69",
          "Text": "<font color=\"#ffffff\"><b>Стоимость услуг</b></font>",
          "TextSize": "large",
          "Image": "https://cdn.pixabay.com/photo/2018/05/24/04/58/tag-3425877_960_720.jpg"
        },
        {
          "Columns": 3,
          "Rows": 2,
          "ActionType": "reply",
          "ActionBody": "Консультация",
          "BgColor": "#f45b69",
          "Text": "<font color=\"#000000\"><b>Консультация</b></font>",
          "TextSize": "large",
          "Image": "https://cdn.pixabay.com/photo/2016/02/19/11/19/office-1209640_960_720.jpg"
        },
        {
          "Columns": 3,
          "Rows": 2,
          "ActionType": "reply",
          "ActionBody": "Обучение",
          "BgColor": "#f45b69",
          "Text": "<font color=\"#ffffff\"><b>Обучение</b></font>",
          "TextSize": "large",
          "Image": "https://cdn.pixabay.com/photo/2017/03/07/13/02/thought-2123970_960_720.jpg"
        },
        {
          "Columns": 3,
          "Rows": 2,
          "ActionType": "reply",
          "ActionBody": "Написать менеджеру",
          "BgColor": "#f45b69",
          "Text": "<font color=\"#000000\"><b>Написать менеджеру</b></font>",
          "TextSize": "large",
          "Image": "https://cdn.pixabay.com/photo/2015/07/31/17/52/suit-869380_960_720.jpg"
        }
      ]
    }
  }
}