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

Обновлено: 07.07.2024

Кнопка в письме — один из важных элементов 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 верстка самой кнопки:

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

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

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

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

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

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

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

Небольшой рецепт на MS VB для сисадминов, которые хотят упростить жизнь сотрудникам.

Есть два способа:
Шаблоны — подойдет для простых вариантов, когда все поля статичны
VBA — под катом рассмотрим пример создания простейшего шаблона на встроенном в Outlook Visual Basic.

Есть еще конечно и нормальный способ — взять программиста, который напишет автоматическую рассылку писем на любом удобном ему движке, получить данные о сотрудниках из Exchange или LDAP и все будет ок, но для этого надо бюджет. Кому интересно костыль — под кат.

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

Верстка письма в Outlook идет в HTML, и ниже — инструкция и пример простого кода, который создает письмо, аттачит две картинки с логотипами, форматирует html-тело письма, прописывает поля письма.

Как можно улучшить?
Можно добавиьт несколько inputbox, или форму с radio button, где можно будет выбрать какие-то параметры, выбирая или адресатов, или нужный подвид анонса.
Можно делать поиск по адресной книге outlook (цикл по Outlook.Application.GetNamespace(«MAPI»).AddressLists(«Global Address List»).AddressEntries), и использовать информацию из карточки (имя, проект, контактные данные), создавая персонифицированные письма.
Можно сделать несколько заготовок для разных полей, и выбирать нужное случайно или по дате/времени.

К сожалению, столкнулся с тем, что если просматривать html письма Не в desktop outlook, могут возникать проблемы

Даже родной web-интерфейс exchange по какой-то причине может откусывать части, которые он считаем лишними (у меня он не отображал картинки в заголовке таблицы, хотя отображал фотки сотрудников в той же таблице). Выяснить принцип по которому он выбирал что отображать или нет, я не смог — все файлы аттачились одинаково.
Клиент с мака видит съехавший дизайн, там еще хуже вем в web-интерфейсе.
Причина в том, что exchange переделывает весь html-код и выводит его по своим личным правилам, используя жуткие cpan вместо того, что дизайнил я (div/table. ). Попытки нагуглить решение пока печальные — видимо в текущем exchange это сделать нельзя. Если у вас были успешные решения — поделитесь!

Например, вы загрузили несколько подписей HTML с веб-сайтов и хотите импортировать их в свой Outlook. Какие-нибудь простые способы? В этой статье вы найдете пошаговые инструкции по импорту или вставке подписей HTML в Outlook.

Импорт или вставка подписей HTML в Outlook

1 . Откройте папку, содержащую подписи Outlook, вставив путь к папке ниже в поле Address в папке и нажав клавишу Enter .
Путь к папке подписей Outlook : % AppData% Microsoft Signatures

2 . Откройте папку, в которой сохранены загруженные подписи HTML, выберите все папки и файлы с подписями HTML, щелкните правой кнопкой мыши и выберите Копировать из контекстного меню. См. Снимок экрана ниже:
Примечание : вы также можете скопировать эти папки и файлы, выделив все и нажав Ctrl + C одновременно.

3 . Теперь вернитесь в папку, содержащую подписи Outlook, а затем вставьте подписи HTML, одновременно нажав клавиши Ctrl + V .

5 . Найдите HTML-файл одной загруженной подписи, щелкните его имя, измените его расширение с html на htm и нажмите клавишу Enter . См. Снимок экрана:

6 . В открывшемся диалоговом окне «Переименовать» нажмите кнопку Да , чтобы продолжить.

Примечание . Если имеется несколько загруженных подписей HTML, измените их расширения на htm , выполнив шаг 5-6 выше, по одному.

Пока вы импортировали подписи HTML в свой Outlook. Для настройки/изменения подписей выполните следующие действия:

Предоставлено Kutools for Outlook. Нажмите, чтобы получить 60-дневную бесплатную пробную версию без ограничений!

Демонстрация: импорт или вставка подписей HTML в Outlook

Совет : в этом видео вкладка Kutools добавлена Kutools for Outlook . Если вам это нужно, нажмите здесь , чтобы получить 60-дневную бесплатную пробную версию без ограничений!

Настройка кнопок голосования в Outlook
Настройка кнопок с несколькими вариантами голосования с помощью флажков в Outlook

Предоставляется Kutools for Outlook. Нажмите, чтобы получить 60-дневную бесплатную пробную версию без ограничений!

Настройка кнопок голосования в Outlook

Настроить кнопки голосования с множественным выбором с помощью флажков в Outlook

Kutools for Outlook : Добавьте более 100 удобных инструментов для Outlook, попробуйте бесплатно без ограничений в течение 60 дней. Подробнее Бесплатная пробная версия

1 . В режиме просмотра почты нажмите Главная > Новое письмо , чтобы создать новое письмо.

3 . Повторите шаг 2 выше, чтобы добавить другие флажки, а затем переименуйте их в параметры голосования, как показано на скриншоте ниже.

Примечание : когда получатели получают это электронное письмо с множественным выбором кнопки голосования в Outlook, им необходимо (1) нажать Home > Ответить , (2 ) проверьте несколько кнопок голосования по мере необходимости, а затем (3) отправьте ответное электронное письмо.

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

Демонстрация: настройте кнопки голосования с множественным выбором с помощью флажков в Outlook

Статьи по теме:

Экспорт результатов голосования из Outlook в Excel
Возможно, вы отправили электронное письмо с голосованием другим пользователям с помощью Microsoft Outlook и получили много результатов голосования. Как легко фиксировать результаты голосования? Возможно, будет проще экспортировать результаты голосования в книгу Excel перед статикой. В этой статье я покажу вам, как легко экспортировать результаты голосования из Microsoft Outlook в Excel.

Читайте также: