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

Вход

Войдите в свой аккаунт: введите email и пароль на странице Вход
Если у вас ещё нет аккаунта — создайте его вот здесь: Регистрация
Если вы забыли пароль от вашего аккаунта — измените его, пройдя по этой ссылке: Сбросить пароль

При регистрации мы отправляем на ваш почтовый ящик письмо со ссылкой, по которой нужно пройти, чтобы завершить создание аккаунта. Если вы не видите наше письмо в основной папке Входящие — проверьте папку Спам. Если не получилось — попробуйте найти письмо по теме «Verification email» ***или по нашему email-адресу [email protected]o

Обучающий Бот

Войдя в аккаунт, кликните по Обучающему Боту — вы попали в Редактор уже готового бота Botlify. На его примере вы увидите, как выглядит «изнутри» чат-бот и каким образом происходит взаимодействие с клиентом.

В левой части главного меню(сверху) вы видите несколько вкладок:

  • Редактор
  • Настройки
  • Дизайн
  • Пользователи
  • Подключение

Подробнее о каждой из них мы расскажем ниже.
В правой части расположены три кнопки:

  • Сохранить — сохраняет все изменения, которые были внесены в открытой вкладке (автосохранения нет, поэтому жмите на эту кнопку почаще)
  • Предпросмотр — открывает окно предварительного просмотра созданного бота
  • Закрыть — возвращает к списку ботов

Кликните по кнопке Предпросмотр в правом верхнем углу, чтобы увидеть чат-бот в действии. Пообщайтесь с ним, он расскажет вам кое-что интересное 😉

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

  • разместите на странице ВКонтакте, Facebook или в Instagram;
  • отправляйте ссылку через сообщения в мессенджерах;
  • сделайте email-рассылку с ссылкой на вашего бота.
  1. Оконный — чат-бот займёт всю ширину и высоту блока, в котором будет размещен. Такой вариант подойдёт для интеграции, например, с вашим лендингом: чат-бот будет размещён в конкретной части страницы. Пример использования можно увидеть на сайте https://botlify.io
  2. Виджет — диалоговое окно в правом нижнем углу экрана. При желании клиент может скрыть окно: останется только аватар вашего бота. При нажатии на аватар диалоговое окно снова откроется

Чтобы выйти из режима предпросмотра — нажмите кнопку Назад в верхнем правом углу экрана. Вы вернётесь в Редактор, где описана схема диалога.

Редактор

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

Вкладка Редактор состоит из нескольких компонентов :

  1. Рабочее поле редактора
  2. Панель строительных блоков
  3. Карта бота

Рабочее поле редактора

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

  • Блоки в интерфейсе редактора — это белые прямоугольники, обозначающие доступные действия. В правом верхнем углу каждого блока есть значок шестерёнки — это настройки. Про разновидности и способы использования блоков расскажем ниже, в следующем пункте.
  • Соединения в интерфейсе редактора — это полупрозрачные зеленые линии, имеющие по два зелёных кружочка: один в точке начала, второй в точке конца. Соединения задают направление движения диалога от одного блока к другому. Один блок может быть соединён с несколькими другими блоками. Соединения от разных блоков могут вести к одному блоку. Чтобы создать соединение — нажмите на зеленый кружок одного блока и "протяните" линию к зеленому кружку другого блока.  Созданное соединение можно удалить: кликните по выбранной зеленой линии — появится символ корзины, нажмите на него — соединение исчезнет.

Панель строительных блоков

Панель строительных блоков (левая часть экрана) — это перечень блоков, каждый из которых обозначает уникальный тип действий. В поле редактора блоки можно поместить двумя способами:

  • Перетащить левой кнопкой мыши в нужное место.
  • Кликнуть по блоку 2 раза левой кнопкой мыши. В этом случае блок появится на рабочем поле редактора в зоне видимости; перенесите его в нужную область самостоятельно.

Есть разные типы действий:

  • Старт — это блок начала диалога, он появляется самым первым сообщением в диалоговом окне каждого вашего клиента. У одного бота может быть только один  блок «Старт».
  • Конец — обозначает конец диалога, после него ни один из блоков не будет воспроизведен.
  • Сообщение — блок с текстовым сообщением от лица бота. Может включать переменные, смайлики, картинки, ссылки, gif и проч.
  • Ввод с клавиатуры — блок, который даёт возможность пользователю ввести свой ответ. Полученные данные сохраняются в переменную. В настройках (значок шестерёнки) присваивается название для переменной, которую далее можно использовать. Пример реализации использования переменных есть в Обучающем боте (Я хочу узнать как пользоваться блоками —> Ввод с клавиатуры).
  • Опции — этот блок с несколькими вариантами ответов; пользователь может выбрать только один вариант. Опции создают ветвление диалога. Добавить, удалить или изменить варианты можно в настройках блока.
  • Bitrix24 — интеграция с платформой Битрикс-24. В настройках этого блока можно указать переменные, которые будут передаваться Битриксу. Подробнее про интеграцию с Bitrix24 в отдельной статье.
  • E-mail — отправка электронного письма на указанный адрес. Выполнение этого блока не видно для пользователя. Может включать переменные
  • Webhook - отправка данных на произвольный url-адрес.

Внизу панели строительных блоков расположены три раздела:

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

Карта бота

Карта бота (внизу справа) — миниатюрное схематичное отображение всех блоков в рабочем поле. По карте удобно ориентироваться при создании больших скриптов и множественных ветвлений диалога.

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

Изменяйте масштаб рабочего поля при помощи колёсика мыши. Приближайте и отдаляйте блоки в редакторе прокручивая колёсико вниз и вверх соответственно.

Настройки

В этой вкладке вы можете:

  • Изменить название бота — это название видно только в списке ботов, пользователь его не увидит.
  • Включить или выключить вашего бота — «Текущее состояние вкл. / выкл.». Очень важный момент: для публикации бот должен быть включен.
  • Настроить интеграцию с CRM — на данный момент можно настроить взаимодействие с  Bitrix24. Подробнее вот в этой стать: ссыль
  • Настроить совместный доступ — вышлите приглашение вашим коллегам, чтобы они тоже имели доступ к редактированию бота.

Не забывайте кликнуть по кнопке Сохранить после внесения изменений, иначе обновления не сохранятся.

Дизайн

Здесь можно изменить внешний вид бота:

  • Изменить имя бота — это имя увидит пользователь в диалоговом окне.
  • Выбрать аватар — графическое представление вашего бота. Загружайте только png, не более 512x512 и 256 килобайт.
  • Настроить цветовую гамму
  • Цвет фона диалогового окна
  • Цвет границ диалогового окна
  • Цвет фона сообщений
  • Цвет текста
  • Можно загрузить фоновое изображение. Картинка должна быть в формате .png или .jpg не более 2Mb
  • Изменить отображение текста
  • Шрифт: доступны Arial, Helvetica, Monospaced и Open Sans
  • Размер: 12, 14, 18, 24

Результат изменений виден в виджит-версии бота, на этой же странице. Не забудьте сохранить изменения, прежде чем выйти из вкладки дизайна. Если возникли сложности — напишите нам через кнопку Поддержки.

Пользователи (аналитика)

Во вкладке Пользователи отображаются взаимодействия с вашим ботом — сессии.

  • Дата
  • ID пользователя
  • ID сессии
  • Источник — откуда пришел пользователь
  • Переменные — данные, которые ввел пользователь (например, ФИО, номер телефона, электронная почта, комментарий и т.д.)

Подключение (публикация)

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