Как создать простого бота в 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. Ниже выберите Выбрать действие → Запрос текста.

подсказка

Когда вы выберете действие, новый шаг создастся автоматически.

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

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

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

     подсказка

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

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

Шаг 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 активируется при любой нераспознанной фразе клиента, поэтому его не нужно соединять с другими шагами.

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

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

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

подсказка

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

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

предупреждение

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

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

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

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

подсказка

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

---

Что дальше

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

• Измените реакции бота: например, добавьте информацию о вашей компании.
• Сделайте речь бота более естественной, разнообразив ответы с помощью реакции Случайный ответ.
• Дополните шаги ожидаемыми фразами клиента.
• Продумайте обработку непредсказуемых фраз клиента и событий, специфичных для канала, а также возможных ошибок.
• Добавьте интерактивную часть: бот может отправлять изображения и аудио или принимать файлы от клиента.
• Усложните логику бота: добавьте блок действия для отправки менеджеру информации о заказе по SMS или на электронную почту.

подсказка

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