Отправка html-письма при помощи web-интерфейса Gmail
В отличие от специализированных программ-почтовиков, создание html-сообщения электронной почты в веб-интерфейсах распространённых почтовых сервисов, задача, мягко говоря, не тривиальная. Но ознакомится с тем, как это действует, есть резон. Просто уже потому, что этот инструмент всегда есть под рукой. Т.е., ничего не надо скачивать, устанавливать — зашел на соответствующий сервис в браузере, и, что называется — бери и пользуйся.
Эту серию обзоров начнём с Гугловского Gmail-а. Как и для двух других самых распространённых, но уже отечественных сервисов, Mail.ru и Yandex-почта, он не отличается дружелюбностью интерфейсов для создания html-писем, ни в лучшую, ни в худшую стороны. Неудобно, но возможно — самое подходящее определение.
Видео
1 этап — ревизируем шаблон нашего html-письма
Перво-наперво, проверяем, что наше письмо содержит целиком прописанные ссылки на свои изображения. И что картинки расположены не на локальном диске компьютера, а на внешнем сервере. Иначе, Gmail изображения попросту не увидит, и отображаться в письме они не будут.
2 этап — создаём письмо из своего html-шаблона в среде браузера
Итак, логинимся на Gmail, заходим в свою почту и жмём на «Написать» слева вверху
Раскрывшееся окошко «Новое сообщение» развернём по максимуму, нам далее очень пригодится это пространство
Теперь решаем задачу вставки html-кода. Просто скопировать/вставить плодов не принесёт, ибо браузер воспримет эту вставку, как просто текст. Поэтому применим военную хитрость и внедрим код нашего письма в код станицы браузера. Итак, правый клик по полю для ввода текста письма. В выпавшем контекстном меню выбираем «Просмотреть код».
Все примеры действий, которые здесь озвучены, базируются на использовании «родного» для Gmail браузера, Google Chrome. Соответственно, используются и названия окон и команд из него. Но в целом, алгоритм универсален, и по аналогии можно действовать и в других браузерах.
Открыв код страницы, браузер Chrome подсветит нам блок кода между тегами и . Именно это содержимое определяет отображение html-страницы в теле письма.
Отметим, что горизонтальная компоновка окон на этом этапе работы более удобна, и привести окна к такому порядку поможет раскрывающийся список под тремя точками справа вверху вспомогательного окна, как показано на рисунке выше, и в нём надо выбрать средний вариант, «Dock to bottom».
Правый клик по выделенному блоку … вызовет контекстное меню, в нём выбираем команду «Edit as HTML» — редактировать, как HTML.
Блок с выделением трансформируется в текстовый блок, пригодный для правки. Выделим всё его содержимое, правый клик по выделенному и выберем «Копировать».
Теперь нам придётся призвать на помощь текстовый редактор, самый простой — «Блокнот». Делаем с ним два действия. Первое, открываем в нём пустой, чистый без текста файл. И в него копируем содержимое буфера обмена, то, что скопировано нами на предыдущем шаге.
Им же, «Блокнотом», через контекстное меню и его команду «Открыть с помощью» откроем файл с нашим html-письмом (шаги 2 и 3 на предыдущем рисунке).
Выделяем в «Блокноте» всё содержимое нашего письма и копируем теперь его в буфер обмена.
Теперь возвращаемся окно «Блокнота» с фрагментом кода из Gmail. Находим и выделяем в конце кода оператор
, и вставляем вместо него содержимое буфера, т.е. код нашего html-сообщения.
В результате получится модифицированный код страницы браузера из Gmail с внедрённым в него содержимым нашего письма. Но пока он только в «Блокноте», поэтому выделяем всё в этом, только что дополненном нашим кодом, окне и вновь копируем в буфер теперь уже это содержимое.
Возвратимся в Chrome. Там блок кода должен у нас находиться в состоянии редактирования для HTML, как после выполнения команды на рисунке 5. Если видим иное, повторяем то действие, приводим блок кода в состояние для редактирования и выделяем его, полностью и весь. По выделенному — правый клик и «Вставить».
Завершаем операцию кликом по полю для ввода текста письма — и изменения сохранятся.
Для выхода из режима правки html-кода закроем окна, отражающие этот код.
Как полагается, заполняем поля адреса получателя, тему письма. Наше html-письмо, созданное в недрах Gmail и Chrome-а готово, можно смело отправлять.
И под занавес обзора несколько обыденных, но от этого не менее жизненных советов. Первое, не бойтесь экспериментов, всё, что мы тут наредактировали, произошло только на нашей локальной машине, и простое обновление страницы восстановит исходный код. Второй совет банален, но так же важен и вписывается в парадигму хорошего тона, как и указание темы электронного письма: отправьте созданное сначала самому себе, а вдруг незаметная ошибка исказила ваш шаблон? Лучше, если эту неприятность первым увидите вы, а не ваш адресат. Ну и наконец, помните, что созданное вами можно сохранить в виде черновика. Тогда к результату редактирования можно возвращаться вновь и вновь, по мере надобности.
Как загрузить HTML-шаблон
Загрузить HTML-код можно в шаблон или в рассылку. Если вы хотите добавить код в шаблон, перейдите в раздел Контент и выберите нужный шаблон (или нажмите на синюю кнопку «Создать Email»).
Если вы хотите добавить код при создании письма, перейдите в раздел Рассылки, нажмите на синюю кнопку «Создать выпуск» и выберите тип выпуска «Email» (или откройте нужное письмо).
Готовую вёрстку с картинками можно загрузить в два шага:
- На шаге «Письмо» нажмите «Открыть галерею» — откроется галерея шаблонов.
- Слева выберите вкладку «Загрузить HTML» и загрузите ZIP-архив с HTML-файлом в кодировке UTF-8 и картинками (изображения могут быть в отдельной папке). Папки с картинками добавятся в раздел Рассылки → Файлы, и ссылки на картинки проставятся автоматически.
Также можно просто скопировать код и проставить все ссылки вручную:
- На шаге «Письмо» нажмите «В HTML-редактор» — откроется пустой HTML-шаблон. Скопируйте туда ваш код.
- Откройте в соседней вкладке браузера страницу Рассылки → Файлы, нажмите на плюсик и загрузите картинки шаблона.
- Скопируйте ссылку на первую картинку: нажмите на три точки напротив нужного файла и выберите «Скопировать ссылку на файл».
- Вставьте ссылку в код шаблона. Для этого нажмите на любой элемент в письме рядом с тем местом, где должно быть изображение, — в коде подсветится строчка, где он прописан, и недалеко будет строчка с картинкой.
- По очереди скопируйте ссылки для каждой картинки и добавьте их в код шаблона.
Кнопка «Скопировать в буфер» в html письме
Доброго времени суток! Задача: Есть html шаблон письма. Требуется сделать ссылку «Копировать в буфер», при нажатии на которую будет копироваться ссылка, находящаяся в теле письма, в буфер обмена. Почтовая программа Outlook 2010. Возможно ли такое в html-письмах?
- В десктопном приложении Облака Mail.Ru появилась возможность делать и редактировать скриншоты
- Пользователи мобильной Почты Mail.Ru смогут отправлять письма самим себе, не открывая приложение
- Яндекс официально представил волшебную кнопку в Яндекс.Почте
На сайте с 09.02.2012
10 марта 2013, 10:40
На чистом хтмл такого не сделать. Нужно использовать php.
Мне нужны деньги.
На сайте с 24.01.2008
10 марта 2013, 11:14
Tenarius:
На чистом хтмл такого не сделать. Нужно использовать php.
Какая связь между Оутлуком и ПХП?
На сайте с 09.02.2012
10 марта 2013, 11:20
Милованов Ю.С:
Какая связь между Оутлуком и ПХП?
А какая вообще разница, что за почтовый клиент, если суть в том, чтобы нажать на ссылку? Пользователь кликает на ссылку и попадает на генереную страницу, где ему определенным образом осуществляется выборка по контенту (если она вообще нужна) и потом выбраный контент копируется в буфер. Можно js например использовать для этого также.
На сайте с 25.11.2006
10 марта 2013, 11:22
Возможно ли такое в html-письмах?
Нет. Такого нельзя сделать.
✅ Трастовых площадок под размещение статей и ссылок. Опыт 15 лет! ( https://searchengines.guru/ru/forum/675690 ) ⭐ Купить вечные трастовые ссылки для сайта ( https://getmanylinks.ru/?srh ) ⭐ Новый аналог AllSubbmitter (заполнение форм) https://getmanylinks.ru/getmanysubmits.html (Бесплатное демо)
На сайте с 09.03.2013
10 марта 2013, 11:40
Пробовал вставлять js-код прямо в html шаблон письма. Работает (шаблон) только в IE. А вот если открыть такое входящее письмо в Outlook, то при клике на ссылку «Скопировать в буфер» открывается окно IE и вылезает ошибка: «Не удалось загрузить . Неопознанная ошибка».
function ClipBoard(meintext)
<
result = copyToClipboard(meintext);
if (result) <
alert(‘Ссылка скопирована в буфер обмена’);
>
else <
alert(‘К сожалению, Ваш браузер не позволяет работать с буфером обмена’);
>
>
function copyToClipboard(content) <
if (window.clipboardData && window.clipboardData.setData) <
window.clipboardData.setData(«Text», content);
return true;
>
else <
try <
netscape.security.PrivilegeManager.enablePrivilege(«UniversalXPConnect»);
>
catch (e) <
return false;
>
var clipboard = Components.classes[«@mozilla.org/widget/clipboard;1»].getService();
if (clipboard) <
clipboard = clipboard.QueryInterface(Components.interfaces.nsIClipboard);
>
var transferable = Components.classes[«@mozilla.org/widget/transferable;1»].createInstance();
if (transferable) <
transferable = transferable.QueryInterface(Components.interfaces.nsITransferable);
>
if (clipboard && transferable) <
// тип передаваемых данных transferable.addDataFlavor(«text/unicode»);
var textObj = new Object();
var textObj = Components.classes[«@mozilla.org/supports-string;1»].createInstance(Components.interfaces.nsISupportsString);
if (textObj) <
textObj.data = content;
// Упаковываем данные в контейнер
transferable.setTransferData(«text/unicode», textObj, content.length*2);
var clipid=Components.interfaces.nsIClipboard;
clipboard.setData(transferable,null,clipid.kGlobalClipboard);
return true;
>
>
return false;
>
>
LEOnidUKG:
Нет. Такого нельзя сделать.
Поэкспериментировав, перепробовав разные варианты, тоже прихожу к такому же выводу ((
Сохраняйте скриншоты рассылок
В поисках вдохновения для своих email рассылок? Используйте расширение, чтобы сохранить понравившееся письмо из почты Gmail в формате PDF, PNG или HTML.
Простой способ сохранить email шаблон в любом формате
Сохраняйте письма в PNG и PDF
Создайте свою коллекцию понравившихся примеров рассылок из входящих Gmail. Вы можете сохранять полномасштабные скриншоты и позже использовать их для вдохновения, когда создаете собственные email кампании.
Сохраняйте письма в HTML
Делайте адаптивную верстку письма на базе шаблона в HTML. Для этого нажмите «Сохранить, как HTML» и загрузите файл в сервис рассылок.
Загружайте шаблоны в SendPulse
Копируйте понравившееся письмо в свой аккаунт SendPulse. Далее редактируйте его на ваш вкус — все это возможно без знания HTML и навыков в дизайне.
FAQ
Можно ли использовать расширение бесплатно?
Да, устанавливайте и используйте расширение полностью бесплатно и сохраняйте понравившиеся примеры рассылок из входящих Gmail.
Как удалить водяной знак с изображений PNG?
Создайте аккаунт в SendPulse, и водяные знаки больше не будут добавляться в шаблоны.
Сохраняйте письма из почты Gmail
- Правила использования
- Безопасность SendPulse
- Политика Cookies
- Политика конфиденциальности
© 2015 — 2023. SendPulse Inc. Все права защищены
Начните работу с SendPulse
Создайте бесплатный аккаунт. Без банковской карты.
Введите действующий адрес электронной почты
Слишком короткий пароль
Пароль должен содержать от 8 до 48 символов, не менее одной цифры, а также строчные и прописные буквы.
Ваше имя слишком короткое
Введите своё имя
Пожалуйста, введите правильный номер
Пожалуйста, подтвердите, что вы не робот
Регистрационный домен заблокирован
Пользователь с таким электронным адресом уже существует Вы можете Войти или Восстановить пароль
Ваш промо-код недействителен
Такой номер уже зарегистрированВы можете Войти или Восстановить пароль
Похоже, у вас уже есть учетная запись. Пожалуйста, напишите нам по адресу support@sendpulse.com, если вы считаете, что возникла ошибка