Отправка письма в html-формате при помощи Outlook-2016
Почтовые программы офисного семейства компании Майкрософт от версии к версии уже привычно наследуют, прямо сказать, неважную восприимчивость к html-письмам. Возможность к восприятию лишь некоторых элементов html-разметки напрочь перечеркивает способность к адаптивности у писем, отправленных Outlook-ами всех версий обозримого прошлого. И в этом смысле, Outlook 2016 не исключение.
Это не значит, что нет принципиальной возможности создания и отправки html-сообщения при помощи этой, по многим другим аспектам уважаемой, программы, но подразумевает внимательное и аккуратное обращение с письмами в HTML. Для того, чтобы адресат увидел ваше отправление в том виде, как вы и запланировали, крайне желательно сделать предварительную отправку созданного письма самому себе для контроля и оценки внешнего вида.
Видео
Используем программу-посредник, или вариант № 1
Вставить код html в создаваемое Outlook 2016 сообщение можно через текстовый редактор того же семейства — MS Word 2016. Для этого нужно открыть в нём файл заготовки нашего послания через контекстное меню командой «Открыть с помощью»
Если, Word-а вдруг в предложенном списке будет не видно, добраться до него придётся через команду «Выбрать другое приложение» того же меню.
После того, как наш html-файл откроется, выделим всё его содержимое. Сочетание клавиш «ctrl+А» позволяет выполнить это в одно движение. Выделенное — копируем в буфер обмена.
Теперь следует вернуться в Outlook 2016. В группе команд «Главная» кликаем по кнопке «Создать сообщение»
В открывшемся новом окне для создания сообщений указываем адресата для нашего послания. Учитывая упомянутые выше «способности» Outlook-а к восприятию html-кода, не будет лишним для начала указать там собственный адрес, для тестовой отправки. Кроме того, в соответствии с этикетом электронной переписки, сразу укажем тему письма, чтобы не забыть об этом после. После чего — ставим курсор в поле ввода текста сообщения и вставляем из буфера скопированное на предыдущем шаге.
Результат — готовое к отправке html-сообщение в виде точной копии нашего файла.
Используем возможности Outlook-2016 для вставки готового html-кода, вариант№ 2
Для размещения кода письма средствами Outlook придётся немного поработать с настройкой интерфейса этой программы. Нам понадобится добавить команду «Вложить файл» на панель быстрого доступа в окне создания сообщений. Отметим сразу, что одноименное действие из группы команд «Вставка» нам не подойдёт, оно предполагает прикрепление файла к письму, а мы же преследуем сейчас иную цель.
Итак, создав новое письмо, раскрываем список под треугольником в левом верхнем углу окна создания сообщений.
После этой манипуляции в заголовке окна появляется пиктограмма в виде скрепки, «Вложить файл». Её нажатие инициирует диалог для выбора нашей html-заготовки. Когда целевой файл с расширением .html отобразится, выделяем его одинарным кликом мыши и раскрываем список (под треугольником) рядом с командой «Вставить», далее выбираем действие «Вставить как текст».
И видим отображение своего письма в окне создания сообщения. Для готовности остаётся, как и всегда, заполнить поля адресатов и темы отправления.
Использование инструмента «шаблон» для сохранения писем в html-формате
Если возникает задача сохранения созданного html-письма для каких-либо целей, то в Outlook 2016 для этого есть подходящее средство — внутренние шаблоны. Файлы шаблонов для Outlook имеют свой собственный формат, и этот тип файлов распознаётся по расширению .oft
Для создания шаблона следует, находясь в окне создания сообщений выполнить цепочку команд: «Файл» — «Сохранить как». В открывшемся окне «Сохранение элемента» необходимо выбрать в поле «Тип файла» значение «Шаблон Outlook (.oft)»
Нажатием «Сохранить» подтверждаем выполняемое действие. Вновь созданный шаблон сохраняется в папке, месторасположение которой по умолчанию задаётся путём «Диск:\Users\Пользователь\AppData\Roaming\Microsoft\Шаблоны». Если есть потребность, можно задать своё, отличное от стандартного, расположение.
У произведённого только что действия есть одно неудобное следствие: вновь сохранённого шаблона из интерфейса программы видно не будет. «Обмануть» это неудобство можно созданием папки для хранения шаблонов средствами самого Outlook-а. Попробуйте поступить вот так: правым щелчком мыши на имени вашего почтового ящика в главном окне программы инициируем открытие контекстного меню. В нём выбираем команду «Создать папку».
Назовём эту папку наглядно: «Шаблоны». И затем, обычным перетаскиванием файла прямо из окна «Проводника», скопируем в неё файл шаблона, содержащий наше html-письмо.
Теперь необходимое html-послание находится под рукой, готовое и к немедленной отправке, и, вдруг понадобись, к редактированию.
Редактирование html-сообщения в Outlook 2016
Строго говоря, для редактирования html-файлов, а именно ими являются, как мы помним, html-письма, Outlook не предназначен. Но всё же, минимальные возможности для этого в нём есть.
Во-первых, текст. С ним как раз всё просто: ставим курсор в нужное место текста открытого письма, и можно добавлять, удалять, править. Следует лишь воздержаться от создания новых текстовых полей и вставки значительных текстовых блоков — можно нарушить разметку письма. И это уже будет совсем другая история.
Второе, это картинки. Про них следует знать главное: изображения из вашего html-письма должны храниться на внешнем сервере, а не на вашем локальном компьютере, иначе Outlook не сможет их корректно отображать. Соответственно, и ссылки на картинки в html-коде сообщения должны указывать вовне, на сервер. Такие манипуляции, как вставка новых блоков с изображениями, непредсказуемо может отразиться на разметке html-письма, и лучше такую правку тут не практиковать. Разве что, заранее позаботившись о создании картинки точно такое же физического размера, как и подлежащая замене, можно безболезненно заменить одно изображение другим. Манипуляции таковы: в окне создания сообщения правым кликом по изображению вызываем контекстное меню, и в нём выбираем «Изменить рисунок. »
И через окно «Вставка рисунка» внедряем в письмо нужное изображение, подтверждая действие командой «Вставить» внизу этого окна.
Что касается гиперссылок, внедрённых в наше html-письмо (это будет третий тип объектов, доступных для манипуляций редактирования), действия с ними будут различаться в зависимости от того, к тексту или к картинке привязана редактируемая ссылка. Общим будет инициирующее правку действие: правый клик по объекту с гиперссылкой для вызова контекстного меню. А далее, в зависимости от намерений и типа объекта, можно выбрать соответствующий пункт для добавления, удаления или изменения ссылки.
Следом откроется соответствующее выбору окно, где и можно будет завершить редактирующее действие.
На этом, пожалуй, возможности редактирования в Outlook-е будут исчерпаны. Остается надеяться, что доступных возможностей вам хватит для решения минимальных задач по правке, в более же серьёзных случаях придётся обращаться к специализированному инструментарию.
Что ж, пожелаем нашему html- письму гладких интернет-дорог, а себе — достижения целей, ведь для чего-то же мы составляли наше послание. В добрый путь!
Как загрузить HTML-письмо в Outlook 2016 напрямую
У почтовика Outlook 2016 от Microsoft есть свои особенности, которые нужно учитывать при создании и отправки писем.
Он способен воспринимать только отдельные элементы HTML-кода — это значит, что адаптивность у рассылок, свёрстанных кодом, исчезает. Это нужно учитывать при отправке и понимать, как письмо может отличаться от браузерной версии.
Чтобы не переживать, что при отправке из платформы письмо изменится до неузнаваемости и всё поедет — можно загрузить его напрямую через Outlook. Рассказываем, как это сделать.
Инструкция
Шаг 1. Создайте новое сообщение.
Шаг 2. Откройте HTML-файл готового письма. Скопируйте содержимое, кликнув Ctrl+А, а далее Ctrl+С.
Шаг 3. Добавьте в сообщение скопированный файл, кликнув Ctrl+V.
Вставка данных в текст при создании встречи или сообщения в Outlook
Используйте асинхронные методы (Body.getAsync, Body.getTypeAsync, Body.prependAsync, Body.setAsync и Body.setSelectedDataAsync) для получения типа текста и вставки данных в текст создаваемой встречи или сообщения. Эти асинхронные методы доступны только для создания надстроек. Чтобы использовать эти методы, убедитесь, что манифест надстройки настроен соответствующим образом, чтобы Outlook активировал надстройку в формах создания, как описано в разделе Создание надстроек Outlook для форм создания.
В Outlook пользователь может создавать сообщения (текстовые, а также в формате HTML и RTF) и встречи (в формате HTML). Прежде чем вставлять данные, необходимо сначала проверить поддерживаемый формат элемента, вызвав getTypeAsync , так как может потребоваться выполнить дополнительные действия. Возвращаемое getTypeAsync значение зависит от исходного формата элемента, а также от поддержки операционной системы устройства и приложения для редактирования в формате HTML. После проверки формата элемента задайте coercionType параметр prependAsync или setSelectedDataAsync , соответственно, чтобы вставить данные, как показано в следующей таблице. Если не указать аргумент и setSelectedDataAsync предположить, prependAsync что вставляемые данные в текстовом формате.
| Данные для вставки | Формат элемента, возвращенный методом getTypeAsync | CoercionType для использования |
|---|---|---|
| Текст | Текст 1 | Текст |
| HTML | Текст 1 | Текст 2 |
| Текст | HTML | Текст или HTML |
| HTML | HTML | HTML |
1 На планшетах и смартфонах возвращает текст, getTypeAsync если операционная система или приложение не поддерживает редактирование элемента, который был создан в ФОРМАТЕ HTML, в формате HTML.
2 Если вставляемые данные являются HTML и getTypeAsync возвращают тип текста для текущего почтового элемента, необходимо реорганизовать данные как текстовые и задать для параметра coercionType Office.CoercionType.Text значение . Если просто вставить HTML-данные в текстовый элемент, приложение отобразит html-теги в виде текста. Если вы попытаетесь вставить html-данные и присвоить значение coercionType Office.CoercionType.Html , вы получите сообщение об ошибке.
В дополнение к параметру coercionType , как и большинство асинхронных методов в API JavaScript для Office, getTypeAsync , prependAsync и setSelectedDataAsync принимают другие необязательные входные параметры. Дополнительные сведения о том, как указать эти необязательные входные параметры, см. в разделе Передача необязательных параметров в асинхронные методы статьи Асинхронное программирование в надстройках Office.
Вставка данных в текущей позиции курсора
В этом разделе показан пример кода, который используется getTypeAsync для проверки типа текста создаваемого элемента, а затем используется setSelectedDataAsync для вставки данных в текущее расположение курсора.
Необходимо передать строку данных в качестве входного параметра в setSelectedDataAsync . В зависимости от типа текста элемента можно указать эту строку в виде текста или HTML соответственно. Как упоминалось ранее, при необходимости можно указать тип данных для вставки в coercionType параметр . Чтобы получить состояние и результаты , передайте функцию обратного setSelectedDataAsync вызова и необязательные входные параметры в метод, а затем извлеките необходимые сведения из выходного параметра asyncResult обратного вызова. В случае успешного выполнения метода можно получить тип текста элемента из asyncResult.value свойства , то есть «text» или «html».
Если пользователь не поместил курсор в текст элемента, setSelectedDataAsync вставляет данные в верхнюю часть текста. Если пользователь выбрал текст в тексте элемента, setSelectedDataAsync он заменяет выделенный текст указанными данными. Обратите внимание, что setSelectedDataAsync может завершиться ошибкой, если пользователь одновременно изменяет позицию курсора при создании элемента. Максимальное число символов, которые можно вставить за один раз — 1 000 000.
let item; // Confirms that the Office.js library is loaded. Office.onReady((info) => < if (info.host === Office.HostType.Outlook) < item = Office.context.mailbox.item; setItemBody(); >>); // Inserts data at the current cursor position. function setItemBody() < // Identify the body type of the mail item. item.body.getTypeAsync((asyncResult) => < if (asyncResult.status === Office.AsyncResultStatus.Failed) < console.log(asyncResult.error.message); return; >// Insert data of the appropriate type into the body. if (asyncResult.value === Office.CoercionType.Html) < // Insert HTML into the body. item.body.setSelectedDataAsync( "Kindly note we now open 7 days a week.", < coercionType: Office.CoercionType.Html, asyncContext: < optionalVariable1: 1, optionalVariable2: 2 >>, (asyncResult) => < if (asyncResult.status === Office.AsyncResultStatus.Failed) < console.log(asyncResult.error.message); return; >/* Run additional operations appropriate to your scenario and use the optionalVariable1 and optionalVariable2 values as needed. */ >); > else < // Insert plain text into the body. item.body.setSelectedDataAsync( "Kindly note we now open 7 days a week.", < coercionType: Office.CoercionType.Text, asyncContext: < optionalVariable1: 1, optionalVariable2: 2 >>, (asyncResult) => < if (asyncResult.status === Office.AsyncResultStatus.Failed) < console.log(asyncResult.error.message); return; >/* Run additional operations appropriate to your scenario and use the optionalVariable1 and optionalVariable2 values as needed. */ >); > >); > Вставка данных в начале текста элемента
Кроме того, можно использовать prependAsync для вставки данных в начале текста элемента и игнорировать текущее расположение курсора. Кроме точки вставки, prependAsync и setSelectedDataAsync ведут себя аналогичным образом. Сначала необходимо проверка тип текста сообщения, чтобы избежать привязки HTML-данных к сообщению в текстовом формате. Затем передайте строку данных, которая будет добавлена в текстовом или HTML-формате, в prependAsync . Максимальное число символов, которые можно вставить в начало за один раз — 1 000 000.
Следующий код JavaScript сначала вызывает getTypeAsync для проверки типа текста элемента. Затем в зависимости от типа данные вставляются в виде HTML-кода или текста в верхнюю часть текста.
let item; // Confirms that the Office.js library is loaded. Office.onReady((info) => < if (info.host === Office.HostType.Outlook) < item = Office.context.mailbox.item; prependItemBody(); >>); // Prepends data to the body of the item being composed. function prependItemBody() < // Identify the body type of the mail item. item.body.getTypeAsync((asyncResult) => < if (asyncResult.status === Office.AsyncResultStatus.Failed) < console.log(asyncResult.error.message); return; >// Prepend data of the appropriate type to the body. if (asyncResult.value === Office.CoercionType.Html) < // Prepend HTML to the body. item.body.prependAsync( 'Greetings!', < coercionType: Office.CoercionType.Html, asyncContext: < optionalVariable1: 1, optionalVariable2: 2 >>, (asyncResult) => < if (asyncResult.status === Office.AsyncResultStatus.Failed) < console.log(asyncResult.error.message); return; >/* Run additional operations appropriate to your scenario and use the optionalVariable1 and optionalVariable2 values as needed. */ >); > else < // Prepend plain text to the body. item.body.prependAsync( 'Greetings!', < coercionType: Office.CoercionType.Text, asyncContext: < optionalVariable1: 1, optionalVariable2: 2 >>, (asyncResult) => < if (asyncResult.status === Office.AsyncResultStatus.Failed) < console.log(asyncResult.error.message); return; >/* Run additional operations appropriate to your scenario and use the optionalVariable1 and optionalVariable2 values as needed. */ >); > >); > См. также
- Просмотр и изменение данных элемента в форме создания элементов Outlook
- Просмотр и изменение данных элемента Outlook в формах просмотра и создания
- Создание надстроек Outlook для форм создания
- Асинхронное программирование надстроек Office
- Просмотр, изменение или добавление получателей при создании встречи или сообщения в Outlook
- Просмотр или изменение темы при создании встречи или сообщения в Outlook
- Просмотр или изменение расположения при создании встречи в Outlook
- Просмотр или изменение времени при создании встречи в Outlook
Как отправить html-письмо в Outlook 2016
Добрый день. Сегодня мы расскажем вам как отправлять и редактировать html-письма с помощью Outlook 2016.
Сразу стоит оговорить, что Outlook 2016 не предназначен для отправки html-сообщений, а лишь воспринимает определенные элементы html кода. Это значит, что адаптивность у писем отправленных данными способами «исчезает», а само письмо будет несколько изменено относительно того, что вы увидите открыв его в браузере. Поэтому мы настоятельно рекомендуем проверять отображение письма, отправив его на свои почтовые ящики, перед «чистовой» отправкой предполагаемому получателю.
Способ загрузки html-письма №1 (с помощью Microsoft Word)
1. Открываем нужный нам .html файл с помощью Microsoft Word (Клик правой кнопкой мышки по нужному файлу — Открыть с помощью)
2. Выделяем все содержимое файла (Ctrl+A) и копируем в буфер обмена (Ctrl+С)
3. Создаем сообщение в Outlook 2016
4. Вставляем содержимое буфера обмена в тело письма (Ctrl+V)
Способ загрузки html-письма в Outlook 2016 №2 (напрямую)
1. Создаем сообщение
2. Добавляем в панель быстрого доступа функцию «Вложить файл»
Примечание: функция с таким же названием во вкладке «Вставка» работает по другому.
3. С помощью появившейся кнопки «Вложить файл» в панели быстрого доступа, выбираем нужный нам html файл письма, и добавляем его в сообщение с помощью опции «Вставить как текст»
4. Готово, письмо вставлено.
Сохраняем загруженное письмо как шаблон
Помимо непосредственно отправки html-писем, мы хотим поделиться с вами еще одним небольшим «лайфхаком» для Outlook 2016 — сохранение писем как шаблонов.
Файлы шаблонов Outlook имеют свое расширение .otf, и открываются сразу в интерфейсе самого почтовика. Это может быть полезно не только для экономии своего времени при отправке письма, но и для дальнейшей передачи письма коллегам, и на другие устройства.
Для того чтобы создать шаблон, после составления письма сохраните его как файл .otf — Файл/Сохранить как/Шаблон Outlook.
Примечание: Outlook автоматически создает директорию для сохранения шаблонов писем формата Диск:\Users\UserName\AppData\Roaming\Microsoft\Templates, для удобства доступа, не забудьте указать другую в момент сохранения.
Но к сожалению, данная функция только сохраняет сам файл шаблона, и он не будет отражен в интерфейсе почтового клиента. Для того чтобы получить быстрый доступ ко всем сохраненным шаблонам, вы можете создать директорию в интерфейсе Outlook:
И уже в нужную директорию добавить сохраненные шаблоны, просто перетащив их из нужной папки:
Теперь все нужные шаблоны будут всегда у вас под рукой!
Редактирование письма
Текст письма
Работа с текстом html-письма по своей сути ничем не отличается от работы с текстом в обычном письме. Вставка, редактирование шрифта, изменение выравнивания и т.д. — все эти опции для вас доступны. Но мы не рекомендуем создавать новые текстовые поля, там где они не предусмотрены структурой письма, и значительно изменять объем текста (за исключением «во всю ширину письма»).
Изображения
Первое что нужно сказать про изображения в письмах Outlook — изображения исходного письма должны храниться не на вашем компьютере, а в сети, и задаваться прямыми ссылками. В противном случае они не отобразятся у получателя.
Также, мы не рекомендуем добавлять новые изображения в письмо, и заменять имеющиеся на изображения другого размера — отображения письма после подобных манипуляций непредсказуемо.
Соответственно единственная безболезненная манипуляции над изображениями в письме — замена на аналогичное по размерам. Для этого кликните правой кнопкой мыши на изображение и выберите опцию «Изменить изображение/Из файла»
Выберите нужное изображение у вас на компьютере, и нажмите кнопку «Вставить»
Работа со ссылками
В работе со ссылками вы не ограничены только выбором объекта — добавить, удалить, заменить ссылку вы можете только для картинки или текста.
Для этого кликните правой кнопкой мышки на нужную картинку или выделенный участок текста и выберите нужную опцию из списка:
- Добавить ссылку — «Ссылка/Вставить ссылку»
- Удалить ссылку — «Удалить ссылку» для картинки, «Удалить гиперссылку» для текста
- Заменить ссылку — «Ссылка для редактирования» для картинки, «Изменить гиперссылку» для текста
После этого у вас откроется окно, где нужно будет указать нужную ссылку и нажать «Ок».
Поздравляем, письмо готово к отправке!