Как вставить кнопки соцсетей в письмо
При создании письма в email сервисе SendPulse, в его шаблон можно вставить ссылки на популярные соцсети.
На сегодня доступны кнопки для ссылок таких соцсетей:
- Google+
- Flickr
- Tumblr
- Facebook Messenger
- Вконтакте
- Youtube
- Vimeo
- Одноклассники
- Blogger
- SlideShare
- Viber
- Medium
- Blogger
- Telegram
- Periscope
Для работы со ссылками соцсетей прежде всего откройте шаблон, немного прокрутите его вниз и кликните по блоку СОЦ.СЕТИ, в котором по умолчанию уже будут вставлены несколько иконок соцсетей.
Если вы создаете шаблон самостоятельно, то вставить иконки соцсетей можно так: в левой панели элементов найдите блок «Соц.сети» и перетащите его в нужную часть шаблона.
Заметьте, что соцсети, которые идут в этом блоке слева направо, расположены в той же последовательности сверху вниз в боковой панели справа от шаблона
Если нужно добавить кнопки соцсетей, нажмите «Добавить кнопку».
При этом новая кнопка добавится в конец списка и по умолчанию кнопка будет дублировать последнюю кнопку из списка.
Чтобы задать нужную соцсеть для иконки, выберите нужную кнопку в правой панели и кликните по флажку на ней, чтобы развернуть выпадающее меню со списком доступных соцсетей. Выберите нужную соцсеть в списке и кликните по ее названию.
Теперь нужно указать ссылку на страницу, которая будет открываться при клике на иконку соцсети в письме:
Для иконок можно задать стиль и размер: кликните по флажку чтобы развернуть выпадающий список стилей иконок и выберите подходящий; аналогично можно выбрать размер иконок: 16, 24, 32, 48, 64 пикселей.
Если нужно удалить иконку, кликните по значку мусорного ведра справа от нее:
Кроме стиля и размера иконки, можно выбрать тип ссылки, то есть тип действия, совершаемого по клику.
По умолчанию в шаблон будет вставлена кнопка типа «Follow-ссылка». Когда подписчик кликнет по этой кнопке, откроется страница указанной соцсети. Это позволит подписчику рассылки подписаться на вашу страницу.
Ссылку для кнопки типа «Follow-ссылка» копируйте непосредственно из соцсети или мессенджера.
Для некоторых соцсетей можно выбрать другие типы действия кнопки:
- Шаринг письма — кликнув по кнопке, получатель письма поделится веб-версией письма в указанной соцсети.
- Шаринг ссылки — кликнув по кнопке, получатель письма поделится вашей ссылкой в указанной соцсети.
Пользовательские ссылки
Кроме прямых ссылок на соцсети и ссылок из приложений-месенджеров, вы можете добавить ссылки, которые сгенерируете самостоятельно.
Чтобы предоставить подписчикам возможность поделиться чатом в Viber по названию, добавьте кнопку типа «Шаринг ссылки» со ссылкой viber://pa?chatURI=название_чата , где название_чата — это название вашего чата в Viber.
Чтобы поделиться чатом в Viber по номеру телефона, добавьте кнопку типа «Шаринг ссылки» со ссылкой viber://chat?number=%2B380981111111 , где 380981111111 — это номер, к которому привязан необходимый чат в Viber.
Как сверстать кнопку в письме
Кнопка в письме — один из важных элементов 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 верстка самой кнопки:
Пример кода для тестирования:
При создании письма выбираете блок кнопку и добавляете её в письмо.Кроме того, в нашей системе есть готовые наборы кнопок, которые можно добавлять лёгким движением руки.
Перед вами откроются все настройки кнопки, которые можно задать в несколько кликов даже без знаний вёрстки. В том числе, адаптивность кнопки и расположение в письме.
Создание кнопки, как и всего письма не займёт много времени. В редакторе вы сможете задать настройки кнопки:
- отступы,
- обводку,
- выравнивание,
- адрес ссылки,
- расположение в письме,
- адаптивность,
- цветовую гамму.
Вот и всё! Останется только дополнить вашу кнопку красивым призывом к действию.
Кстати, всем нашим новым пользователям (для комфортного пользования нашей системой и быстрого старта) мы дарим первый бесплатный шаблон в стиле сайта клиента. В шаблоне так же создаем стили для главной и второстепенной кнопки вашей будущей рассылки.
До новой встречи!:)
P.S.: Настройте дополнительный канал коммуникации для рассылок — Viber — кнопки здесь делаются так же просто.)
Добавить кнопку
Чтобы добавить кнопку, выберите на вкладке «Содержимое» блок «Кнопка» и перетащите его на рабочую область.
Нажмите на добавленный блок, чтобы открыть вкладку «Свойства блока». На этой вкладке вы сможете настроить кнопку под дизайн своего макета.
Рассмотрим настройки более подробно.
Искусственный интеллект. Если вы не можете определиться с текстом для кнопки, сгенерируйте его с помощью искусственного интеллекта. Для этого нажмите на кнопку «Пишите с AI», сформулируйте свой запрос, нажмите «Сгенерировать» и добавьте понравившийся вариант в письмо.
Действие. При помощи этой настройки вы можете:
- добавить к кнопке ссылку, чтобы при нажатии на нее пользователь мог перейти на сайт;
- настроить действие, чтобы при нажатии на кнопку пользователь смог позвонить вам, отправить письмо или SMS.
Выберите из выпадающего списка нужное действие и заполните соответствующие поля.
Авто ширина. По умолчанию ширина кнопки регулируется автоматически, но вы можете изменить ее вручную. Для этого отключите переключатель «Авто ширина» и с помощью ползунка настройте ширину кнопки.
Шрифт. С помощью данной настройки вы можете изменить шрифт для текста кнопки. Выберите нужный шрифт из выпадающего списка.
Толщина шрифта. По умолчанию толщина шрифта обычная. Но вы можете выделить текст кнопки жирным шрифтом, для этого выберите в выпадающем списке значение «Жирный».
Размер шрифта. С помощью данной настройки вы можете изменить размер текста для кнопки.
Цвет фона. Параметр для настройки цвета кнопки. Укажите hex-код цвета или подберите подходящий цвет в палитре.
Цвет текста. Параметр для настройки цвета текста в кнопке. Укажите hex-код цвета или подберите подходящий цвет в палитре.
Выравнивание. Параметр для выравнивания кнопки относительно всего письма. Вы можете переместить ее к левому/правому краю письма или оставить по центру.
Межстрочный интервал. С помощью данного параметра можно изменить интервал между строками текста внутри кнопки.
Межбуквенный интервал. С помощью данного параметра можно изменить интервал между символами текста внутри кнопки.
Направление текста. Параметр позволяет изменить направление текста внутри кнопки слева направо или справа налево.
Закругление углов. С помощью данного параметра вы можете изменить радиус скругления углов кнопки.
Отступы содержимого. Параметр позволяет изменить положение содержимого в кнопке.
Граница. Параметр позволяет добавить обводку к кнопке.
Отступы блока. Параметр позволяет изменить положение кнопки в блоке.
Скрыть блок. С помощью данного параметра вы можете скрыть блок:
- на ПК или мобильной версии письма;
- в AMP или HTML версии письма.
Есть ли способ сделать кастомную кнопку «ответить» в e-mail письме?
Здравствуйте, можно ли каким-либо образом сделать в письме свою кнопку «ответить», аналогичную по действию встроенной в почтовый сервис\клиент? Ещё лучше будет если при этом в поле «кому» можно будет подставить нужный адрес.
- Вопрос задан более трёх лет назад
- 1992 просмотра
Комментировать
Решения вопроса 1
Маркетолог
На любую ссылку (текст, изображение, кнопка) можно поставить mailto: в качестве значения атрибута href, а mailto: поддерживает «кому», тему письма, и даже само содержимое письма:
mailto:mail@mail.ru?subject=mail subject&body=message
Т.е. ставите вот такую ссылку: Ответить
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 1
Внимание! Изменился адрес почты!
Сделать можно все что угодно, но если у клиента стоит автоконверт в plain text или запрещение ссылок — вместо кнопки он увидит либо html теги (или чем там Вы ее будете делать) либо ничего.