🌐EN🛠️ Developer Guide
User Guide
Start typing to search…

Створення кнопки СТA

Кнопка заклику до дії (CTA) — це обов’язковий елемент email-розсилки, що мотивує підписника перейти на сайт, у соціальні мережі тощо. Зазвичай основна кнопка листа оформлюється у такому ж стилі, як і кнопки на вашому сайті.

Створення кнопки

Додати кнопку можна всередину існуючого контейнера або в окрему структуру листа (докладніше про структури та контейнери).

📘

Примітка

Щоб контент коректно відображався у мобільній версії (наприклад, якщо потрібна інверсія блоків), рекомендується додавати кнопку саме до Контейнера. Структура, що містить лише блок CTA, не буде змінювати своє розташування відносно інших структур та елементів контенту при перегляді на різних пристроях.

Кнопка в контейнері

На бічній панелі Блоки знайдіть елемент Кнопка і перетягніть його в потрібний контейнер вашого листа.

Кнопка в окремій структурі

  1. На бічній панелі Структури і модулі відкрийте вкладку Розмітка.
  2. Перетягніть потрібну структуру в область листа на бажане місце.
  3. Після додавання структури оберіть тип контенту Кнопка.

Налаштування дизайну кнопки

За замовчуванням новостворена кнопка не містить посилання, має надпис Кнопка (шрифт Arial, 18 px), зелений фон #31cb4b і білий колір тексту #ffffff.

Ви можете налаштувати стиль як окремої кнопки, так і всіх кнопок, що створюватимуться надалі.

Редагування окремої кнопки

Клікніть блок із кнопкою у шаблоні.

На панелі відкриється меню редагування з двома вкладками: Налаштування та Стилі.

Вкладка Налаштування

Задайте основні функціональні параметри кнопки:

  1. Посилання: URL-адреса, яка відкриється при натисканні на кнопку.

  2. Текст кнопки: напис, що відображається на самій кнопці.

  • Безпечне посилання — за замовчуванням ця опція недоступна. Її можна підключити за запитом на [email protected]

Опція використовується, якщо в URL передаються чутливі дані такі як:

  • ідентифікатори контактів;
  • токени;
  • підписані ключі;
  • посилання на персональні сторінки чи замовлення.

Для звичайних промопосилань активація не потрібна.

Після підключення в налаштуваннях кнопки з’являється прапорець Безпечне посилання.

Після активації прапорця:

  • у коді листа до тега <a> додається атрибут es-sl;
  • під час відправлення посилання автоматично перетворюється на редирект:

https://esclick.me/sl?u=цільове_посилання&iid=ідентифікатор_листа&h=хеш

Працює у тестових, тригерних та масових розсилках, при перегляді листа в браузері, у звітах за одиночними повідомленнями.

📘

Примітка

Переходи за безпечними посиланнями не відображаються на карті кліків.

  1. Вирівнювання для десктопу: положення кнопки в блоці для десктопної версії (ліворуч, по центру або праворуч).
  2. Фіксована висота: якщо увімкнено, висота кнопки не змінюватиметься залежно від типу пристрою.
  3. Іконка: додайте зображення-іконку, яке відображатиметься всередині кнопки (наприклад, піктограма кошика чи стрілки).
  1. Приховування елемента. Увімкніть, якщо потрібно приховати кнопку в десктопній або мобільній версії листа.
  2. Відступи. Відстань між межами кнопки у блоці.
  3. Зовнішні відступи. Відстань від кнопки до інших елементів у десктопній версії листа (зверху, знизу, ліворуч і праворуч).
  4. Показувати. Виберіть, у яких версіях листа відображати цю кнопку (HTML і/або AMP-версія).
  5. Анкорне посилання — для переміщення читача до потрібного місця листа без необхідності прокручування. Це полегшує навігацію
  6. Тип події. Якщо ви хочете автоматизувати надсилання певних листів, наприклад, щоб за кліком кнопки відправляти їх клієнтам, укажіть подію, яка запускатиме цю дію.
Типи посилань у кнопці

У налаштуваннях кнопки можна обрати тип посилання. Це визначає, куди буде перенаправлений користувач після кліку.

  • Загальні: сайт (http, https), пошта (mailto), телефон (tel), файл (ftp, ftps), skype, viber, sms, telegram, інше.
  • Персоналізація: динамічне посилання.
  • Поділитися (соціальні мережі): Facebook, X, LinkedIn, Pinterest.

Вкладка Стилі

Вкладка для налаштування зовнішнього вигляду кнопки. Тут доступні такі параметри:

  1. Колір кнопки: колір фону кнопки.
  2. Стиль шрифту: стиль тексту на кнопці.
  3. Розмір шрифту: розмір тексту на кнопці (у пікселях).
  4. Стиль та колір тексту: оформлення (наприклад, жирний, курсив) і колір тексту кнопки.
  1. Розтягнути за шириною для десктопу: якщо активувати цю опцію, кнопка в десктопній версії займатиме всю ширину свого контейнера (її висота при цьому не змінюється).
  2. Фон блоку: колір фону контейнера (блоку), в якому міститься кнопка.
  3. Заокруглення: радіус заокруглення кутів кнопки.
📘

Примітка

Щоб округлені кути коректно відображалися в Outlook, увімкніть опцію Підтримка Outlook у глобальних налаштуваннях стилю (вкладка Кнопка).

  1. Межа: товщина рамки навколо кнопки.
  2. Колір межі: колір рамки кнопки.
  3. Стиль межі: стиль лінії рамки (суцільна, пунктирна тощо).

Збереження кнопки у бібліотеці модулів

Якщо ви плануєте використовувати створену кнопку в інших листах, збережіть цей елемент у Бібліотеці модулів. Це дозволить повторно додавати вже стилізовану кнопку до нових шаблонів без необхідності налаштовувати її заново.

Редагування всіх кнопок

За замовчуванням зовнішній вигляд кнопок визначається стилями, заданими в шаблоні листа. Щоб змінити їхній дизайн, відредагуйте налаштування стилів у загальному шаблоні. Після цього всі нові кнопки, додані до листа, автоматично успадкують оновлений вигляд.

Докладніше про налаштування стилів кнопок для всього листа >

Updated 28 days ago