Кнопки - это условия перехода между блоками (состояниями). По сути, то, что вы запишите в стрелке в поле "Условие" и будет являться кнопкой. Сначала давайте рассмотрим мессенджеры, которые поддерживают кнопки (Телеграм, Viber, Facebook messenger, Вконтакте).
Они поддерживают два типа кнопок: те, что появляются ниже поля ввода и инлайн кнопки( кнопки в самом сообщении). Сейчас речь пойдет о первом типе кнопок, а про инлайн кнопки читайте ниже в разделе "Расширенные настойки кнопок".
В условие кнопки можно написать несколько вариантов, разделив их точкой с запятой ";". Текстом кнопки будет являться первое условие (перед ";"), которое вы запишите в стрелке в поле "Условие" (Рисунок 1).
В нашем примере, надпись на кнопке будет "Расскажи об услугах". Давайте теперь добавим еще несколько блоков и условий и посмотрим как это выглядит и на схеме и в телеграм (Рисунок 2 и Рисунок 3).
Важный момент: если вы не хотите, чтобы кнопка отображалась, просто выключите переключатель "Отображать как кнопку" в "Редактировании соединения".
Чтобы изменить порядок кнопок, перейдем в "Настройки соединения". Нажимаем на "Настройки кнопок" и в поле "Номер линии", вводим номер строки, в которой должна располагаться кнопка (Рисунок 4).
Пронумеровав таким образом все кнопки (Расскажи об услугах - 1, Стоимость услуг - 2, Контакты -3, Оставить заявку - 4), получаем следующий вид кнопок (Рисунок 5).
Под полем "Номер линии" располагается поле "Цвет кнопки". Непосредственно в само поле можно ввести цвет в шестнадцатиричном формате, если нажмем чуть левее, появится палитра выбора цвета. Цветные кнопки поддерживаются в Вконтакте (4 цвета) и Viber(любой цвет). Поменяем цвет наших кнопок и посмотрим, как они будут выглядеть в Вконтакте (Рисунок 6).
Цвета кнопок, поддерживаемые ВКонтакте:
primary — синяя кнопка, обозначает основное действие. #5181B8
secondary — обычная белая кнопка. #FFFFFF
negative — опасное действие, или отрицательное действие (отклонить, удалить и тд). #E64646
positive — согласиться, подтвердить. #4BB34B
Давайте выделим теперь наш приветственный зеленый блок и справа в "Настройках сообщений" нажмем на "Настройки кнопок". Появится поле "Подсказка в мессенджерах без кнопок". Текст, добавленный в это поле будет отображаться только в мессенджерах, не поддерживающих кнопки (в частности WhatsApp), а в других он просто не будет виден.
Как этим пользоваться: впишем в это поле текст, который будет четко давать понять клиенту, что ему необходимо отправить, чтобы перейти в нужный раздел и посмотрим, как это будет выглядеть в WhatsApp (Рисунок 7).
Но это еще не все. Чтобы сработало условие при отправке цифр и не поменялись названия кнопок в остальных мессенджерах, добавим через точку с запятой в условия перехода цифры, соответствующие нашей подсказке (Рисунок 8).
Пример на рисунке 7 означает, что переходы из блока теперь будут срабатывать и, когда клиент пришлет фразу, и, когда цифру.
Теперь давайте рассмотрим более сложный способ создания кнопок. Все будет происходить в поле "Расширенные настройки кнопок" в "Редактировании соединения". Кстати, благодаря данному способу, вы сможете настроить инлайн кнопки (кнопки в тексте), добавление URL в кнопку или для перехода в один блок из многих других блоков (например в блок меню) без нагромождения стрелок.
Давайте изменим типы белых блоков в нашей схеме на блоки с Первостепенной проверкой условия (на т-зеленые). В Условие этих блоков запишите текст, написанный на их стрелках. Теперь удалите все стрелки в нашей схеме и запишите в поле "Расширенные настройки кнопок" следующий текст:
[{"type": "reply", "text": "Расскажи об услугах", "line": 0, "index_in_line": 0}, {"type": "reply", "text": "Стоимость услуг", "line": 0, "index_in_line": 1}, {"type": "reply", "text": "Контакты", "line": 1, "index_in_line": 0}, {"type": "reply", "text": "Оставить заявку", "line": 1, "index_in_line": 1}]
Вы получили такое же меню, но без стрелок соединения. Если все сделано верно, то нажав на кнопку такого меню вам придет сообщение из нужного блока-ответа (Рисунок 9).
Теперь подробнее о всех возможных настройках кнопок в этом поле:
text - Текст кнопки(единственный обязательный параметр); url - ссылка, по которой будет переход при нажатии на кнопку(телеграмме работает только для кнопок в тексте); color - цвет кнопки; line - номер линии(если значение не указано, кнопки будут друг под другом); index_in_line - позиция кнопки в линии; type - принимает значения reply(кнопка в клавиатуре) или inline(кнопка в тексте). one_time - заполните это свойство значением 1, и клавиатура не удалится после отправки сообщения (это свойство относится только к кнопкам reply).
Пример настройки клавиатуры в тексте:
[{"type": "inline", "text": "29 августа", "line": 0, "index_in_line": 0},
{"type": "inline", "text": "31 августа", "line": 0, "index_in_line": 1},
{"type": "inline", "text": "3 сентября", "line": 1, "index_in_line": 0},
{"type": "inline", "text": "5 сентября", "line": 1, "index_in_line": 1},
{"type": "inline", "text": "7 сентября", "line": 1, "index_in_line": 2}]
Так данная клавиатура будет выглядеть в Viber
А так в Telegram
Для создания кнопки с ссылкой необходимо указать параметр URL, остальные настройки идентичны с обычными кнопками.
[{"type": "inline", "text":"ссылка в гугл", "url":"https://google.com"}]
Так она выглядит ВКонтакте:
В Facebook существует ограничение на количество кнопок. 13 reply(обычных клавиатурных) и 3 inline (в тексте)
Давайте добавим еще одну кнопку "Назад", но расположим ее не в клавиатуре, а в тексте. Как изменился код и как теперь выглядит сообщение от бота смотрим на Рисунке 10. Аналогично можно добавлять другие кнопки.
Обратите внимание, что в Телеграм и ВКонтакте при использовании в одном блоке кнопок в клавиатуре и в тексте появляется сообщение "Выберите вариант". Чтобы этого избежать не используйте два этих типа кнопок одновременно.
Итак, сегодня мы рассмотрели как легко и просто на конструкторе Salebot, можно создавать кнопки в различных мессенджерах, что, на данном этапе, позволяет вам создавать более-менее функциональных ботов.