Перейти к основному содержимому

Как создать простого бота в J‑Graph

В этом туториале вы создадите простого чат-бота, который будет:

  1. Предлагать оформить заказ
  2. Запрашивать контакты клиента
  3. Подтверждать заказ

Создание сценария​

Чтобы начать работу в J‑Graph:

  1. Создайте новый проект в JAICP.
  2. Выберите на панели управления слева Редактор → J‑Graph.

Вы попадаете на холст — основное рабочее пространство в J‑Graph. Передвигайтесь по холсту, зажав правую кнопку мыши или выбрав свободное место на холсте пальцем на тачпаде. Масштабируйте его с помощью колесика мыши или прокрутки пальцами на тачпаде.

На холсте создаются шаги — экраны с реакциями бота и ожидаемыми ответами пользователя на них. В сценарии уже есть несколько шагов:

  • Обязательный шаг начала сценария /Start — он отмечен специальным флагом.
  • Шаги приветствия /Hello и прощания /Bye.
  • Обязательный шаг /NoMatch — шаг с реакцией бота на нераспознанные фразы.
  • Шаг /Match — реакция бота на распознанные фразы, но не учтенные в сценарии.
подсказка
Шаги /Hello, /Bye и /Match не понадобятся, чтобы создать бота в этом туториале, их можно удалить.

Шаги сценария​

Шаг 1. Приветствие и меню бота​

Для начала на шаге /Start измените приветственную фразу бота, добавьте кнопочное меню и ссылку на ваш сайт:

  1. Перейдите на шаг /Start.
  2. В секции Реакции бота выберите блок Текст и измените приветствие бота в поле Реплика бота на Добрый день! Я бот-помощник. Чем я могу помочь?
  3. Ниже выберите Добавить реакцию.
  4. В появившемся меню выберите Группа кнопок → Добавить кнопку.
  5. Введите текст первой кнопки: Заказать бота.
  6. Нажмите Добавить кнопку и введите название второй кнопки: Наш сайт.
  7. Включите Действие по нажатию → Открыть ссылку и вставьте ссылку на сайт компании в формате https://example.com.
  8. Нажмите Сохранить.
Стартовый шаг

Шаг 2. Запрос информации по заказу​

Теперь добавьте новый шаг — запрос информации от клиента:

  1. Нажмите в левом верхнем углу.
  2. Введите название шага: Information request.
  3. Ниже выберите Выбрать действие → Запрос текста.
подсказка
Когда вы выберете действие, новый шаг создастся автоматически.

  1. В меню справа заполните поля:

    • Сообщение — введите текст Расскажите нам, какого бота Вы хотели бы заказать. Обязательно оставьте свои контактные данные.

    • Имя переменной — введите значение order.

      подсказка
      Информация от клиента сохранится в переменную $session.order. Вы сможете настроить отправку ее значения менеджеру при доработке сценария.

  2. Нажмите Сохранить.

Шаг запроса информации

Шаг 3. Подтверждение заказа​

На следующем шаге добавьте сообщение о получении данных:

  1. Добавьте новый шаг c названием Order confirmation.
  2. Ниже выберите Добавить блок → Текст.
  3. В поле Реплика бота введите текст Ваша заявка: «{{$session.order}}». Спасибо за информацию! Менеджер свяжется с Вами в ближайшее время.
Шаг подтверждения заказа

Шаг 4. Ответ на нераспознанную фразу​

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

  1. Перейдите на шаг /NoMatch.
  2. В секции Реакции бота выберите блок Текст и измените приветствие бота в поле Реплика бота на Извините, я Вас не понял. Перефразируйте, пожалуйста.
Ответ на нераспознанную фразу

Метки шагов​

Вы можете размечать шаги разноцветными метками. Это позволит вам оценить результаты, которых достигает бот, и доработать его логику.

Наведите на шаг /Order confirmation, нажмите и добавьте метку Заявка создана. В аналитике бота вы увидите количество клиентов, которые оставили контактные данные.

Все шаги сценария созданы, и теперь нужно добавить переходы по ним — связи.

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

  1. Соедините кнопку Заказать бота на шаге /Start с шагом /Information request.
  2. Соедините Запрос текста на шаге /Information request с шагом /Order confirmation.
предупреждение
Обязательный шаг /NoMatch активируется при любой нераспознанной фразе клиента, поэтому его не нужно соединять с другими шагами.

Сценарий со связями будет выглядеть так:

Простой бот в J‑Graph

Тестирование и публикация бота​

Чтобы протестировать сценарий, нажмите Тестировать бота в верхней панели экрана. Справа появится тестовый виджет, в котором вы можете имитировать разговор бота с клиентом.

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

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

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

Чтобы опубликовать бота в канал:

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

Статус подключения отобразится рядом с названием канала. Статус Работает означает успешное подключение — бот работает в канале.

подсказка
Вы можете ознакомиться с диалогами бота с клиентами в разделе Аналитика → Диалоги. Их анализ поможет вам доработать логику сценария.

Что дальше​

Продолжайте дорабатывать проект в конструкторе:

подсказка
Как только все изменения будут внесены, протестированы и сохранены, опубликуйте бота в канале. Бот начнет общаться с клиентами согласно новой версии сценария.