Salebot.pro
Search…
Наши услуги
Кнопки
Как создать кнопки? Как добавить в кнопку ссылку? Как добавить кнопки без создания стрелок? Как разместить кнопки в несколько строчек с переменным количеством столбцов? Читаем в данной статье
Кнопки — это один из самых интуитивно понятных для пользователей элемент чат-ботов.
Добавляя кнопки к сообщению, мы упрощаем пользователю задачу: он нажимает на кнопку и переходит в нужный блок в зависимости от его ответа. Если человек не нажмет на кнопку, а напишет то же самое текстом, он также перейдет в соответствующий блок.
Сначала давайте рассмотрим мессенджеры, которые поддерживают кнопки (Телеграм, Viber, Facebook messenger, Вконтакте, официальный Instagram, Whatsapp бизнес).
Они поддерживают два типа кнопок: те, что появляются ниже поля (клавиатурные или реплай) ввода и кнопки в тексте (инлайн)

Как создавать кнопки.

Кнопки можно создавать двумя способами - используя настройки кнопок в нужном блоке и используя стрелки между блоками. Первый вариант более функционален и удобен в работе.
Чтобы сделать кнопки из блока, открываете нужный блок, там выбираете "Настройки кнопок":
Здесь вы увидите два переключателя - Показать кнопки и Показать стрелки как кнопки. Второй переключатель отключаем и нажимаем "Добавить кнопку"
У вас откроется следующее:
Здесь в поле "Текст" вы пишете текст, который будет в кнопке.
Далее нажимаете "Изменить". Возвращаетесь к блоку, где у вас появились настройки кнопки
Кнопки могут быть клавиатурные (они исчезают после нажатия или ввода текста с клавиатуры) и в кнопки тексте (они не пропадают после нажатия).
Бот реагирует на нажатие этих кнопок одинаково.
Сделаем еще одну кнопку: для этого нажмем на +
и настраиваем дальше:
От нашего блока с кнопками создаем еще два, соединяя стрелками. Кликаем правой кнопкой мыши на стрелку, открываются ее настройки (или можно подвести курсор к стрелке и нажать на шестеренку). Отключаем переключатель "отображать как кнопку"
Далее переводим курсор в поле Условие. Там вам будут предложены варианты, которые у вас прописаны в кнопках:
Можете ввести условие вручную или выбрать из предложенных. Что у нас получилось:
Кнопки вы можете менять местами и ставить в один ряд, для этого просто перетащите кнопку на нужное место.

Если нужно сделать кнопку без протягивания стрелок

Например, у вас в боте есть меню, и вам нужно в разных блоках сделать кнопку "назад в меню". Чтобы не протягивать стрелку к блоку "меню" по всей воронке, сделайте следующее:
— открываете настройки блока "меню" и ставите тип блока "Первостепенная проверка условия"
— в поле "Условие" в этом блоке вписываете текст кнопки, которая будет вести на этот блок
Как вы видите, в поле Условие добавлено два условия — блок будет срабатывать по любому из них. Вы можете добавить несколько условий для перехода в этот блок, условия разделяются между собой с помощью знака ; (точка с запятой). Например, меню;назад в меню;вернуться к меню
В нужных блоках добавляете кнопку:

Кнопки в тексте

Для их создания в настройках кнопок нужно выбрать "Кнопки в тексте"
Так данная клавиатура будет выглядеть в Viber
А так в Telegram

Кнопки со ссылкой

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

Цвет кнопки

При необходимости вы можете указать цвет кнопки — это работает в ВК и Viber.
В ВК вам доступны 4 цвета кнопок (синий, красный, зеленый, белый). Если кнопка со ссылкой, то выбор цвета недоступен. Для выбора цвета нажмите на соответствующий квадрат в настройках.
В Вайбере можете выбрать любой цвет кнопки — нажмите на черный квадрат и откроется палитра.

Кнопка - Запросить телефон

Работает в Телеграм и Viber
При создании кнопки нужно выбрать "Запросить телефон"
По нажатию на кнопку откроется это окно, требующее подтвердить передачу номера.
Когда клиент разрешит передачу номера телефона, телефон будет передан в бота в качестве реплики клиента.
Номер телефона автоматически запишется в переменную phone

Кнопка - запрос геолокации

Работает в Вконтакте, Телеграм и Viber
При создании кнопки нужно выбрать "Запросить геолокацию"
После того, как клиент разрешит передачу местоположения, в бота перейдет сообщение с долготой и широтой.
Долгота и широта автоматически запишутся в переменные latitude и longitude.

Кнопка звонок

На данный момент работает только в Фейсбуке.
При создании кнопки выбираете "Звонок" и заполняете все поля:

Кнопки в WhatsApp

Давайте выделим теперь наш приветственный зеленый блок и справа в "Настройках сообщений" нажмем на "Настройки кнопок". Появится поле "Подсказка в мессенджерах без кнопок".
Текст, добавленный в поле "Подсказка в мессенджерах без кнопок" будет отображаться только в мессенджерах, не поддерживающих кнопки (в частности WhatsApp)..
Как этим пользоваться: впишем в это поле текст, который будет четко давать понять клиенту, что ему необходимо отправить, чтобы перейти в нужный раздел и посмотрим, как это будет выглядеть в WhatsApp (Рисунок 7).
Рисунок 7
Но это еще не все. Чтобы сработало условие при отправке цифр и не поменялись названия кнопок в остальных мессенджерах, добавим через точку с запятой в условия перехода цифры, соответствующие нашей подсказке (Рисунок 8).
Рисунок 8
Пример на рисунке 7 означает, что переходы из блока теперь будут срабатывать и, когда клиент пришлет фразу, и, когда цифру.
Официальный вотсап поддерживает кнопки.
Как создавать кнопки в WABA можно прочитать по ссылке:
Whatsapp Business API
Salebot.pro

Настройки кнопок вручную

Теперь давайте рассмотрим более сложный способ создания кнопок. Все будет происходить в поле "Расширенные настройки кнопок" в "Редактировании соединения".
Давайте изменим типы белых блоков в нашей схеме на блоки с Первостепенной проверкой условия (на т-зеленые). В Условие этих блоков запишите текст, написанный на их стрелках. Теперь удалите все стрелки в нашей схеме и запишите в поле "Расширенные настройки кнопок" следующий текст:
[{"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).
Рисунок 9

Все возможные настройки кнопок в этом поле

text - Текст кнопки(единственный обязательный параметр); url - ссылка, по которой будет переход при нажатии на кнопку(телеграмме работает только для кнопок в тексте); color - цвет кнопки; line - номер линии(если значение не указано, кнопки будут друг под другом); index_in_line - позиция кнопки в линии; type - принимает значения reply(кнопка в клавиатуре), inline(кнопка в тексте), location(запрос местоположения), phone(запрос номера телефона). one_time - заполните это свойство значением 1, и клавиатура не удалится после отправки сообщения (это свойство относится только к кнопкам reply).
Для создания кнопки с ссылкой необходимо указать параметр URL, остальные настройки идентичны с обычными кнопками.
[{"type": "inline", "text":"ссылка в гугл", "url":"https://google.com"}]

Ограничения

Facebook и Instagram

В Facebook и Instagram существует ограничение на количество кнопок. 12 reply(обычных клавиатурных) и 3 inline (в тексте)
В Инстаграм ссылки можно размещать только в инлайн-кнопках.
Рисунок 9

Viber

В Viber существует ограничение на количество кнопок. 24 reply(обычных клавиатурных) и 7 inline (в тексте)

ВКонтакте

reply

Клавиатура показывается под полем ввода в диалоге с пользователем. Максимальный размер стандартной клавиатуры — 5 × 10. Максимальное количество клавиш: 40.

inline

Клавиатура может отображаться внутри сообщения — это inline-отображение. Чтобы включить его, передайте параметр inline в объект клавиатуры. Её максимальный размер составит 5 × 6. Максимальное количество клавиш: 10.

Одновременно inline и reply

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

Видеоурок

Last modified 1mo ago