Превратите обычный ответ в то, на что можно нажать
Богатые сообщения — это интерактивные компоненты, которые вставляются в сообщение с помощью шорткода. Собеседник видит карточку, набор кнопок или небольшую форму, заполняет её, и его ответ сохраняется в диалоге.
Набирать список вариантов и надеяться, что кто-то ответит правильными словами, создаёт лишнюю работу для вас обоих. Богатые сообщения дают возможность просто нажать на нужный вариант, что удобно для выбора, карточек товаров, контактных данных, таблиц с ценами и видео.
Пошаговое руководство
Напишите сообщение и добавьте шорткод
Богатые сообщения вставляются с помощью шорткодов в текстовом редакторе панели. Введите или вставьте нужный шорткод, например [buttons options="A,B,C"], и отправьте сообщение как обычно. Собеседник увидит готовый компонент, а не текст шорткода.
Заполните параметры
Каждый шорткод принимает свои параметры. Карточка товара выглядит так: [card image="URL" header="ЗАГОЛОВОК" description="..." link="URL" link-text="Купить" extra="$599" target="_blank"], а видео — [video type="youtube" id="ID_ВИДЕО" height="350"], поддерживается youtube или vimeo.
При необходимости добавьте глобальные параметры
Каждое богатое сообщение также принимает id, title, message, success и settings. Используйте title и message для введения компонента, а success — для того, что отображается после ответа собеседника.
Экранируйте проблемные символы
Запятые, двоеточия и кавычки имеют значение внутри шорткода, поэтому экранируйте их в своём тексте обратной косой чертой: \, для запятой, \: для двоеточия и \" для кавычки. Пропуск этого шага — самая частая причина, по которой богатое сообщение отображается частями.
Переведите текст, если вы работаете с несколькими языками
Исходный текст богатого сообщения должен быть на английском. Добавьте английскую строку и её перевод в Настройки > Переводы > Интерфейс.
Создайте собственный шорткод, если стандартные не подходят.
Статические богатые сообщения из собственного HTML создаются в Настройки > Разное. Полезные классы: sb-rich-btn sb-btn для кнопки-ссылки, sb-rich-btn sb-btn-text для текстовой ссылки и sb-image, чтобы пользователи могли увеличивать изображение по клику.
Справочник по настройкам
| Настройка | Что это делает |
|---|---|
| [card] | Карточка в стиле товара с изображением, заголовком, описанием, ценой или дополнительным текстом и кнопкой-ссылкой. |
| [slider] и [slider-images] | Пролистываемый набор карточек (до 10 слайдов) или простой слайдер изображений, записываемый как [slider-images images="URL,URL,URL"]. |
| [chips] | Маленькие нажимаемые фишки-варианты, записываемые как [chips options="A,B,C"]. |
| [buttons] | Набор кнопок ответа, записываемый как [buttons options="A,B,C"]. |
| [select] | Выпадающий список вариантов, записываемый как [select options="A,B,C"]. |
| [inputs] | Небольшая форма с текстовыми полями и кнопкой отправки, записываемая как [inputs values="A,B,C" button="Отправить сейчас"]. |
| [email] | Собирает контактные данные, например [email name="true" last-name="true" phone="true" phone-required="false" placeholder=""].</p> |
| [timetable] | Показывает ваше расписание работы в виде компонента внутри сообщения. |
| [articles] | Показывает статьи в сообщении, оформленные как [articles link="..."]. |
| [list] и [list-image] | Простой, нумерованный, двухколоночный список или список с изображениями, например [list values="A,B,- C,- D,E" numeric="true"] или [list-image values="URL:A,URL:B"]. |
| [table] | Таблица данных, оформленная как [table header="A,B,C" values="A:B:C,A:B:C"]. |
| [button], [image] и [share] | Одиночная кнопка-ссылка, изображение через [image url="..."], или иконки для расшаривания в соцсетях через [share fb="" tw="" li="" pi="" wa=""]. |
Полезно знать
Сырой HTML заблокирован в обычных сообщениях
В целях безопасности обычные сообщения не поддерживают сырой HTML и JavaScript. Если вам нужна своя разметка, создайте кастомное rich-сообщение в разделе «Настройки» → «Прочее».
Элементы вложенного списка требуют дефиса
В [list] добавьте перед элементом дефис и пробел, чтобы сделать его вложенным, например: [list values="A,B,- C,- D,E"]. Для двухколоночного списка с заголовками используйте двоеточия: [list values="A:X,B:Y,C:Z"].
Кнопки могут открывать статью
Кнопка записывается как [button link="..." name="Нажмите здесь" target="_blank" style="link"]. Чтобы открыть одну из ваших статей, используйте #article-ID в качестве значения ссылки.
Принудительный запрос контактных данных в мессенджерах
Добавьте required-messaging-apps="true" в шорткод [email], чтобы также требовать email или номер телефона в мессенджерах.
Форматирование и ссылки в редакторе
Редактор понимает *жирный*, __курсив__, ~зачёркнутый~, `код` и ```блок кода```. Ссылки превращаются в ссылки автоматически; чтобы задать имя, добавьте к ней #sb-пример, пробелы пишутся через двойной дефис.
Перенос строки — не клавиша Enter
Нажатие Enter отправляет сообщение. Используйте SHIFT+ENTER или CTRL+ENTER, чтобы добавить перенос строки внутри одного сообщения.
Часто задаваемые вопросы
Где набирать rich-сообщение?
Что происходит с тем, что кто-то выбирает или вводит?
Почему моя карточка разорвалась посередине предложения?
Сколько слайдов может содержать карусель?
Могут ли rich-сообщения отображаться на других языках?
Что, если мне нужен компонент, которого у вас нет?
Готовы покончить с хаосом?
Объединяйте сообщения, автоматизируйте повторяющиеся вопросы и превращайте диалоги в доход — начиная с сегодняшнего дня.
Начать