Как использовать CSS в электронных письмах (в частности, для создания кнопки гиперссылки)

Question

Как использовать CSS в электронных письмах (в частности, для создания кнопки гиперссылки)

0

Я использую Google Apps Script (из электронной таблицы), и я создал несколько электронных писем, которые включают гиперссылки в формы и т.д. Я бы хотел, чтобы эти ссылки выглядели как кнопки. Я полный новичок в кодировании, поэтому решение не может быть слишком сложным. Все форумы предлагают использовать CSS. Есть ли способ вставить CSS-код в скрипт Google Apps?

Например, я хотел бы использовать этот сайт (нажмите "захватить код" в нижнем правом углу), чтобы сгенерировать код CSS, а затем отформатировать мои гиперссылки, назначив их классу, созданному кодом CSS. Но я не знаю, как правильно создать класс CSS в Google Apps Script.

Здесь часть сообщения моей электронной почты:

var message = '<HTML>';
message += "Hi, please click this button.";
message += '<br><br>';
message += '<a href="www.google.com" class="button"/>google</a>';
message += '<br><br></HTML>';

Здесь код CSS, который исходит от веб-сайта генератора:

.button{
 text-decoration:none; 
 text-align:center; 
 padding:11px 32px; 
 border:solid 1px #004F72; 
 -webkit-border-radius:4px;
 -moz-border-radius:4px; 
 border-radius: 4px; 
 font:18px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#E5FFFF; 
 background-color:#3BA4C7; 
 background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
 background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
 background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
 background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 ); 
 background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);   
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  

  }

duck 13 дек. 2013, в 16:59

Источник

Теги:

html

css

google-apps-script

google-spreadsheet

gmail

1 ответ

Ещё вопросы

Mogsdad · Accepted Answer · 2013-12-13T15-35-00.000Z

Поскольку вы хотите стилизовать кнопку в электронной почте, вы должны использовать встроенный стиль. Это обычно не так, как вы хотите делать стили, но из-за ограничений некоторых почтовых клиентов это односторонний стиль вашего стиля. (например, Mozilla Thunderbird будет уважать внутреннюю таблицу стилей, но веб-почта Gmail не будет.)

Чтобы упростить это для вас, почему бы не переместить создание кнопки в функцию, которую вы можете вызвать при создании своей почты? function htmlMailButton() ниже - это адаптация Awesome Email Button из этого сообщения в блоге.

function sendButtonMail() {
  var recipient = Session.getActiveUser().getEmail();
  var message = '<body>';
  message += "Hi, please click this button.";
  message = htmlMailButton("Google","www.google.com");
  message += '</body>';

  GmailApp.sendEmail(recipient, 'Button', '', {htmlBody:message});
}

// Return HTML representing a clickable "button" labled with buttonLabel, going to link.
// Inspired by http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/
function htmlMailButton( buttonLabel, link ) {
  var button = '<table cellspacing="0" cellpadding="0"><tr>'
          + '<td align="center" width="300" height="40" bgcolor="#000091" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">'
          + '<a href="##LINK##" style="color: #ffffff; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">##BUTTONLABEL##</a>'
          + '</td> </tr> </table>';
  return button.replace('##BUTTONLABEL##',buttonLabel)
               .replace('##LINK##', link);

}

Awesome Email Button - это таблица с одной ячейкой, что делает ее довольно надежной для многих почтовых клиентов и веб-служб. Инструкции по настройке размера доступны в блоге. Цвет фона управляется стилем <td> (table data), а цвет текста - в стиле <a>.

Редактирование: есть удобные инструменты, такие как MailChimp CSS Inliner Tool, которые могут помочь вам преобразовать теги CSS <style> в встроенные стили. Это полезно, если вы предпочитаете разрабатывать внешний вид своего тела электронной почты с помощью CSS. См. Как использовать скрипт Google Apps для изменения страницы CSS с помощью встроенных стилей? ,

Прекрасно, Могсдад. Спасибо! «Awesome Email Button» идеально подходит для моих целей на данный момент. Я искал все выше и ниже решение, подобное этому ... спасибо, что подключили меня к нему! Но когда мне станет немного удобнее, я вернусь к этому посту и посмотрю, что я могу сделать с предоставленным вами кодом. Еще раз спасибо!
Я обновил код, чтобы сделать его действительно простым в использовании в Google Apps Script. Удачи!
Очень мило. Гораздо более удобный для пользователя. Вот вопрос «обледенения на торте»: возможно ли разбить отображаемый текст гиперссылки на несколько строк, БЕЗ ПРОСТРАНСТВА В ЛИНИИ? Я могу разбить его на две строки, но между ними огромное пространство. Не уверен почему.
Потрясающая кнопка и отличный ответ ... как обычно :-) +1
Чтобы разбить на две строки, включите <br> между словами. Высота кнопки определяется height <td> , высота строк текста line-height для <a> . Если вы удалите оба, высота ячейки таблицы изменится так, чтобы она содержала все, что в ней содержится, а высота текстовой строки будет зависеть от шрифта. Большой интервал обусловлен высотой строки 40px.
Добавлена заметка и ссылка на CSS Inliner Tool.
@ user3063164 - вы должны посмотреть на этот ответ для утилиты, которая выполняет преобразование в встроенный HTML.
Это отличная утилита. Спасибо, что поделились.