Кнопка в письме — это ключевой элемент, который подталкивает подписчика на действие: переход на сайт, регистрация, скачивание материала. В статье мы разберём, как добавить её в письмо и сделать заметной.
4 способа вставить кнопку в письмо: от простого к сложному
Вставить кнопку в письмо можно по-разному: воспользоваться готовыми решениями, сверстать самостоятельно или оформить картинкой.
Как сделать кнопку в письме с помощью готового решения
Самый простой вариант — воспользоваться готовым шаблоном письма. Оно уже полностью свёрстано, нужно просто добавить свой текст, расставить ссылки и поменять картинки при желании. Ничего добавлять вручную не нужно, в том числе и делать кнопку со ссылкой.
У омниканальной платформы для коммуникации с аудиторией Sendsay есть десятки готовых шаблонов под разные тематики и события. Ниже несколько примеров их оформления:
.png)
Если нужного шаблона нет, подойдёт блочный редактор. В нём все элементы заранее свёрстаны в виде блоков, из которых письмо собирается, как конструктор. Такие редакторы предоставляют гибкие настройки кнопки: можно выбрать форму, размер, цвет, шрифт.
Покажем, как сделать кнопку, на примере блочного редактора Sendsay:
1. Перейти в раздел с рассылками, создать новое письмо и открыть его в блочном редакторе.
2. В готовых блоках слева выбрать кнопку и перетащить его в нужное место в письме.
.png)
3. Щёлкнуть на кнопку и написать текст для неё. Он должен быть коротким и ясным, например: узнать больше, открыть каталог, подтвердить регистрацию.
4. Выбрать цвет кнопки, чтобы она гармонично сочеталась с дизайном письма.
5. Настроить форму кнопки — округлую или прямоугольную.
6. Указать ссылку, на которую должна вести кнопка. Если компания пользуется веб-аналитикой, добавить UTM-метки.
.png)
Как сделать кнопку в рассылке с помощью HTML
HTML позволяет создать кнопку с уникальным дизайном даже при минимальных знаниях программирования. Чтобы в Sendsay сделать кнопку со ссылкой, нужно перейти в раздел с рассылками, создать новое письмо и открыть его в HTML-редакторе.
Дальше вставить код для кнопки. Например, код ниже создаст синюю кнопку с закруглёнными углами и белым текстом «Нажмите здесь»:
<a href="https://ваша-ссылка.com" style="display: inline-block; padding: 10px 20px; background-color: #007BFF; color: white; text-align: center; text-decoration: none; border-radius: 5px;">Нажмите здесь</a>
.png)
Параметры кнопки можно менять на своё усмотрение:
- Цвет фона — изменить параметр background-color. Например, #808080 — серый цвет, а #ffffff — белый.
- Цвет текста — изменить параметр color. Например, blue, black.
- Размер кнопки — изменить параметр padding. Например: 20px 30px.
- Форма углов — изменить параметр border-radius. Чем больше числовое значение, тем сильнее скругление углов.
- Ссылка — изменить параметр a href=. В кавычках нужно указать свою ссылку.
- Текст кнопки — изменить текст в конце кода перед параметром </a>.
Если не планируете верстать всё письмо через HTML-код, то можно добавить код кнопки в письмо и через блочный редактор. В нем есть HTML-блок, который позволяет вставить в макет письма раздел, свёрстанный вручную. Вот так это выглядит в блочном редакторе Sendsay.
.png)
Как добавить кнопку в письмо с помощью картинки
Можно сделать картинку с нарисованной на ней кнопкой — чаще всего так делают на основном баннере, который стоит в начале письма. Такую картинку добавляют в письмо и добавляют к ней ссылку.
В блочном редакторе это можно сделать с помощью блока картинка, а HTML — с помощью специального кода, который начинается с параметра <img>.
.png)
Читать также: Как сделать баннер для письма: 8 советов с примерами
Кнопка должна быть заметной и мотивировать к целевому действию
Для этого нужно соблюдать несколько рекомендаций по её оформлению →
Сделать кнопку контрастной. Цвет кнопки в email-рассылке должен выделяться на фоне письма, но при этом гармонировать с общим дизайном. Контрастные цвета помогают привлечь внимание. Например, на светлом фоне хорошо смотрятся яркие оттенки: синий, зелёный, оранжевый. На тёмном — светлые и пастельные.
.png)
Подобрать оптимальный размер. Размер кнопки должен соответствовать правилу большого пальца — минимальная ширина 44 пикселя, высота 44 пикселя. Тогда кнопку удобно нажимать на сенсорных экранах.
Написать цепляющий текст. Он должен быть коротким и мотивирующим. Лучше всего подходят глаголы действия: начать, получить, посмотреть, открыть. Также можно уточнить, что произойдёт после нажатия кнопки, например: получить скидку, открыть каталог на сайте.
Но не обязательно делать кнопки в письмах только в таком стиле. Если тональность бренда позволяет, можно писать более эмоционально, дерзко или даже мило. Например, журнал «Т—Ж» в email-рассылке использует разговорные варианты текста на кнопках.
.png)
Правильно расположить кнопку. Оптимальное размещение — в пределах первых 300–600 пикселей от верхней части рассылки, в зоне «первого взгляда». Если кнопка расположена ниже, она должна сопровождаться текстом, который мотивирует к дальнейшему взаимодействию.
Если письмо большое, можно сделать несколько кнопок, чтобы пользователю не приходилось листать письмо в её поисках.
Проверить корректность работы. Протестируйте кнопку на разных устройствах и в разных почтовых клиентах — она должна автоматически изменять размер и форму в зависимости от экрана. Также проверьте, как кнопка выглядит в тёмной и светлой темах, правильно ли указана ссылка в письме.
Найти лучший формат кнопки помогут A/B-тесты
В email-маркетинге есть инструмент A/B-тестирования, который помогает понять, какое письмо лучше работает на задачи бренда. Для этого нужно создать два варианта рассылки с отличием в оформлении кнопки. Например:
- сделать кнопку в одном письме со ссылкой на сайт, а в другом — в приложение;
- в одном текст «открыть каталог», в другом — «купить на сайте».
Затем проверить, в каком письме лучше кликабельность и конверсия в целевое действие. Так станет понятнее, как лучше оформлять кнопки для ваших подписчиков.
Читать также: А/B-тесты в email-маркетинге как гарантия эффективной рассылки
Платформы рассылки позволяют автоматизировать процесс тестирования. Посмотрим, как провести такой A/B-тест в Sendsay:
- создать два варианта письма с отличием в оформлении кнопки;
- указать список получателей данной рассылки;
- указать объём аудитории для тестирования, например, 10%;
- добавить оба варианта письма в тест;
- указать правило выигрыша — метрику, по которой Sendsay поймёт, какое письмо сработало лучше;
- запустить тест: Sendsay самостоятельно отправит первой части один вариант письма, а второй — другой;
- подождать несколько часов, чтобы собралась статистика;
- посмотреть результаты и выбрать письмо с лучшими показателями;
- оставшимся 90% подписчиков отправить это письмо.
Причём процесс отправки лучшей версии тоже можно автоматизировать: достаточно указать в настройках, что после завершения теста Sendsay должен автоматически отправить оставшейся аудитории письмо-победитель.
Как оформить кнопку в рассылке: главное
Подытожим основные тезисы:
- Кнопка должна быть заметной, привлекать внимание, но не выбиваться из стиля письма. Используйте контрастные фону письма цвета, но не забывайте про брендбук компании.
- Текст должен быть лаконичным и понятным. Он не просто указывает на действие, а усиливает мотивацию кликнуть. Используйте действенные глаголы и избегайте общих фраз. Чем точнее и конкретнее текст, тем выше шанс, что получатель выполнит желаемое действие.
- Проверяйте, какое оформление кнопки лучше сработает, если сомневаетесь в выборе дизайна. Для этого можно воспользоваться A/B-тестированием.
- Перед отправкой письма нужно отправить себе текстовые копии. Не ограничивайтесь базовой проверкой в интерфейсе редактора письма. Отправьте себе несколько копий и откройте письмо с разных устройств. Убедитесь, что кнопка везде корректно отображается.
Добавить кнопку можно тремя способами: с помощью готового блока в редакторе, HTML-кода, картинки. Или просто воспользоваться готовым шаблоном, в котором уже всё свёрстано — нужно лишь подставить свою ссылку и при желании поменять текст.
