как вставить html код в письмо gmail

Как отправить html письмо через Gmail

В этой статье мы расскажем как отправить html-письмо через Gmail. Способ специфичен, но имеет право жить.

Шаг 1. Подготовка шаблона

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

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

Шаг 2. Вставка письма

Создайте новое письмо, разверните его на всю страницу для удобства и кликните по полю для текста.

Теперь нужно вставить код письма в сообщение, но если вы просто вставите его, то код вставится как обычный текст и никакого письма не получится. Поэтому тут нужно схитрить и сделать так, что бы браузер считал, что код письма — часть страницы.

Для этого нужно кликнуть по полю для текста сообщения правой кнопкой и выбрать «Просмотр кода элемента». Откроется панель с нужным блоком на странице.

Обратите внимание, мы работаем через Google Chrome. Если вы работаете из-под другого браузера, то название пункта в меню и внешний вид самой панели могут отличаться от нашего примера, но все они работают одинаково, так что вам не составит труда разобраться. В крайнем случае установите Chrome и сделайте все как у нас. Это быстро. Скачать можно с официальной страницы.

Браузер выделил нам блок div. Именно он отвечает за содержимое письма. Отредактируем его. Предварительно скопируйте код письма, открыв его через блокнот и скопировав содержимое.

Далее кликаем правой кнопкой мыши по тому самому блоку и выбираем пункт «Edit as HTML».

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

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

Шаг 3. Отправка письма через Gmail

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

Рекомендации

Изменения в коде страницы и обновление

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

Проверка корректности

Мы рекомендуем сначала отправить одно такое письмо на свой почтовый ящик, что бы убедиться, что программа не нарушила корректность шаблона.

Множественная рассылка

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

Источник

Table of Contents:

Иногда бывает полезно вставить язык веб-программирования HTML в сообщение Gmail, например, вставить подпись с изображением или полное письмо в формате HTML, включая общие элементы HTML, такие как таблицы ».

«теги или ссылки. Gmail не позволяет вставлять HTML-код непосредственно в ваши сообщения. Однако вы можете скопировать вывод любой HTML-страницы и вставить ее в текст сообщения электронной почты Gmail, чтобы вставить HTML-код в Gmail. сообщение.

Шаг 1

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

Шаг 2

Создайте HTML-документ либо с помощью HTML-редактора, редактора «что вы видите, то, что вы получаете», либо с помощью Блокнота. При вставке тегов изображений в HTML-код указывайте местоположение любых изображений в Интернете, а не тех, которые сохранены на вашем компьютере.

Шаг 3

Просмотр вывода HTML в вашем веб-браузере. Если вы создали файл на своем компьютере с помощью редактора HTML или Блокнота, просто щелкните файл правой кнопкой мыши. Нажмите «Открыть с помощью» и нажмите на свой веб-браузер из списка. Если вы используете онлайн-редактор WYSIWYG, выберите опцию предварительного просмотра.

Шаг 4

Выделите на странице все содержимое, которое вы хотите включить в свое сообщение Gmail, и нажмите одновременно клавиши «Ctrl» и «C», чтобы скопировать его в буфер обмена.

Шаг 5

Откройте веб-браузер, войдите в свою учетную запись Gmail (gmail.com) и нажмите «Создать», чтобы создать новое сообщение. При желании введите свое сообщение и затем щелкните правой кнопкой мыши там, где вы хотите, чтобы вывод HTML отображался в вашем сообщении. Нажмите «Вставить». Вывод HTML появится в сообщении Gmail.

Как вставить изображение с HTML

Как вставить файл Microsoft Excel на веб-страницу с HTML-кодом

Вы можете встроить Excel в HTML с помощью инструментов, встроенных в платформу Microsoft OneDrive. Кроме того, вы можете опубликовать файл Excel онлайн и просто дать ссылку на него с веб-страницы. Вы можете.

Как вставить файл GIF в HTML с помощью блокнота

Как вставить html код в письмо Gmail (Сентябрь 2021).

Источник

Отправка html-письма при помощи web-интерфейса Gmail

В отличие от специализированных программ-почтовиков, создание html-сообщения электронной почты в веб-интерфейсах распространённых почтовых сервисов, задача, мягко говоря, не тривиальная. Но ознакомится с тем, как это действует, есть резон. Просто уже потому, что этот инструмент всегда есть под рукой. Т.е., ничего не надо скачивать, устанавливать — зашел на соответствующий сервис в браузере, и, что называется — бери и пользуйся.

Эту серию обзоров начнём с Гугловского Gmail-а. Как и для двух других самых распространённых, но уже отечественных сервисов, Mail.ru и Yandex-почта, он не отличается дружелюбностью интерфейсов для создания html-писем, ни в лучшую, ни в худшую стороны. Неудобно, но возможно — самое подходящее определение.

Видео

1 этап — ревизируем шаблон нашего html-письма

Перво-наперво, проверяем, что наше письмо содержит целиком прописанные ссылки на свои изображения. И что картинки расположены не на локальном диске компьютера, а на внешнем сервере. Иначе, Gmail изображения попросту не увидит, и отображаться в письме они не будут.

2 этап — создаём письмо из своего html-шаблона в среде браузера

Итак, логинимся на Gmail, заходим в свою почту и жмём на «Написать» слева вверху

Рис. 1

Раскрывшееся окошко «Новое сообщение» развернём по максимуму, нам далее очень пригодится это пространство

Рис. 2

Теперь решаем задачу вставки html-кода. Просто скопировать/вставить плодов не принесёт, ибо браузер воспримет эту вставку, как просто текст. Поэтому применим военную хитрость и внедрим код нашего письма в код станицы браузера. Итак, правый клик по полю для ввода текста письма. В выпавшем контекстном меню выбираем «Просмотреть код».

Рис. 3

Все примеры действий, которые здесь озвучены, базируются на использовании «родного» для Gmail браузера, Google Chrome. Соответственно, используются и названия окон и команд из него. Но в целом, алгоритм универсален, и по аналогии можно действовать и в других браузерах.

Открыв код страницы, браузер Chrome подсветит нам блок кода между тегами

Рис. 4

Отметим, что горизонтальная компоновка окон на этом этапе работы более удобна, и привести окна к такому порядку поможет раскрывающийся список под тремя точками справа вверху вспомогательного окна, как показано на рисунке выше, и в нём надо выбрать средний вариант, «Dock to bottom».

Правый клик по выделенному блоку

Рис. 5

Блок с выделением трансформируется в текстовый блок, пригодный для правки. Выделим всё его содержимое, правый клик по выделенному и выберем «Копировать».

Рис. 6

Теперь нам придётся призвать на помощь текстовый редактор, самый простой — «Блокнот». Делаем с ним два действия. Первое, открываем в нём пустой, чистый без текста файл. И в него копируем содержимое буфера обмена, то, что скопировано нами на предыдущем шаге.

Рис. 7

Им же, «Блокнотом», через контекстное меню и его команду «Открыть с помощью» откроем файл с нашим html-письмом (шаги 2 и 3 на предыдущем рисунке).

Выделяем в «Блокноте» всё содержимое нашего письма и копируем теперь его в буфер обмена.

Рис. 8

Теперь возвращаемся окно «Блокнота» с фрагментом кода из Gmail. Находим и выделяем в конце кода оператор
, и вставляем вместо него содержимое буфера, т.е. код нашего html-сообщения.

Рис. 9

В результате получится модифицированный код страницы браузера из Gmail с внедрённым в него содержимым нашего письма. Но пока он только в «Блокноте», поэтому выделяем всё в этом, только что дополненном нашим кодом, окне и вновь копируем в буфер теперь уже это содержимое.

Рис. 10

Возвратимся в Chrome. Там блок кода должен у нас находиться в состоянии редактирования для HTML, как после выполнения команды на рисунке 5. Если видим иное, повторяем то действие, приводим блок кода в состояние для редактирования и выделяем его, полностью и весь. По выделенному — правый клик и «Вставить».

Рис. 11

Завершаем операцию кликом по полю для ввода текста письма — и изменения сохранятся.

Рис. 12

Для выхода из режима правки html-кода закроем окна, отражающие этот код.

Рис. 13

Как полагается, заполняем поля адреса получателя, тему письма. Наше html-письмо, созданное в недрах Gmail и Chrome-а готово, можно смело отправлять.

Рис. 14

И под занавес обзора несколько обыденных, но от этого не менее жизненных советов. Первое, не бойтесь экспериментов, всё, что мы тут наредактировали, произошло только на нашей локальной машине, и простое обновление страницы восстановит исходный код. Второй совет банален, но так же важен и вписывается в парадигму хорошего тона, как и указание темы электронного письма: отправьте созданное сначала самому себе, а вдруг незаметная ошибка исказила ваш шаблон? Лучше, если эту неприятность первым увидите вы, а не ваш адресат. Ну и наконец, помните, что созданное вами можно сохранить в виде черновика. Тогда к результату редактирования можно возвращаться вновь и вновь, по мере надобности.

Источник

Как отправить HTML-письмо: 4 простых способа

Блочный редактор писем, готовые шаблоны email, формы подписки и автоматизация. Запускайте email-рассылки, чтобы быть на связи со своими клиентами.

Где взять базу? Как сделать красивое письмо? Какие показатели смотреть? Расскажем об этом в бесплатном курсе из 16 писем. Татуировка в каждом письме!

Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.

Все email-письма можно разделить на два вида: Plain Text и HTML. Первые вы видели и писали много раз — это обычное текстовое сообщение, в котором можно выбрать шрифт или вставить гиперссылки. HTML-письма часто отправляют бренды: в них много картинок, есть кнопки, макет часто разделен на несколько колонок.

Кажется, что для создания HTML-писем нужно быть верстальщиком 80-го уровня. Но это не так: создать красивое письмо можно совсем без знаний в дизайне и верстке.

Я расскажу, как подготовить шаблон email и отправить его — через сервис рассылок или обычную почту.

Как создать HTML-письмо

Задизайнить и сверстать письмо можно четырьмя способами.

В блочном редакторе

Блочный редактор помогает верстать email тем, кто в совершенстве не владеет HTML и CSS. Письмо составляется по принципу конструктора Lego — из смысловых блоков разных размеров, которые вы заполняете контентом. Шаблон настраивается под конкретный проект в блочном редакторе: иногда можно обойтись только заменой картинок и текста.

+ большой выбор редакторов

+ в каждом редакторе доступна база готовых шаблонов, на основе которых можно сверстать свое письмо— в некоторых блочных редакторах ограничена настройка адаптивности писем

— при создании писем вы ограничены элементами и структурой, которые доступны в редакторе

Как создать HTML-письмо в блочном редакторе. Создавать письмо удобнее сразу в сервисе рассылки, которым вы пользуетесь: сверстали письмо, отправили его и потом анализируете статистику. К тому же, не придется подгонять шаблон под требования сервиса.

Предлагаю создать HTML-письмо на основе готового шаблона в редакторе UniSender:

2. Перед тем, как запустить рассылку, загрузите базу подписчиков — список email-адресов, на которые вы будете слать письма.

3. Начните создавать email-рассылку в сервисе : пропишите адрес, с которого будете отправлять письмо, имя отправителя и тему письма. Чтобы создать письмо, заходите в «Создать письмо» → «Email».

4. Наполните шаблон информацией или создайте письмо с нуля. О том, как работать в блочном редакторе, можно подробно прочитать в нашей Базе знаний.

5. Когда шаблон будет готов, нажмите «Сохранить». На следующих этапах вам нужно будет ввести тему письма и выбрать людей, которым вы будете отправлять рассылку.

6. Отправьте письмо через сервис рассылок. На последнем этапе вы можете посмотреть, как письмо будет выглядеть в почтовиках, привязать вашу Google Analytics и настроить отложенную отправку.

В визуальном редакторе

В блочном редакторе вы собираете письмо из отдельных блоков и в отдельном окне можете посмотреть HTML-код всего письма. В визуальном редакторе вы напрямую работаете с кодом и сразу видите, как меняется шаблон письма. Например, в визуальном редакторе Mailigen рабочее поле делится на две колонки: в левой работают с кодом, в правой – сразу показываются изменения в шаблоне.

+ в большинство блочных редакторов уже встроены визуальные редакторы. Между ними можно переключаться— нужно знать HTML и CSS

— малый выбор визуальных редакторов: большинство идут в связке с блочным

В редакторе первичного кода

В редакторах типа Sublime Text 3 и Visual Studio Code вы вручную прописываете HTML-код, который потом загружаете в сервис email-рассылок или почтовое приложение. Смотреть, как выглядит письмо, приходится в отдельной вкладке браузера, куда вы заливаете HTML-код.

+ доступны встроенные инструменты для упрощения работы над кодом

+ можно скопировать HTML-код любого письма и создать на его основе собственное— подходит только для опытных верстальщиков

— нельзя сразу в редакторе первичного кода посмотреть, как будет выглядеть письмо на мобильных или ПК

Заказать на аутсорсе

HTML-письмо сверстает фрилансер, сервис email-рассылок или веб-студия. Вы получите адаптивный шаблон, который будет отвечать брендбуку компании. Это может быть универсальное письмо, email под конкретную акцию или welcome-серия.

Заказать верстку письма можно:

+ несложно найти исполнителя — в сервисе, через который вы делаете рассылку, будет дополнительная услуга «Разработать HTML-письмо»

+ получите готовое письмо через 2-4 дня— во многом результат верстки зависит от того, насколько подробно вы заполните бриф

— нужно платить за каждый отдельный вариант письма

— мало веб-студий, которые занимаются HTML-письмами

Как отправить HTML-письмо

Когда письмо готово, его нужно отправить. Расскажу, как сделать это через сервис рассылки или вручную через почтовики Gmail, Mail.ru, Yandex и Outlook.

Отправляем через сервис рассылки

Сервис email-рассылок — платформа, в которой вы будете управлять рассылкой. В таких сервисах можно верстать письма, анализировать статистику, настраивать автоматические уведомления об оплате и даже создавать лендинги. Отправить HTML-письмо можно через любой из таких сервисов, поэтому в качестве примера я взял UniSender.

Если верстали во внешнем блочном редакторе

Внешний блочный редактор — это сервис, в котором можно собрать письмо, но нельзя его отправить. Для отправки шаблон нужно переносить в сервис рассылки. Рассказываю, как это сделать за 6 шагов.

1. Экспортируйте HTML-письмо в UniSender. Например, на бесплатном тарифе Stripo доступно 4 экспорта в месяц.

2. Введите имя аккаунта и API key. Ключ API можно найти в профиле UniSender. Он доступен в Личном кабинет по вкладке «Интеграция и API».

3. Переходим в UniSender. Найдите HTML-письмо в меню «Рассылки»/«Мои шаблоны». Оно появится сразу же после экспорта.

4. Проверьте письмо перед запуском. На этом этапе в HTML-редакторе UniSender можно исправить опечатки, изменить форматирование и добавить картинки. Если результат нравится — сохраните изменения.

5. Создайте рассылку в личном кабинете. Адрес отправки, имя отправителя и тему письма можно будет поменять позже, после настройки шаблона.

Если создавали письмо в редакторе первичного кода

Если вы верстали письмо в редакторе первичного кода, его также можно отправить через сервис рассылок. Расскажу на примере Visual Studio Code, что делать, если у вас уже есть HTML-код письма и вы хотите вставить его в сервис рассылки.

Сохраните письмо в формате HTML.

В UniSender создайте новую рассылку и выберите пункт «HTML-редактор».

В открывшемся окне редактора нажмите «Загрузка из файла». Выберите HTML-файл, который вы сохранили ранее в Visual Studio Code, и загрузите его.

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

Отправляем вручную в почтовике

Дальше надо просто вставить код письма в почтовик и отправить. Расскажем, как это сделать в разных программах.

В Gmail

Чтобы залить HTML-письмо в Gmail вручную, нужно:

2. Подсвеченный синим блок — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

3. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Gmail.

4. Добавьте получателя и введите тему письма.

5. Отправьте тестовое письмо, чтобы проверить его на ошибки. Например, если вы забудете проставить ссылки на изображение в HTML-шаблоне, при просмотре в Gmail в углу картинки появится кнопка «Скачать».

6. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Mail.ru

Чтобы залить HTML-письмо в Mail.ru вручную, нужно:

2. Подсвеченная синим строчка — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

3. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Mail.ru.

4. Добавьте получателя и введите тему письма.

5. Отправьте тестовое письмо, чтобы проверить его на ошибки.

6. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Yandex

Чтобы залить HTML-письмо в «Яндекс.Почту» вручную, нужно:

1. Включите панель оформления. По умолчанию в интерфейсе «Яндекс. Почты» эта панель отключена, а значит вы не сможете вставить HTML-код.

3. Подсвеченная синим строчка — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

4. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Yandex.

5. Отредактируйте HTML-шаблон. В нём может слететь форматирование: появиться лишние отступы или пустые строчки.

6. Добавьте получателя и введите тему письма.

7. Отправьте тестовое письмо, чтобы проверить его на ошибки. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Outlook

Чтобы залить HTML-письмо в Outlook вручную, нужно:

2. Подсвеченный синим блок — код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

3. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Outlook.

4. Проверьте шаблон: все ли картинки отображаются, не слетело ли оформление.

5. Добавьте получателя и введите тему письма.

6. Отправьте тестовое письмо, чтобы проверить его на ошибки. Если с тестовым письмом все ок, отправляем боевую рассылку.

Итого

Если вы никогда раньше не создавали HTML-письмо, лучше заказать его специалисту. Хочется сверстать самому — начните с изменения готового шаблона в блочном редакторе. Это самый простой способ, с которым можно получить отличный результат.

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

Работа в визуальном редакторе понравится пользователям, которые почитали про HTML-верстку и создали с десяток писем в блочном редакторе.

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

Если привыкли работать в конкретном редакторе — верстайте письмо в нем, сохраняйте отдельным файлом и импортируйте в сервис рассылок.

Отправить HTML-письмо вручную можно в любом почтовике. Удобнее всего это сделать в Gmail, а вот в «Яндекс.почте» придется сначала включить панель оформления. Также в «Яндекс. почте» может слететь верстка или не загрузиться картинки.

Источник