Отправка html-письма через веб-интерфейс Яндекс.Почта — Блог веб-студии «Десять букв» — Веб-студия «Десять букв»

6 февраля 2019

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

Подготовительные действия перед созданием html-письма

Ваш шаблон html-сообщения с большой вероятностью содержит картинки. Для того чтобы корректно отображаться, они должны находится на сервере, а не на локальном компьютере. И, соответственно ссылка на изображение должна указывать вовне, на тот самый сервер, а не на локальную папку вашего компьютера. И это обстоятельство стоит проверить перед всеми следующими действиями.

Ещё момент. Далее нам понадобится содержимое нашего html-письма в виде html-кода. Чтобы добраться до этого содержимого, откроем файл с нашим письмом, имеющий расширение .html, при помощи стандартного «Блокнота» из Windows. Используем правый клик и контекстное меню.

Рис. 1

Любым способом (например, «Ctrl+A») выделяем всё, от начала до конца, содержимое файла. И копируем в буфер обмена.

Рис. 2

Работаем с интерфейсом почтовика в браузере

Открываем в нашем браузере (в нашем примере всё делаем в Google Chrome, но подойдёт и любой альтернативный) сервис Яндекс.Почта, вводим логин и пароль почтового ящика. И создаём новое письмо.

Рис. 3

Окно браузера переключится на форму для создания писем. В неё нам надо убедиться, что режим поддержки оформления письма активен. Об этом подскажет панель оформления, её значки должны «откликаться» на наведение на них курсора мыши. Если это не так, то этот режим следует активировать нажатием команды «Без оформления».

Рис. 4

Теперь наша задача — буквально внедрить код нашего письма в заготовку письма от Яндекса. Для чего проделываем следующие манипуляции. Ставим курсор в поле для ввода текста, далее — правый клик мышью. В появившемся контекстном меню выбираем «Просмотреть код».

Рис. 5

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

Рис. 6

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

Итак, вернёмся к коду. Кликаем правой кнопкой подсвеченный блок и выбираем в контексте «Edit as HTML», т.е. редактирование в html-режиме.

Рис. 7

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

Рис. 8

И, повторно вызвав контекстное меню правым щелчком мыши на выделенном, выполнить команду «Вставить».

Рис. 9

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

Рис. 10

Последние штрихи

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

Рис. 11

При удовлетворительном результате на предыдущем шаге заполняем поле «Кому» действительными получателями отправления, не забываем подправить тему письма, если нужно. И отправляем наше творение сквозь всемирную паутину, с пожеланием достигнуть и адресата, и цели, с которой оно было создано, ведь не зря же мы приложили столько хитрости и столько усилий в борьбе с не самым из дружелюбных веб-интерфейсов — с Яндекс.Почтой.

Как отправить html-письмо через Яндекс почту

Дата публикации: 19 августа 2016

Есть много способов отправки html-писем через почтовые клиенты и, конечно, через сервисы рассылок. Но что делать, если нужно отправить пару писем, а никаких программ под рукой нет? Есть хитрый способ отправить html-письмо через Яндекс Почту.

Шаг 1. Подготовка письма

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

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

Откройте шаблон через обычный блокнот и скопируйте все содержимое письма. Потом весь этот код нам нужно будет встaвить в тело письма в Яндекс Почте.

Шаг 2. Вставка письма в Яндекс

Войдите в Яндекс Почту, и создайте новое письмо. Дальше пойдет хитрость. Нажмите кнопку “Оформить письмо”, чтобы перевести Яндекс Почту в режим, поддерживающий оформление.

У вас должна появиться вот такая панель (она выделена синим). Теперь интерфейс поддерживает различное оформление, а значит и код письма. Правда просто так его вставить не получится.

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

Для этого нажмите правой кнопкой мыши на пустую область письма и выберите “просмотреть код” (В каждом браузере этот пункт называется по-своему, но смысл сохраняется).

Все эти хитрые манипуляции мы проводили для того, чтобы появился вот этот блок, отвечающий за содержимое письма. (Панель может визуально отличаться в зависимости от вашего браузера. Мы показываем на примере Google Chrome).

Теперь нам нужно удалить этот блок, а на его место вставить код нашего письма. Для этого кликните на этот блок правой кнопкой мыши и выберите “Edit as HTML”,

теперь нам необходимо удалить текущий код…

… и на его место вставить код нашего письма. После этого закройте панель, нажав на крестик в правом верхнем углу панели.

Если вы сделали все правильно, то шаблон отобразится в теле письма.В данный момент в нем нет картинок, но не беспокойтесь по этому поводу. В отправленном письме картинки будут, при условии, что ссылки на картинки правильные (см. Шаг 1). Если переживаете за результат, то просто отправьте это письмо себе, и вы увидите, что все получилось как надо.

Шаг 3. Отправка html-письма в Яндекс Почте

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

После того, как письмо готово — впишите почту получателя, тему письма и отправляйте!

Подпись — Электронная почта. Справка

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

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

  1. Создать подпись
  2. Редактировать подпись
  3. Настройка выбора подписи
  4. Выбор места подписи в ответах
  5. Удалить подпись
  6. Я не могу выбрать подпись при создании письма

  1. Нажмите в правом верхнем углу угол.

  2. Выберите Личные данные, подпись, изображение.

  3. Введите свою подпись в разделе Ваши подписи.

  4. Вы также можете отформатировать текст своей подписи, используя инструменты над текстовым полем.

  5. При необходимости вы можете добавить изображение в подпись:

    • По ссылке — нажмите на иконку под текстовым полем и вставьте прямую ссылку на ваше изображение.
    • Локально — перетащите изображение из папки на вашем компьютере в текстовое поле подписи.

  6. Чтобы сохранить подпись, нажмите Добавить подпись.

  1. Наведите курсор на правый верхний угол вашей подписи.

  2. Щелкните появившийся значок.

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

  1. Переместите курсор на текущую подпись.

  2. Щелкните значок , который появляется в правом верхнем углу блока подписи.

  3. Выберите подпись.

Примечание. Если вы не можете выбрать подпись при составлении электронного письма, перейдите в раздел Личные данные, подпись, изображение и убедитесь, что параметр Разрешить выбор подписи на странице составления сообщения включен.

По адресу

Чтобы использовать подпись при отправке сообщений с определенного почтового псевдонима, выберите параметр Связать с адресом и выберите адрес электронной почты.

По языку сообщения

Яндекс.Почта может изменить вашу подпись в зависимости от языка сообщения (например, если вы пишете сообщение на этом языке, будет использоваться подпись на турецком языке). Чтобы использовать эту подпись в ответах на сообщения на другом языке, назначьте ее этому языку в Ваших подписях:

  1. Наведите курсор на правый верхний угол вашей подписи.

  2. Щелкните появившийся значок.

  3. Выберите нужный язык из списка.

    .

  4. Нажмите Сохранить.

По умолчанию подпись ставится в конце сообщения или разговора. Если вы хотите разместить его сразу после ответа, выберите вариант в разделе «Поместить подпись».

Примечание. Этот параметр можно применять повсеместно ко всем созданным вами подписям.

  1. Наведите курсор на правый верхний угол вашей подписи.

  2. Щелкните появившийся значок.

Перейдите в настройки и убедитесь, что опция Разрешить выбор подписи на странице составления сообщения включена в разделе Выбор подписи.

Взлом электронной почты в некоторых веб-клиентах

спросил

Изменено 2 года, 7 месяцев назад

Просмотрено 203 раза

Я новичок в дизайне электронной почты. У меня есть изображение, текст и кнопка подряд. При просмотре на мобильном устройстве изображение должно быть статичным, а кнопка должна располагаться под текстом. Таким образом, изображение и текст + кнопка должны быть рядом. Я использовал div и вложенные div. Он работает, как и ожидалось, на мобильном устройстве. Однако макет не работает в некоторых почтовых веб-клиентах, таких как AOL, Yahoo и Gmail. Работает нормально на Comcast и Outlook Web. Не уверен, что я делаю неправильно. Пожалуйста помоги.

Правильно отображается в сети Comcast.

Неправильно отображается в веб-почте Yahoo.

Вот код, который я использовал:

 @media screen и (max-width: 480px) {
            /* Что он делает: Принудительно превращает ячейки таблицы в строки полной ширины. */
            .стек-столбец,
            .stack-столбец-центр {
                отображение: блок !важно;
                ширина: 100% !важно;
                максимальная ширина: 100% !важно;
                направление: ltr !важно;
            }
            /* Что он делает: Вынуждает ячейки таблицы располагаться в строках шириной 1/3.
 
  */
            .stack-column-half,
            .stack-column-center-half {
                отображение: встроенный блок !важно;
                ширина: 140 пикселей !важно;
                максимальная ширина: 140 пикселей !важно;
                направление: ltr !важно;
            }
            /* Что он делает: Вынуждает ячейки таблицы быть строками шириной 2/3. */
            .стек-столбец-2half,
            .stack-column-center-2half {
                отображение: встроенный блок !важно;
                ширина: 190px !важно;
                максимальная ширина: 190 пикселей !важно;
                направление: ltr !важно;
            }
            /* И выровняйте их по центру. */
            .stack-столбец-центр {
                выравнивание текста: по центру !важно;
            }
            /* Что он делает: универсальный служебный класс для центрирования. Полезно для изображений, кнопок и вложенных таблиц. */
            .центр на узком {
                выравнивание текста: по центру !важно;
                отображение: блок !важно;
                поле слева: авто !важно;
                поле справа: авто !важно;
                поплавок: нет !важно;
            }
            table.
 
 
 center-on-narrow {
                отображение: встроенный блок !важно;
            }
            /* Что он делает: Настраивает типографику на маленьких экранах, чтобы улучшить читабельность */
            .email-контейнер p {
                размер шрифта: 17px !важно;
            } 
 
                    
                    
                        
                        
                        <дел>
                            
                                    <тд директор="ltr">
                                         worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" border="0" alt="alt_text">
                                    
 

                        <дел>
                            

                                

                                

                            
                        
                        

                                    <тд директор="ltr">
                                        
 

                                            

                                

                                        

                                                    <тд>
                                                         
Джон Смит
Название, название

                                        <дел>
                                        
                                            

                                                
 
                                                        
                                                    
                                                

                                            
                                        
                                        
                                            
                                            

                                                    <тд>
                                                        Контакты
 
  •  html-электронная почта
  •  шаблоны электронной почты
  •  веб-почта
 1
 Я поэкспериментировал с вашим кодом и кажется, что вы пропустили  width:100%;  в следующей строке:
 

 
 После добавления контактная ссылка вернулась в ту же строку, что и  John Smith  и  Title, title  .
 
 Вы можете попробовать приведенный ниже код, чтобы убедиться, что он работает для вас. Мне пришлось добавить коды таблиц вокруг строк таблицы, чтобы заставить рендеринг работать.
 <граница таблицы = "0" Cellspacing = "0" CellPadding = "0"> <тело>

                                                

                                                    
                                                

                                            
                                            
                                        
                                        
                                        
                                    
                                
                            
                        
                        
                    
                    
                
                  
  <дел> <тд директор="ltr">  worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" border="0" alt="alt_text"> <дел>
  
 <тд директор="ltr"> 
 <тд>
Джон Смит
Название, название
 <дел> 
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *