Как вставить кнопку в письмо
Перейти к содержимому

Как вставить кнопку в письмо

  • автор:

Как сделать красивую кнопку в письме

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

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

Однако здесь не обойтись и без сложностей. Кнопки можно отнести к интерактивному контенту. В идеале хочется видеть их объёмными, кликабельными и реагирующими на щелчок пользователя.

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

Впрочем, в запасе у нас, как всегда, есть парочка обходных путей 🙂

Кнопка

Как вставить кнопку в письмо

#1. Разместить кнопку картинкой

Очевидный способ: находим подходящее изображение кнопки (просим нарисовать дизайнера), пишем мотивирующую к действию надпись — узнать больше, читать полностью — и аккуратно вырезаем то, что получилось, и вставляем в нужное место письма. Это подходит, если вы пользуетесь профессиональным сервисом для рыссылок SendExpert

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

Перейти к консультации

«Подкладываем» под картинку нужную ссылку и добавляем последний штрих — атрибут title.

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

Достоинства этого способа: вы можете вставить в письмо любую, сколь угодно «навороченную» графически кнопку.

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

#2. Разместить кнопку таблицей

Кнопку в письме можно сверстать «классическим» html-кодом.
Для этого просто создаем ее как ячейку во вложенной таблице. Для ячейки прописываем цвет фона, обрамление границей, стиль/размер/цвет шрифта:

Такую кнопку удобно редактировать: поменять цвет, вписать другой текст (не забываем про ссылку с атрибутом title, чтобы расшифровать подписчику действие кнопки).

Таблица гарантированно отобразится во всех почтовых клиентах. Ее достаточно просто можно адаптировать под мобильные устройства (можно задать ширину таблицы в % от ширины экрана).

Кнопки могут украсить ваше письмо. Правильно оформленная и размещенная кнопка поможет приподнять и клики.

Однако надеяться, что этот «волшебный» рецепт увеличения кликабельности в 2-3 раза, не стоит. Решающую роль в email маркетинге, все-таки, играет контент ваших писем. Если предложение подписчика не заинтересует, никакая сила не заставит его сделать клик мыши, даже если все ваше письмо будет одной сплошной кнопкой.

Как сверстать кнопку в письме

Как сверстать кнопку в письме

Кнопка в письме — один из важных элементов email-рассылки, который украшает письмо и помогает сделать письмо более эффективным. Без призыва к действию уже трудно представить проморассылки и транзакционные письма — они просто необходимы, чтобы захватить внимание клиентов и побудить их купить/почитать/перейти на сайт и т.д.

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

Краткое содержание статьи, как сверстать кнопку:

1. Кнопки в виде картинок

Если вы не хотите мучиться с вёрсткой или дизайн вашего письма требует уникальных кнопок со спец. эффектами, такими как: тени, свечения, анимация, градиенты или нестандартные шрифты — вы всегда сможете использовать кнопку нарисованную в графическом редакторе. Такая кнопка будет выглядеть 100% одинаково везде, но есть вероятность, что некоторые почтовые клиенты сразу ее не загрузят. Тот же Outlook по-умолчанию блокирует загрузку картинок.

Не забывайте использовать ALT-текст для кнопок-картинок. Дублируйте в нем название вашей кнопки, а так же применяйте стили для оформления ALT-текста.

2. Campaign Monitor

Компания разработала инструмент для создания кнопок на основе VML. Язык VML используется для корректного отображения кнопки в MS Outlook.

Создать такую кнопку можно легко по ссылке buttons.cm, вам нужно будет лишь указать исходные параметры и вам автоматически сгенерится код для использования.

Генерация кнопки Campaign Monitor

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

Пример кода для тестирования:

Откровенно говоря, слишком много кода получается. В Outlook такая кнопка хорошо смотрится, но она не универсальная из-за фиксированных размеров. Получается, её нужно постоянно генерировать заново, изменяя размеры в зависимости от длины названия.

3. MailChimp

Компания предлагает использовать кнопки на основе таблицы. Образец кнопки вы можете найти на странице Buttons.

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

Кнопка в сервисе MailChimp

Пример кода для тестирования

Кликнуть по такой кнопке получится только если точно попасть по ее названию. Так же получилось довольно много кода, а значит — это увеличит размера письма.

4. eSputnik

Мы верстаем наши кнопки используя в качестве основного элемента — ссылку, которая обернута в span элемент для создания эффектов границы вокруг кнопки или отбрасывания тени.

Мы не задаем фиксированных размеров кнопкам, поэтому наши кнопки увеличиваются в размерах вместе с увеличением размеров шрифта текста и его длины.

Делайте красивые письма!

«Объем» кнопки, или иными словами отступы вокруг текста, задается в виде толщины границ ссылки. Этот прием позволяет кнопке остаться объемной в Outlook и не превратиться в ссылку с цветным фоном. Однако Outlook не поддерживает css-свойство border-radius (и др.), поэтому закругленная кнопка в Outlook будет с острыми углами.

Кнопка в системе eSputnik

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

СSS классы со стилями наших кнопок

А это HTML верстка самой кнопки:

Вёрстка кнопки

Пример кода для тестирования:

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

Добавление блока с кнопкой

Перед вами откроются все настройки кнопки, которые можно задать в несколько кликов даже без знаний вёрстки. В том числе, адаптивность кнопки и расположение в письме.

Создание кнопки, как и всего письма не займёт много времени. В редакторе вы сможете задать настройки кнопки:

  • отступы,
  • обводку,
  • выравнивание,
  • адрес ссылки,
  • расположение в письме,
  • адаптивность,
  • цветовую гамму.

Вот и всё! Останется только дополнить вашу кнопку красивым призывом к действию.

Кстати, всем нашим новым пользователям (для комфортного пользования нашей системой и быстрого старта) мы дарим первый бесплатный шаблон в стиле сайта клиента. В шаблоне так же создаем стили для главной и второстепенной кнопки вашей будущей рассылки.

До новой встречи!:)

P.S.: Настройте дополнительный канал коммуникации для рассылок — Viber — кнопки здесь делаются так же просто.)

Как быстро добавить кнопку в письмо

Вы знали, что больше шансов получить переход по ссылке в письме, если её вшить в кнопку?

Поэтому я нашёл для вас простой способ создания кнопок.

Gmail Button — расширение для Google Chrome, которое поможет быстро добавить кнопку в письмо в Gmail.

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

Как добавить кнопку оплаты в письмо

Вы можете добавить кнопку оплаты через ЮKassa или QIWI в письмо и у величить продажи из email рассылки.

Содержание

Шаг 1. Создайте шаблон

Перейдите на вкладку «Шаблоны» и выберите создать новый или выберите готовый. Рекомендуем выбрать структуру шаблона «Магазин».

Шаг 2. Добавьте элемент «Оплата»

Из левой панели конструктора перетащите элемент «Оплата» в шаблон, зажимая левую клавишу мыши. Выберите способ оплаты — «ЮKassa» или «QIWI». Поставьте его рядом с теми товарами (услугами), которые вы хотите продавать прямо из письма.

Чтобы подключить платежную систему ЮKassa, перейдите в настройки сервиса во вкладку «Другие настройки». В поле напротив «Связать с ЮKassa» введите идентификатор магазина и нажмите «Сохранить».

Чтобы подключить платежную систему QIWI, перейдите в настройки сервиса во вкладку «Другие настройки». В поле напротив «Связать с QIWI» введите идентификатор магазина и нажмите «Сохранить».

Шаг 3. Введите информацию о покупке

Во вкладке «Текущий элемент» заполните поля «Сумма», название и переменную-идентификатор покупателя. В качестве идентификатора может использоваться номер договора плательщика или его email.

Шаг 4. Настройте внешний вид кнопки

В этой же панели «Текущий элемент» чуть ниже в «Настройках компонента» вы сможете настроить внешний вид кнопки. Можно задать цвет фона, внутренние отступы, расположение по центру или по краю, высоту элемента и контур в пикселях и цвете.

Как отправить вебхук про успешную оплату

Вы можете также настроить отправку вебхуков про успешную оплату товара пользователями к себе в систему.

Перейдите в «Настройки аккаунта» во вкладку «API». Под секцией «Вебхуки об успешной оплате» нажмите «Создать webhook».

Вставьте URL, на который передавать событие.

Пример структуры получаемого вебхука:

< "timestamp": 1644590834, "version": "1.0", "event": "payment_order", "order": < "totalCost": 12, "status": 200, "customerName": "User", "service": 2, "paymentMethodType": 7, "variables": [ < "valueType": 1, "name": "String", "value": "Hello World" >, < "valueType": 2, "name": "Number", "value": "55684213" >, < "valueType": 3, "name": "Date", "value": "2022-02-25" >, < "valueType": 5, "name": "Phone", "value": "+38063456228" >, < "valueType": 6, "name": "Email", "value": "user@sendpulse.com" >, < "valueType": 7, "name": "Link", "value": "http://sendpulse.com" >], "number": 1618, "currency": "BRL", "contactId": "7a505f4293dffcd7100f8f0004214892e4cf5618307908edf465042075d5c30", "updatedAt": "2022-02-11T14:47:14+00:00", "type": 2, "id": "a3704313-8c0b-0000-b195-c6b84242f0e2", "createdAt": "2022-02-11T14:47:13+00:00", "description": "Apple MercadoPago" > > 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *