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

«Смартреспондер»: новый редактор. Часть третья

30-Январь-2016 | Автор публикации: Сергей Петров | 2 комментария

Доброго времени суток, уважаемый читатель!

Представляю Вам третью часть моей статьи о том, как работать в новом редакторе SmartResponder.

Первая находится здесь, вторая – вот тут.

Прочитайте две предыдущие части, освойте третью, и Вы будете вооружены всеми техническими знаниями для полноценной работы в новом редакторе!

Как вытащить код письма из нового редактора?

Итак, я работал в новой версии конструктора. В целом он мне понравился. Однако минус в том, что он не позволяет конвертировать созданное письмо вместе с текстом и картинками в HTML-код. Это печально. Но выход есть. Нужно самостоятельно вытащить код. Как это сделать?

Сейчас расскажу. В общем, у Вас есть письмо. Или шаблон письма. Если нет, то вернитесь к прочтению этой части после того, как создадите шаблон (либо уже готовое письмо на его основе).

С самого начала

Итак, пройдём всю процедуру полностью. С самого начала. Всё делаем за четыре шага.

Шаг первый. Идём по пути: «рассылки» – «список шаблонов писем».

Шаг второй. Выбираем сохраненный шаблон.

Шаг четвёртый. Правой клавиши мыши вызываем меню, где выбираем опцию «Просмотреть код». В браузере Chrome после этого снизу открывается дополнительное окошко («окно в окне») с HTML-кодом письма.

Чтобы Вам было понятнее, ниже представлены скрины всех шагов.

Как получить HTML-код письма

Если навести курсор мыши на любую строку кода, то в окне предпросмотра письма (оно же у нас открыто, никуда не делось) будет помечено поле, которые описывает эта строка.

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

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

Окно с кодом может располагаться горизонтально (в нижней части окна браузера), вертикально (в правой части окна браузера), а также в виде отдельного самостоятельного окна. Но нам отдельное самостоятельное окно не нужно, ведь мы будем бродить по коду и смотреть, какой элемент письма он отображает. Мне удобнее, чтобы дополнительное окно располагалось в нижней части окна браузера.

Как настроить дополнительное окно

Выбрать расположение дополнительного окна просто.

Всё. Теперь наше дополнительное окно располагается внизу. При этом в левой части верхнего меню должен быть выбран режим Elements.

Копируем код письма из браузера

Теперь двигаемся по коду сверху вниз. Как только мы нашли код, которым одновременно охватываются все элементы на странице нашего письма, вызываем правой клавишей мышки меню и выбираем Edit as HTML.

Открывается блок: прямоугольник, внутри которого много-много кода. Копируем весь код внутри этого прямоугольника (сначала нажимаем сочетание клавиш Ctrl + A, затем Ctrl + C).

Всё, мы скопировали HTML-код в буфер обмена, то есть во временную память нашего компьютера. Теперь можно этот код сохранить в виде шаблона на SmartResponder.

Для этого выбираем: «Рассылки» — «Список шаблонов писем» — «Создать шаблон». Затем используем режим «Красочное HTML-письмо (старый редактор)». Нажимаем кнопку «Далее».

Открывается чистое поле нового шаблона, в меню которого обязательно нужно нажать кнопку «Источник» (вот буквально сегодня увидел, что теперь эта кнопку переименована в «HTML-код»).

Правильно сохраняем код письма

Так, с этим разобрались. Теперь можно дополнительно сохранить код в виде HTML-файла на своём компьютере. Для этого достаточно открыть «Блокнот» и сохранить код в нём. После этого поменяйте расширение *.txt на *.html и откройте файл. В окне браузера Вы увидите копию Вашего письма.

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

Только благодаря ему удалось структурировать код при помощи команды «Форматировать исходный код».

Теперь можно переносить код в NotePad++ и сохранять. Хотя, нет. Перед сохранением нужно нажать «Преобразовать в ANSI», чтобы не было каракуль вместо текста при просмотре.

Можно ещё выбрать «Вид» — «Перенос строк». Тогда весь код будет располагаться по ширине страницы, а не в строку.

Выбираем «Сохранить как», придумываем названием файла (например, «Код HTML моего письма») и указываем тип файла Hyper Text MarkUp Language file (сохраняем в формате *.html).

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

Подстраховка: сохраняем код в SmartResponder

Раз уж мы «выудили» код из нашего письма, созданного в новом редакторе, раз уж он у нас есть, то можно его сохранить в сервисе SmartResponder для подстраховки. Зачем? Чтобы на его основе создавать новые письма, изменять их, и, что самое важное, использовать на других ресурсах (напомню, что в новом редакторе таких возможностей просто нет).

Для этого код, скопированный из браузера Google Chrome, надо вставить в старый конструктор SmartResponder.

Делается это несложно.

Вот, собственно, всё, что я хотел рассказать Вам о новом редакторе SmartResponder после того, как создал в нём своё первое письмо.

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

А какие сервисы для создания и отправки писем используете Вы в своей работе?

С уважением,
Сергей Петров,
автор проекта «Текст-Центр» — студии по созданию продающих текстов, мини-книг, вебинаров, воронок продаж.

Источник

Как получить исходник письма

Если вы обращаетесь в нашу службу поддержки с вопросом о поступлении письма, мы просим прислать исходник. Что это такое, зачем это нам нужно и как его получить?

Зачастую исходник позволяет нам по логам отследить путь имейла, понять, была ли какая-то проблема и в чём она заключалась.

Как получить исходник письма в популярных почтовых сервисах:

Gmail

Если вы используете ящик на Gmail (включая почту на собственном домене), откройте нужное письмо. В верхней части письма нажмите на пункт «Ещё» (иконка в виде трёх точек), затем выберите пункт «Скачать сообщение». Сохраните исходник письма с расширением .eml.

Яндекс.Почта

Если вы используете ящик на Яндекс.Почте (включая почту на собственном домене), откройте нужное письмо, нажмите в дополнительном меню на «Ещё» (иконка в виде трёх точек) и выберите пункт «Свойства письма».

Версия письма со всеми служебными заголовками откроется в новой вкладке. Перейдите в нее, нажмите правую кнопку мыши и выберите пункт «Сохранить как». Сохраните файл.

Mail.ru

Если вы используете ящик на Mail.ru (включая почту на собственном домене), откройте нужное письмо. Справа в верхней части письма выберите пункт «Ещё» (иконка в виде трёх точек), внизу выпадающего меню кликните на пункт «Ещё», затем нажмите «Скачать на компьютер». Сохраните исходник письма с расширением .eml.

Microsoft Outlook (2016, 2013, 2010)

1. В списке сообщений дважды щелкните по письму, чтобы посмотреть его полностью. В меню выберите «Файл» → «Сведения» → «Свойства».

2. Откроется модальное окно. В поле «Заголовки Интернета» выделите и скопируйте текст.

3. Откройте текстовый редактор, например «Блокнот». Вставьте скопированный текст в редактор. Нажмите «Файл» → «Сохранить как». В поле «Тип файла» укажите «Все файлы», в поле «Имя файла» введите название файла и добавьте расширение .eml (например, outlook.eml). Нажмите «Сохранить».

Outlook 365

1. Нажмите «Создать сообщение». Откроется новое пустое письмо.

Yahoo! Mail

Откройте письмо. В дополнительном меню выберите пункт «Больше» (иконка в виде трёх точек), затем нажмите «Посмотреть raw-сообщение».

Версия письма со всеми служебными заголовками откроется в новой вкладке. Перейдите в нее, нажмите правую кнопку мыши и выберите пункт «Сохранить как». Сохраните файл.

Rambler.ru

Откройте письмо. В верхней части письма справа нажмите «Показать оригинал» (иконка в виде ).

Версия письма со всеми служебными заголовками откроется в новой вкладке. Перейдите в нее, нажмите правую кнопку мыши и выберите пункт «Сохранить как». Сохраните файл.

Ukr.net

Откройте письмо. В дополнительном меню нажмите «Еще», выберите пункт «Загрузить письмо».

В новой вкладке откроется версия письма со всеми служебными заголовками. Перейдите в нее, нажмите правую кнопку мыши и выберите пункт «Сохранить как». Сохраните файл.

The Bat

Кликните в списке сообщений по нужному письму и пройдите по пути «Инструменты» → «Экспортировать письма» → «Файлы писем (.EML)».

Mozilla Thunderbird

Откройте письмо. В дополнительном меню справа нажмите кнопку «Больше», выберите «Сохранить как». Сохраните файл.

Apple Mail

Выберите письмо и используйте сочетание клавиш — Option+Cmd+U. Также исходник можно получить через меню. Откройте письмо, нажмите в меню «Файл», кликните по «Сохранить как» и выберите формат «Исходные данные». Письмо сохранится в формате .eml.

Источник

Создать письмо на основе вашего HTML-шаблона

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

Этот редактор корректирует ваш код: добавляет пропущенные теги, табуляции. Если вы хотите вставить код без изменений, воспользуйтесь другим способом.

На главной странице личного кабинета нажмите «Создать рассылку» — «Email».

Далее перейдите на вкладку «Письмо с нуля» и выберите «HTML редактор».

В HTML-редакторе есть три способа загрузить готовый HTML-шаблон.

Рассмотрим эти способы подробнее.

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

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

Находим на компьютере файл с HTML-шаблоном, который нам нужно будет перенести, и открываем его в любом редакторе, например в «Блокноте». Выделяем и копируем весь код.

Возвращаемся в HTML-редактор UniSender.

Находим на панели инструментов кнопку «Источник» и нажимаем её.

Открывается код письма.

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

Нажимаем на «Источник» ещё раз, чтобы переключиться в режим визуального просмотра.

Готово. Шаблон загружен.

Как загрузить письмо из веб-страницы

Нажимаем на панели инструментов кнопку «Загрузка из web-страницы». Это работает так же, как загрузка с компьютера, только по ссылке находится файл с письмом. Подойдет, если макет письма прикреплен, к примеру, в Dropbox.

Вводим ссылку на страницу.

Выбираем, как прикреплять изображения в письме:

Нажимаем кнопку «Загрузить».

Готово. Шаблон загружен.

Как загрузить письмо из файла

Для загрузки подойдут файлы формата rar, zip, 7z или html.

Если изображения находятся в отдельной папке, нужно добавить папку с изображениями и HTML-файл в архив.
Путь к изображениям должен быть относительным. Например:

Чтобы создать архив средствами Windows, выделите файл и папку с картинками, нажмите правой кнопкой мыши, выберите «Отправить» — «Сжатая ZIP-папка».

Архив создан. Теперь можем загрузить его в UniSender.

Находим на панели инструментов кнопку «Загрузка из файла» и кликаем на неё.

Нажимаем «Выберите файл».

Убеждаемся, что имя файла отображается и нажимаем «Загрузить».

Готово. Шаблон загружен.

Источник

Как отправить 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, а вот в «Яндекс.почте» придется сначала включить панель оформления. Также в «Яндекс. почте» может слететь верстка или не загрузиться картинки.

Источник