Перевод
Назад к видео
1. Бот Customer
Это второе видео из серии обучающих материалов, посвящённых созданию чат-ботов.
Мы настроим готовый темплейт бота, разберёмся с логикой его работы, изменим внешний вид и разместим его на сайте.
Выберем в меню Templates первый темплейт Customer.
Склонируем темплейт, чтобы его можно было редактировать.
Бот Customer собирает контактную информацию о посетителях сайта. Нажмём кнопку RUN BOT.
После ввода имени, предлагается выбрать удобный для пользователя канал коммуникации.
Если бот не ждёт текстового ввода, то строка ввода недоступна и можно только нажать на кнопку.
Выберем телефон.
Обратим внимание, что введенное выше имя клиента вставлено в сообщение бота.
Введём неправильный по формату номер телефона. 123
Бот предложит его изменить, а при отказе вернётся на экран выбора канала.
Здесь бот попытается получить также электронную почту. Откажемся от этого.
В следующем сообщении предлагается изменить что-либо из введенных данных, а при согласии, бот просит оставить сообщение.
Введенная информация доступна в плугине в закладке Data
2. Слоты бота
Несмотря на то, что бот решает простую задачу, логика его работы достаточно сложная. Это делает его поведение более разумным.
Шаги, связанные со сбором информации находятся в папке Customer. Кроме этого, есть два начальных шага - приветствие и смена языка, а также финальный шаг благодарности
Кликнем в папку. Содержащиеся в ней шаги обведены оранжевой линией.
Ещё один клик сворачивает шаги обратно в папку.
В папки удобно собирать большие ветки диалога. В частности, задача сбора информации о клиенте может быть встречаться в самых разнообразных ботах. Достаточно скопировать папку Customer, настроив входящие и исходящие переходы.
Этот бот оперирует слотами, в которых сохраняется информация о клиенте. От значения слотов зависит логика его работы. Запустим бот ещё раз и обратим внимание на отладочное окно.
В левой его половине приведен список всех слотов.
Первые два - LANGUAGE и INPUT являются системными слотами: текущий язык и строка ввода.
Остальные слоты специфичны для данного бота и их смысл ясен из их названий: имя, телефон, введенное сообщение и почта. Обратим внимание, что при старте бота значение этих слотов ещё не определено, что помечено словом null.
Кликнем в любое место экрана - бот и отладочное окно закроются.
3. Условные переходы
В принципе, чтобы получить имя, телефон и почту достаточно только трёх шагов. Однако, в умном боте необходимо учитывать различные варианты его прохождения.
Вначале, после нажатия на кнопку Start шага BEGIN мы попадаем в шаг CUSTOMER START. Это логический шаг и в нём нет визуальной информации.
Если эта папка используется в других ботах, в сбор данных можно попадать несколько раз из различных мест. Понятно, что не следует повторно задавать вопрос, например, о телефоне, если он уже известен. В тоже время, если почту человек не оставил, можно попытаться снова её попросить.
Единственный объект actions содержит набор проверок.
В первом условии проверяется существует ли слот CUSTOMER NAME. Значение слота получается, когда перед его именем ставится символ доллара. Если у слота значения нет, происходит мгновенный переход goto на шаг CUSTOMER NAME.
Такой переход прерывает выполнение всех действий, идущих ниже. Поэтому, если условие в if сработало, остальные условия выполняться не будут.
Аналогичные проверки идут в других условных действиях. Если нет почты и нет телефона переходим на выбор канала. Если нет почты и есть телефон то запросим почту и т.д.
Если ни одно из условий не сработало, то выполнится последнее действие - переход goto на шаг BEFORE_CHECK. После него будет выведена собранная о клиенте информация, чтобы он мог её проверить.
Посмотрим как это выглядит в отладочном окне.
В его правой части сообщается что нажата кнопка, в которой установлен переход на шаг CUSTOMER START.
В этом шаге проверяется отсутствия имени. Это условие истинно, поэтому происходит переход goto и бот оказывается в шаге CUSTOMER NAME, в котором ждёт ввода имени.
4. Проверка имени и телефона
Выберем шаг CUSTOMER NAME и кликнем в нём на строку ввода. В ней описываются действия, которые сработают, когда клиент введёт своё имя.
Проверить ввёл ли клиент имя или случайно нажал несколько клавиш очень непростая задача. Здесь делается тривиальная проверка: имя должно содержать не менее двух символов.
Для этого в условии вызывается функция len, которая возвращает длину строки ввода. Если эта длина меньше двух, устанавливается переход на шаг CUSTOMER_WRONG_NAME.
Если условие не выполнилось, выполняется действие else. В нём устанавливается переход на шаг приветствия CUSTOMER GREET. Затем в слот CUSTOMER NAME запоминается содержание строки ввода, которое находится в слоте INPUT.
В отличии от goto, команда step просто запоминает шаг перехода Поэтому порядок действий в блоке else роли не играет.
Последнее значение перехода step используется, когда происходит некоторое событие - нажата кнопка, введен текст или сработал таймер.
Обратим внимание, что после шага приветствия CUSTOMER_GREET бот сразу возвращается на шаг CUSTOMER_START.
Связано это с тем, что в CUSTOMER_GREET можно также попасть из финального шага, если клиент выберет смену имени.
При этом его телефон и почта могут быть уже известны и оказаться в шаге выбора канала он не должен.
Посмотрим теперь как происходит проверка телефона в шаге CUSTOMER PHONE. В тексте используется уже известное имя клиента. Чтобы его получить, перед именем слота, как обычно, ставится символ доллара.
В действиях строки ввода прежде всего обратим внимание на тип ввода phone.
Кроме обычного текста, как было при вводе имени клиента, возможно извлечение из строки ввода различных данных: чисел, телефона, почты, даты, времени и намерения - при включенном режиме общения на естественном языке.
В данном случае выбран тип данных - phone.
Если введенный клиентом номер содержит недостаточное число цифр, слот INPUT будет иметь значение null. Такое значение сделает условие if ложным.
Если же всё нормально, то условие if сработает. В нём мы запишем в слот CUSTOMER_PHONE значение телефона из строки ввода, а затем установим переход на финальную цепочку вывода информации.
В следующем действии if делается проверка отсутствия почты. Если это так, то шаг перехода изменится на CUSTOMER_EMAIL_MAYBE, где будет предложено всё же ввести и адрес почты.
В случае же когда телефон оказался неверным, сработает блок else, в котором устанавливается переход на шаг CUSTOMER PHONE WRONG.
5. Финальные действия
После окончания сбора информации возможны различные ситуации со значениями слотов. В логическом шаге BEFORE_CHECK они анализируются и совершается goto переход на соответствующий шаг: известны и телефон и почта, известен только телефон и т.д.
Наконец, выводится сообщение с предложением проверить введенную информацию. При необходимости, клиент может её изменить.
Стрелки из кнопок ведут на соответствующие шаги смены имени, телефона или почты. Если клиент согласен с введенной информацией, после нажатия на кнопку Yes, он попадает в шаг, где ему предлагается ввести отзыв о сайте. Этот отзыв сохраняется в слоте CUSTOMER_MESSAGE.
В финальном сообщении CUSTOMER_END, в первом действии сохраняется введенная информация. Существуют два хранилища - WordPress и QuData. Хранилище QuData сохраняет неограниченное число записей. Для его активизации необходимо зарегистрироваться на сайте QuData.com Выберем пока хранилище WordPress по умолчанию, не требующее регистрации.
Данные сохраняются в виде объекта, состоящего ключей - имён полей и значений. В этом примере первый ключ kind в качестве значения содержит строку "customer". По ней можно будет делать фильтр, если из бота сохраняются различные виды данных.
В остальных ключах содержатся значения данных, полученных от клиента. Обратим внимание, что объект окружается фигурными скобками, между ключами из значениями стоит двоеточие и они отделяются запятыми.
В принципе этот бот самодостаточный. Однако, при желании в него можно вносить любые изменения. Например, поменять тексты на стартовом и финальном сообщениях, добавить различные шаги перед началом сбора информации и т.д.
Сделаем минимальные изменения, отредактировав шаг CUSTOMER_NAME. Хорошим тоном будет представиться самому, перед вопросом об имени.
Поэтому добавим текст "My name is Qu". Так как бот сделан на двух языках, его перевод добавляем в русском языке.
Если Вы не планируете использовать второй язык, достаточно удалить кнопку смены языка в стартовом шаге.
6. Настраиваем внешний вид
Изменим теперь внешний вид бота.
Перейдём в закладку Setup.
В первой группе иконок можно изменить изображение, которое находится на кнопке запуска бота. Эта же иконка будет находиться в в левом верхнем углу окна бота.
Вторые две группы иконок соответствуют аватару сообщений бота и аватару пользователя бота. Их можно отключить или изменить
Далее идёт тексты, для заголовка окна бота, имени бота в сообщениях и некоторой информации, которую можно убрать.
Следующий раздел позволяет задать размер бота, в положении custom, выставить любую ширину и высоту окна.
В правой панели можно задать положение внутри окна, где будет появляться бот. Числа под панелью изменяют расстояния, соответствующие пунктирным линиям, т.е. 50 пикселей от правого и нижнего края экрана.
Далее идут предопределённые стили. Если они не подходят, переходим ниже.
При наведении мышки на каждый элемент интерфейса, появляется подсказка.
Можно изменить параметры тени окна бота, его заголовка, общие свойства окна сообщений, внешний вид сообщений бота, сообщений пользователя, кнопок, нижней части окна бота, строки ввода, а также вид кнопки запуска.
Например, если Вы не хотите, чтобы появлялось время сообщения, поставьте для него нулевой размер шрифта.
Можно поменять цвет фона бота или подложку в виде картинки.
Так как все изменения сразу отражаются в окне бота, несложно разобраться с этими настройками.
Поменяем ещё параметры кнопки запуска. Её тень такая же как у всего окна. Можно изменить её радиус и радиус иконки,
а также добавить бордюр вокруг кнопки.
7. Размещаем бот на сайте
Финальный шаг подготовки бота - это размещение его на сайте. Зайдём в закладку Launch.
Сначала выберем бот, который мы хотим активировать.
Ниже приведен список страниц Вашего сайта. Можно оставить включенный чекбокс all. Это будет означать, что бот появится на всех страницах.
Альтернативно, можно выбрать конкретные страницы, где должен появляться бот.
Затем установим время в секундах перед появления бота после загрузки страницы. Поставим к примеру 2 секунды. Если Вы хотите, чтобы бот открывался только при нажатии на кнопку, в этом поле следует поставить достаточно большое число.
Последнее поле не обязательно. В него вставляется Ваш идентификатор, называемый токеном. Его можно получить, зарегистрировавшись на сайте QuData.com. При наличии токена, Вам будет бесплатно доступна аналитика работы бота, а за небольшую оплату Вы получите неограниченный объём памяти для сохраняемой ботом информации.
После установки всех этих настроек, нажмём на кнопку Start. Ваш бот уже находится на сайте. Ещё одно нажатие - уберёт его оттуда.
Если настройки запуска необходимо изменить, бот сначала деактивируется, настройки меняются и снова нажимается кнопка Start.
Зайдём теперь на сайт. Бот отрывается, как и запланировано, через 2 секунды.
Обратим внимание что, в браузере клиента сохраняется текущий шаг бота и его слоты. Нажмём на кнопку в боте и изменим страницу.
Бот откроется с того шага на котором он был на предыдущей странице.
Аналогично, бот запоминает то, что его закрывали. Нажмём на крестик и снова изменим страницу.
Теперь бот не откроется, пока не будет нажата кнопка его запуска.
Следует иметь, ввиду, что когда бот тестируется на сайте, Вы являетесь таким же пользователем, как и любой посетитель сайта. Если Вы хотите сбросить его память, можно нажать на кнопку reload в заголовке окна. Впрочем, факт закрытия, бот будет по-прежнему помнить, поэтому оставьте его в открытом состоянии для дальнейших тестов. Память бота также сбрасывается, если его деактивровать в закладке Launch, а затем снова активировать.
Теперь Вы знаете всё необходимое для запуска созданного Вами бота на сайте.
Если у Вас будут возникать вопросы, Вы можете задавать их на форуме страницы плугина, или обратившись на прямую к специалистам компании QuData.
Желаем удачи в Вашем творчестве.
Назад к видео