Кнопки

Кнопки — это один из самых интуитивно понятных для пользователей элемент чат-ботов.

Добавляя кнопки к сообщению, мы упрощаем пользователю задачу: он нажимает на кнопку и переходит в нужный блок в зависимости от его ответа. Если человек не нажмет на кнопку, а напишет то же самое текстом, он также перейдет в соответствующий блок.

Сначала давайте рассмотрим мессенджеры, которые поддерживают кнопки (Телеграм, Viber, Facebook* messenger, Вконтакте, Instagram*).

Они поддерживают два типа кнопок: те, что появляются ниже поля ввода сообщения (клавиатурные или reply) и кнопки в тексте (инлайн, inline), т.е внутри сообщения.

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

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

• Как сделать кнопки в тексте

• Как сделать кнопки со ссылкой

• Как задать цвет кнопки

• Как сделать кнопку - Запросить телефон (Telegram и Viber)

• Как сделать кнопку - Оплата

• Как сделать кнопку - Запрос геолокации (Вконтакте, Телеграм и Viber)

• Как создать кнопку – Звонок (Facebook)

• Как создать кнопку - Поделиться (Telegram)

• Как добавить Callback кнопку (Вконтакте, Telegram)

• Как установить боту кнопку для входа в Ваше веб-приложение (Web App)

• Как заменить кнопки в WhatsApp

• Как настроить кнопки вручную

• Какие есть ограничения

Как создать кнопку

Кнопки можно создавать двумя способами: используя настройки кнопок в нужном блоке и используя стрелки между блоками. Первый вариант более функционален и удобен в работе.

Чтобы сделать кнопки из блока, открываете нужный блок, там выбираете раздел Кнопки:

В раскрытом меню расширенных настроек кнопок увидите два переключателя - Показать кнопки и Показать стрелки как кнопки. Отключаем Показать стрелки как кнопки и нажимаем "+ Добавить кнопку":

После клика на "+ Добавить кнопку":

В поле "Текст" пропишите текст, который будет в кнопке.

Далее выберите функцию кнопки:

Если вы хотите использовать кнопку как переход к тому или иному состоянию воронки без каких-либо оплат, запросов номера и пр., то оставьте функция "по умолчанию".

После чего кликните "Добавить" и тогда кнопка будет добавлен в настройках блока:

Кнопки могут быть клавиатурные (они исчезают после нажатия или ввода текста с клавиатуры) и кнопки в тексте (они не пропадают после нажатия), либо в автоматическом режиме (клавиатурные или в тексте в зависимости от мессенджера):

Бот реагирует на нажатие этих кнопок одинаково.

Можно создать еще кнопки двумя способами:

1) кликните на "+" справа от ранее созданной кнопки:

Тогда кнопка добавится на одной линии с первой кнопкой:

2) Если кликнуть снизу на "+ Добавить кнопку":

То новая кнопка будет добавлена под ранее созданной:

Кнопки можно менять местами, ставить в один ряд: для этого просто перетащите кнопку на нужное место.

Как правильно прописать название кнопки

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

Неправильный вариант:

Если вам необходимо как-либо выделить слова, вы можете использовать одинарные кавычки.

Правильный вариант:

Также вы можете сделать кнопки ярче и красочнее, воспользовавшись эмодзи:

Как выглядит кнопка с эмодзи в Телеграм:

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

Чтобы бот выдавал клиентам кнопки с ссылкой, необходимо при создании (редактировании) кнопки:

1. Установить тип кнопки "По умолчанию":

1. В поле URL указать:

а) прямую ссылку:

б) Переменную, в которой лежит какая-либо ссылка:

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

Уведомление о клике

Чтобы отслеживать, перешел ли клиент по ссылке, кликнул по кнопке в боте, а также настраивать реакцию на такие события, можно использовать чекбокс в настройках кнопки "С уведомлением о клике":

Кликните по чекбоксу, чтобы приходили колбеки (уведомления о событиях), если клиент кликнет по кнопке:

Далее нажмите "Изменить" или "Добавить" (в зависимости от того, редактируете ли вы кнопку или создаете новую).

Теперь давайте протестируем:

Мы нажали на кнопку, нам предлагают перейти по ссылке:

Если клиент перешел по ссылке, то в разделе "Клиенты" в диалоге с клиентом придет колбек следующего вида: "link_was_pressed #{URL}", где link_was_pressed - тело колбека (событие в проекте), #{URL} - ваша ссылка"

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

Вариант 1. Создаем блок с условием, который будет отрабатываться только если придет колбек:

Вариант 2. Прописываем колбек в условии стрелки:

В обоих вариантах блок отработается только при условии того, что придет колбек в диалоге с клиентом. Основное различие, что во втором варианте клиент будет дальше двигаться по воронке, а в первом (из-за использования блока "Не состояние") останется в том же состоянии воронки, то есть в зеленом блоке.

Как задать цвет кнопки

При необходимости вы можете указать цвет кнопки — это работает в ВК и Viber.

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

В Вайбере можете выбрать любой цвет кнопки — нажмите на черный квадрат и откроется палитра:

Функции кнопок

Как сделать кнопку - Запросить телефон (Telegram и Viber)

При создании кнопки нужно выбрать "Запросить телефон"

При нажатии на кнопку откроется окно, требующее подтвердить передачу номера:

Когда клиент разрешит передачу номера телефона, телефон будет передан в бота в качестве реплики клиента.

Как сделать кнопку - Оплата

Кнопка с функцией Оплата упрощает работу с подключенными платежными системами для выдачи ссылки на оплату.

Кнопка с функцией Оплата доступна для платежных систем:

Prodamus Robokassa Tinkoff Юkassa Cloudpayments

Основные поля кнопки Оплата

поле Текст. Данный текст будет указан на кнопке с ссылкой на оплату в сообщении Функция. Выбираем тип кнопки Оплата

поле Функция. Для создания кнопки для выдачи ссылки в кнопке на оплату выбираем функцию Оплата

поле Платежная система. В списке отображаются подключенные к проекту платежные системы

Посмотреть настройки кнопки с функцией Оплата для разных платежных систем можно здесь:

• для Prodamus здесь

• для Robokassa здесь

• для Тинькофф здесь

• для ЮKassa здесь

• для Cloudpayments здесь

Обязательными полями для формирования ссылки будут Сумма и Наименование товара/Описание товара. поле Сумма. В данном поле нужно указать сумму к оплате.

поле Наименование товара. В данном поле нужно указать название товара, которое будет указано на странице оплаты.

В зависимости от выбранной платежной системы в настройках кнопки появятся выпадающие меню "Данные для формирования чека" и/или "Дополнительная информация". При клике по ним откроются дополнительные поля:

Переменные при использовании кнопки с функцией Оплата

Как только пользователь получит блок с кнопкой "Оплата" автоматически будут созданы переменные клиента:

Служебная переменная клиента __payments , которая хранит сумму, идентификатор созданной ссылки, нужна для идентификации хука от платежной системы.

Переменная клиента error_payment_button создается, если при формировании кнопки возникла ошибка.

В значение переменной error_payment_button запишется либо текст ошибки, либо ответ платежной системы с ошибкой.

Как обработать результат

Успешный платеж.

После успешной оплаты в бота придет КОЛЛБЭК, который состоит из 10 символов секретного ключа платежной системы, слова _success и через пробел сумма платежа

Например: ovg58keefc_success 44, где:

ovg58keefc : 10 символов секретного ключа платежной системы

_success : результат обработки запроса (успешный платеж)

44 : сумма платежа

Пример использования: Шаг 1. В блоке "с кнопкой Оплата" добавляем кнопки с функцией Оплата.

Шаг 2. В поле Условие соединения от этого блока к блоку "Успешная оплата" указываем колбэк. Аналогично работает, если указать колбэк об успешной оплате в поле Условие блока Первостепенной проверки условия.

Платеж с ошибкой

При ошибке проведения оплаты в бота придет КОЛБЭК, который состоит из 10 символов секретного ключа платежной системы, слова _fail и через пробел сумма платежа

Например, ovg58keefc_fail 44 , где

ovg58keefc : 10 символов секретного ключа платежной системы

_fail : результат обработки запроса - платеж не выполнен или с ошибкой.

44 : сумма платежа

Если сумма, указанная в настройках кнопки, отличается от суммы, которую клиент оплатил, то придет КОЛЛБЭК, который состоит из 10 символов секретного ключа платежной системы, слова _different_amounts и через пробел уникальный ID платежа

Например: ovg58keefc_different_amounts 123456 , где:

ovg58keefc : 10 символов секретного ключа платежной системы

_different_amounts : результат обработки запроса (сумма оплаты отличается от суммы в ссылке)

123456 : уникальный ID платежа

Как сделать кнопку "Запрос геолокации" (Вконтакте, Телеграм и Viber)

При создании кнопки нужно выбрать функцию "Запросить геолокацию"

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

Как создать кнопку "Звонок" (Facebook*)

При создании кнопки выбираете "Звонок" и заполняете все поля:

Как создать кнопку "Поделиться (Telegram)"

При создании кнопки выбираете "Поделиться (только Telegram)" и заполняете все поля:

При нажатии на получившуюся кнопку будет предложено выбрать, кому из списка контактов переслать информацию. После выбора получателя будет вставлен текст из строки “передаваемая информация”. Таким образом можно передавать любые данные и ссылки (в том числе на сообщения из каналов в телеграмм).

Видео обзор по созданию кнопки "Поделиться".

Как добавить Callback-кнопку (Вконтакте, Telegram)

При создании кнопки выбираете "Callback-кнопка (только Вконтакте, Telegram)" и заполняете все поля:

После нажатия в разделе клиенты от клиента придет соответствующий кнопке callback:

Далее слова из поля "Текст ответного сообщения" можно указать в условии стрелки или блока:

Далее протестируем нашего бота:

Диалог с клиентом в разделе "Клиенты":

Видеоурок: Callback-кнопки

Как установить боту кнопку для входа в Ваше веб-приложение (Web App)

Для входа в приложение существует 3 разновидности кнопок:

1. кнопка в тексте;

2. кнопка в клавиатуре;

3. кнопка меню бота.

Для первых двух вариантов создаем кнопку и выбираем Telegram Web Application. В поле "текст" вводим тот текст, который будет на кнопке, а в поле ссылка - ссылку на Ваше веб-приложение.

После создания кнопки выберите, какая именно кнопка нужна.

Если не укажете явно, то будет создана кнопка в клавиатуре. Отличие кнопки только в ее типе, но сама работа кнопки будет одинаковой в любом из трех вариантов.

Также вот примеры, создающие кнопки через расширенные настройки кнопок. Кнопка в тексте:

[{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"здесь будет ссылка на ваше приложение"}]

Кнопка в клавиатуре: [{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"здесь будет ссылка на ваше приложение"}]

Третий вид кнопок создается через калькулятор:

tg_set_chat_menu_button(type, text, web_app_url, platform_id), где

type — необязательный параметр, в котором указываем один из 3 типов кнопки (“default”, “commands”, “web_app”),

text — необязательный параметр, если не был выбран type, в нем указывается текст на кнопке,

web_app_url - необязательный параметр, ссылка на ваше веб-приложение (указывается только при выборе type “web_app”),

platform_id - необязательный параметр, указывает на конкретный диалог с пользователем, если по каким-то причинам Вы хотите отображать кнопку только кому-то конкретному.

Вот пример создания кнопки, для входа в веб-приложение: tg_set_chat_menu_button('web_app', 'Web app', 'здесь будет ссылка на ваше приложение') В результате получите кнопку возле поля ввода сообщения, которая будет на виду постоянно:

Результатом нажатия на любую из 3 кнопок будет открытие веб-приложения через бота в отдельном окне.

Видео обзор работы с WebApp кнопками

Как заменить кнопки в WhatsApp

В WhatsApp не поддерживаются кнопки. Для этого можно воспользоваться подсказками для кнопок.

В настройках блока во вкладке Кнопки нажмите "Расширенные настройки", появится поле "Подсказка в мессенджерах без кнопок".:

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

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

Пример на рисунке ниже означает, что переходы из блока теперь будут срабатывать и на фразу от клиента и на цифру.

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

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

— открываете настройки блока "меню" и ставите тип блока "Первостепенная проверка условия"

— в поле "Условие" в этом блоке вписываете текст кнопки, которая будет вести на этот блок

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

Далее чтобы отрабатывалось условие, создайте кнопку с одним из условий, которое было прописано в блоке:

Создать кнопки стрелками

Клавиатурные кнопки можно создавать с помощью стрелок. Для этого протяните соединение (стрелку) и откройте редактор соединения(стрелки):

Чтобы создать кнопки с помощью стрелок, включите этот ползунок, а в поле "Условие стрелки" напишите текст, который будет на кнопке. Работает только в мессенджерах, где поддерживаются кнопки.

Номер в линии и номер линии: Кнопки, созданные с помощью стрелок, по умолчанию отображаются вертикально друг под другом. С помощью этого поля можно изменить номер линии для отображения кнопки, созданной стрелкой.

Цвет кнопки: При необходимости вы можно указать цвет кнопки — это работает в ВК и Viber.

Как настроить кнопки вручную

Теперь давайте рассмотрим более сложный способ создания кнопок: создание кнопок в поле "Расширенные настройки кнопок" в разделе "Кнопки" редакторе блока.

Простой вариант создания кнопок: создание кнопок протягиванием стрелок с условием:

Кнопки будут отображены следующим образом:

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

В редакторе блока с приветственным текстом в расширенных настройках раздела Кнопки записывается код кнопок:

[{"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}]

Вы получили такое же меню, но без стрелок соединения. Если все сделано верно, то нажав на кнопку такого меню вам придет сообщение из нужного блока-ответа.

Видеоурок работы с кодом кнопок.

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

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*

В Инстаграм* ссылки можно размещать только в инлайн-кнопках.

Максимальное количество символов в наименовании кнопки - 23 символа. Если их больше, то Facebook* обрезает текст после 23 символа и вставляет троеточие.

Viber

Viber позволяет добавить много знаков в наименование кнопки. Но не нужно забывать, что длинный текст переносится на новую строку и часть текста может быть не видна, а часть передвинуться на соседнюю кнопку.

ВКонтакте

reply

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

inline

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

ВКонтакте допускается до 40 символов в наименовании кнопки. Если символов больше, то кнопки не отправляются.

Одноклассники

В Одноклассниках может быть 42 знака в наименовании кнопки, остальные платформа обрежет и вставит троеточие.

Telegram

Максимальное количество символов в наименовании кнопок допускается 32 знака. Если их больше, то Telegram посреди текста вырезает кусок текста и вставляет троеточие.

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

В одном сообщении отправить оба вида кнопок не получится. О том, как соединить два вида кнопок в боте Telegram можно прочитать здесь:

TelegramSalebot.pro

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

Возможные ошибки создания кнопок

Bad Request: BUTTON_DATA_INVALID

Данная ошибка может возникнуть, если нарушены ограничения мессенджера для кнопок. Например, для Telegram ограничение на длину текста в названии кнопки до 32 символов.

Решение: сократить длину названия в настройках кнопки или использовать кнопки с функцией Callback

Также данная ошибка может всплывать в случае, если текст слишком длинный (для Телеграм ограничение 1-64 байта):

Видеоурок