Создание кнопок. Расширенные настройки кнопок

Кнопки - это условия перехода между блоками (состояниями). По сути, то, что вы запишите в стрелке в поле "Условие" и будет являться кнопкой. Сначала давайте рассмотрим мессенджеры, которые поддерживают кнопки (Телеграм, 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), а в других он просто не будет виден.

Как этим пользоваться: впишем в это поле текст, который будет четко давать понять клиенту, что ему необходимо отправить, чтобы перейти в нужный раздел и посмотрим, как это будет выглядеть в 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"}]

Так она выглядит ВКонтакте:

Давайте добавим еще одну кнопку "Назад", но расположим ее не в клавиатуре, а в тексте. Как изменился код и как теперь выглядит сообщение от бота смотрим на Рисунке 10. Аналогично можно добавлять другие кнопки.

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

Итак, сегодня мы рассмотрели как легко и просто на конструкторе Salebot, можно создавать кнопки в различных мессенджерах, что, на данном этапе, позволяет вам создавать более-менее функциональных ботов.