Как сделать красивую кнопку в письме
То, как выглядит ваше письмо, имеет очень большое значение для подписчика. Контент, конечно, король, но, если вы будете рассылать только текст, с торчащими отовсюду ссылками и расставленными невпопад картинками, а ваш конкурент отправит ту же информацию, но оформит ее красиво и профессионально, как думаете — кого выберут подписчики? Правильно!
Безусловно, контент нужно оформлять красиво, соблюдая фирменный стиль. И один из элементов, который помогает украсить ваше письмо и повысить количество кликов, являются копки.
Однако здесь не обойтись и без сложностей. Кнопки можно отнести к интерактивному контенту. В идеале хочется видеть их объёмными, кликабельными и реагирующими на щелчок пользователя.
Однако, как раз последнего эффекта в рассылке достичь крайне сложно.
Из-за технических особенностей почтовых клиентов вставить кнопку с тем же кодом, что и на сайте, в письмо не получится.
Впрочем, в запасе у нас, как всегда, есть парочка обходных путей 🙂
Как вставить кнопку в письмо
#1. Разместить кнопку картинкой
Очевидный способ: находим подходящее изображение кнопки (просим нарисовать дизайнера), пишем мотивирующую к действию надпись — узнать больше, читать полностью — и аккуратно вырезаем то, что получилось, и вставляем в нужное место письма. Это подходит, если вы пользуетесь профессиональным сервисом для рыссылок SendExpert
Если же вы еще пользуетесь обычными почтовыми сервисами, то вам помогут советы, изложенные ниже. Для почтовых клиентов, которые по умолчанию могут не загружать картинки (например, gmail), страхуемся: прописываем в html-коде изображения стили фона и шрифта, а также alt-текст:
«Подкладываем» под картинку нужную ссылку и добавляем последний штрих — атрибут title.
Пусть при наведении на кнопку подписчику демонстрируется небольшая подсказка, что именно произойдёт, если он кликнет на изображение:
Достоинства этого способа: вы можете вставить в письмо любую, сколь угодно «навороченную» графически кнопку.
Недостатки: кнопка в этом случае — всё же обычная картинка, которая может и не загрузиться в части почтовых клиентов.
#2. Разместить кнопку таблицей
Кнопку в письме можно сверстать «классическим» html-кодом.
Для этого просто создаем ее как ячейку во вложенной таблице. Для ячейки прописываем цвет фона, обрамление границей, стиль/размер/цвет шрифта:
Такую кнопку удобно редактировать: поменять цвет, вписать другой текст (не забываем про ссылку с атрибутом title, чтобы расшифровать подписчику действие кнопки).
Таблица гарантированно отобразится во всех почтовых клиентах. Ее достаточно просто можно адаптировать под мобильные устройства (можно задать ширину таблицы в % от ширины экрана).
Кнопки могут украсить ваше письмо. Правильно оформленная и размещенная кнопка поможет приподнять и клики.
Однако надеяться, что этот «волшебный» рецепт увеличения кликабельности в 2-3 раза, не стоит. Решающую роль в email маркетинге, все-таки, играет контент ваших писем. Если предложение подписчика не заинтересует, никакая сила не заставит его сделать клик мыши, даже если все ваше письмо будет одной сплошной кнопкой.
Сверстать кнопку в письме?
Верстала письмо под разные почтовики, в Windows 10 смотрится хорошо.
Кнопка-ссылка кроссплатформенно верстается только таблицей, насколько я знаю, правда, я делала упор на Outlook и The Bat! (последний в плане верстки — просто жесть). Паддинги многие почтовики не хавают, поэтому в качестве левого и правого мы используем пустые столбцы таблицы с заданной шириной. У меня окончательный вариант получится такой:
Как сверстать кнопку в письме
Кнопка в письме — один из важных элементов email-рассылки, который украшает письмо и помогает сделать письмо более эффективным. Без призыва к действию уже трудно представить проморассылки и транзакционные письма — они просто необходимы, чтобы захватить внимание клиентов и побудить их купить/почитать/перейти на сайт и т.д.
Для продвинутых пользователей, наверное, проще сверстать кнопку с нуля, чем брать уже готовую и заморачиваться над изменениями. Мы разобрали популярные практики, как можно сделать кнопку СТА разными способами.
Краткое содержание статьи, как сверстать кнопку:
1. Кнопки в виде картинок
Если вы не хотите мучиться с вёрсткой или дизайн вашего письма требует уникальных кнопок со спец. эффектами, такими как: тени, свечения, анимация, градиенты или нестандартные шрифты — вы всегда сможете использовать кнопку нарисованную в графическом редакторе. Такая кнопка будет выглядеть 100% одинаково везде, но есть вероятность, что некоторые почтовые клиенты сразу ее не загрузят. Тот же Outlook по-умолчанию блокирует загрузку картинок.
Не забывайте использовать ALT-текст для кнопок-картинок. Дублируйте в нем название вашей кнопки, а так же применяйте стили для оформления ALT-текста.
2. Campaign Monitor
Компания разработала инструмент для создания кнопок на основе VML. Язык VML используется для корректного отображения кнопки в MS Outlook.
Создать такую кнопку можно легко по ссылке buttons.cm, вам нужно будет лишь указать исходные параметры и вам автоматически сгенерится код для использования.
В зависимости от редактора, где вы планируете добавить кнопку, возможно, придётся её немного дорабатывать.
Пример кода для тестирования:
Откровенно говоря, слишком много кода получается. В Outlook такая кнопка хорошо смотрится, но она не универсальная из-за фиксированных размеров. Получается, её нужно постоянно генерировать заново, изменяя размеры в зависимости от длины названия.
3. MailChimp
Компания предлагает использовать кнопки на основе таблицы. Образец кнопки вы можете найти на странице Buttons.
Также компания рекомендует использовать адаптивные кнопки, в таком случае ширина призыва к действию будет зависеть от объема текста внутри ячейки таблицы.
Пример кода для тестирования
Кликнуть по такой кнопке получится только если точно попасть по ее названию. Так же получилось довольно много кода, а значит — это увеличит размера письма.
4. eSputnik
Мы верстаем наши кнопки используя в качестве основного элемента — ссылку, которая обернута в span элемент для создания эффектов границы вокруг кнопки или отбрасывания тени.
Мы не задаем фиксированных размеров кнопкам, поэтому наши кнопки увеличиваются в размерах вместе с увеличением размеров шрифта текста и его длины.
Делайте красивые письма!
«Объем» кнопки, или иными словами отступы вокруг текста, задается в виде толщины границ ссылки. Этот прием позволяет кнопке остаться объемной в Outlook и не превратиться в ссылку с цветным фоном. Однако Outlook не поддерживает css-свойство border-radius (и др.), поэтому закругленная кнопка в Outlook будет с острыми углами.
Вот так выглядят CSS-классы со стилями наших кнопок. Вы можете экспериментировать с этими стилями, чтобы добиться желаемого результата.
А это HTML верстка самой кнопки:
Пример кода для тестирования:
При создании письма выбираете блок кнопку и добавляете её в письмо.Кроме того, в нашей системе есть готовые наборы кнопок, которые можно добавлять лёгким движением руки.
Перед вами откроются все настройки кнопки, которые можно задать в несколько кликов даже без знаний вёрстки. В том числе, адаптивность кнопки и расположение в письме.
Создание кнопки, как и всего письма не займёт много времени. В редакторе вы сможете задать настройки кнопки:
- отступы,
- обводку,
- выравнивание,
- адрес ссылки,
- расположение в письме,
- адаптивность,
- цветовую гамму.
Вот и всё! Останется только дополнить вашу кнопку красивым призывом к действию.
Кстати, всем нашим новым пользователям (для комфортного пользования нашей системой и быстрого старта) мы дарим первый бесплатный шаблон в стиле сайта клиента. В шаблоне так же создаем стили для главной и второстепенной кнопки вашей будущей рассылки.
Мгновенное оформление заказа при клике на ссылку/кнопку в письме с переменной
Используйте переменную, чтобы создавать новый заказ для каждого пользователя по клику из e-mail или Telegram рассылки. Клиент будет моментально переадресован на страницу оплаты заказа без долгого заполнения форм.
Важно: если используете переменную в Telegram-рассылке, обязательно включите опцию «Скрывать превью ссылок» в настройках рассылки.
Переменная имеет 2 вида:
Где:
75490 — id номер предложения
Оформить заказ — текст, который отображается в письме для пользователя.
75490 — id номер предложения
Преимущество данного формата переменной: его можно использовать в виде ссылки или вставлять в кнопку с помощью опции Link.
Данная переменная работает в e-mail и Telegram рассылках по всем объектам — пользователям, заказам и покупкам.
Ниже рассмотрим, как переменная работает в email рассылке по пользователям:
Переменная вида
Для клиента выглядит, как ссылка с заданным текстом:
Отображается клиенту в виде простого адреса страницы:
Обращаем внимание: такая переменная выводит в письмо только текст адреса страницы, а почтовая программа распознает этот адрес и отображает в виде кликабельной ссылки.
Переменная вида
Для клиента выглядит, как кнопка с заданным для нее текстом:
Когда пользователь кликает на переменную, он попадает на страницу оплаты заказа.
В то же самое время в системе формируется заказ на пользователя.
Важно: При таком способе создания заказа не действуют ограничения, настроенные в предложении. Пользователь сможет создать заказ даже если срок действия предложения истёк.
Однако если для предложения указан крайний срок оплаты («определенное время» или «от создания заказа»), то оплатить созданный заказ пользователь по истечении этого срока не сможет.
Удалить файл
Удалить файл
Удалить файл
Добрый день, Татьяна!
Переменная для мгновенного оформления заказа предназначена для email рассылок. На страницах можно использовать формы для оформления заказа https://getcourse.ru/blog/275950 .
Сергей, добрый день!
Направьте, пожалуйста, ваш вопрос в техническую поддержку через форму обратной связи со страницы https://getcourse.ru/contacts .
Здравствуйте, Евгения.
При установке лимита пользователей в потоке возможность создания заказов не ограничивается.
Ограничение касается возможности оплатить заказ: https://getcourse.ru/blog/275847#ltBlock1044815
На основании всех созданных заказов, участниками потока станут только те пользователи, которые первыми успели оплатить до заполнения лимита.
А есть ли возможность сформировать подобную ссылку для новых клиентов? Чтобы человек жмакнул по ссылке (в которой указан код предложения) например в соцсетях или на стороннем сайте и попал на страницу с формой оформления заказа?
Кейс: есть набор лэндосов на разные предложения (не на ГК) на которые льется трафик. И чтобы не делать десяток виджетов с кнопками (которые покажут форму заказа) или десяток идентичных форм заказа (отличающихся только предложением), было бы круто к кнопкам на лэндосах привязать ссылку содержащую номер предложения и чтобы формировалась простая форма заказа на нужное предложение.
Или подскажите, можно как-то кастомизировать страницу CMS так, чтобы в GET параметре передавать номер предложения и форма на странице переключалась на оформление именно этого предложения?