Você pode usar HTML para criar e-mails personalizados no Intercom. Você tem três opções, e cada uma serve a um propósito diferente. Você pode:

Criar um modelo de e-mail reutilizável a partir de HTML recomendado
Enviar um e-mail HTML completo único.
Formatar seu e-mail usando blocos HTML.

Criar um modelo reutilizável a partir de HTML

O Intercom oferece uma seleção de três modelos para usar em seus e-mails. Mas se você quiser criar um modelo estilizado que combine com o design da sua marca, você pode criar um modelo de e-mail a partir de HTML. Seu novo modelo personalizado será salvo como um modelo no Intercom e você poderá usá-lo quantas vezes quiser.

Por que criar um modelo personalizado em vez de um e-mail HTML único?

Você deve criar um modelo personalizado (e não um e-mail HTML único) se quiser um estilo personalizado para sua marca, mas ainda assim aproveitar o poder e a facilidade de uso do compositor. Depois de salvar seu modelo personalizado no Intercom, você pode selecioná-lo como modelo e escrever seu e-mail sem precisar usar HTML.

Crie um modelo de e-mail a partir de HTML se você quiser:

Definir o estilo do seu e-mail, incluindo tipo de fonte, tamanho e cor de fundo.
Adicionar um cabeçalho, rodapé ou borda personalizados.
Usar rastreamento de links de URLs modelados.
Personalizar o estilo do botão Intercom. Para isso, adicione alguns estilos à classe HTML .intercom-h2b-button.

Pronto para começar? Veja como criar um modelo de e-mail a partir de HTML no Intercom.

Enviar um e-mail HTML completo único

Você também pode criar um layout de conteúdo personalizado e enviar um e-mail único projetado em HTML.

Nota: O rastreamento de links de URLs modelados não funcionará em e-mails HTML únicos. Recomendamos fortemente usar um modelo de e-mail personalizado ou criar um novo modelo a partir de HTML.

Como criar um e-mail HTML completo

Para escrever suas mensagens em HTML completo, crie uma nova mensagem de e-mail usando qualquer modelo e depois clique em </> Alternar para editor HTML no canto inferior esquerdo do compositor de e-mail.

O compositor HTML abrirá à direita e agora você pode criar seu e-mail.

Enquanto escreve, você pode ver como sua mensagem aparecerá na Visualização do Modelo.

Importante: Você não pode voltar para o editor visual ou mudar o tipo de mensagem para in-app depois de começar a escrever seu e-mail em HTML completo.

Formate seu e-mail usando blocos HTML

Quando precisar sair das opções regulares de formatação que o compositor oferece, você pode usar blocos HTML para adicionar elementos personalizados ao seu e-mail.

Você pode usar blocos HTML para:

Colocar uma tabela no seu e-mail.
Mostrar dados em tabelas HTML para facilitar a visualização.
Inserir imagens HiDPI retina no seu e-mail.
Criar citações em bloco.
Adicionar um botão personalizado (você precisa criar seu estilo de botão em um modelo personalizado primeiro, mas pode definir a classe usando um bloco HTML).
Adicionar uma coluna (útil para colocar imagens lado a lado).

Para adicionar um bloco HTML ao seu e-mail, basta passar o mouse sobre o compositor e selecionar o ícone + para inserir </> HTML.

4 dicas para lembrar ao usar blocos HTML em seus e-mails

Use HTTPS (não HTTP) para imagens para evitar avisos de conteúdo misto. Imagens HTTP não serão exibidas na pré-visualização do seu e-mail no Intercom.
Tenha cuidado para pré-visualizar sua mensagem, especialmente ao enviá-la por e-mail. Você sempre pode ajustar mensagens in-app, mas uma vez que um e-mail é enviado, não há volta.
Embora vídeos incorporados funcionem bem para mensagens in-app, não suportamos iframes e não exibiremos seus vídeos incorporados.
Lembre-se de que todos os estilos e atributos ID que você incluir no corpo da mensagem serão removidos.

Se quiser aplicar algum estilo especial ao HTML dentro dos seus blocos HTML, você pode criar um modelo de e-mail a partir de HTML com seus estilos específicos no <head> e depois referenciar as classes no bloco HTML. Esses estilos serão incorporados quando o e-mail for enviado.

Tags e atributos HTML que o Intercom suporta

Suportamos dois subconjuntos de HTML no Intercom. Abaixo, você pode ver as tags e atributos que suportamos para e-mails HTML completos e modelos personalizados. E você verá as tags e atributos que suportamos para blocos HTML.

Elementos suportados no modo HTML (para e-mails HTML completos e modelos personalizados):

Elementos estruturais: article, aside, blockquote, body, br, div, figcaption, figure, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, main, p, section, wbr
Elementos de cabeçalho: meta, title
Elementos de lista: dd, dl, dt, li, ol, ul
Elementos de formatação de texto: a, abbr, address, b, bdi, bdo, center, cite, code, del, dfn, em, i, ins, kbd, mark, pre, q, rp, rt, ruby, s, samp, small, span, strike, strong, sub, sup, time, u, var
Elementos de mídia: img
Elementos de tabela: caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr

Atributos suportados no modo HTML (para e-mails HTML completos e modelos personalizados):

Todos os atributos suportam: align, bgcolor, class, dir, height, id, lang, style, title, width
Suporte à tag a: href, name, target
Suporte à tag blockquote: cite
Suporte à tag col: span, valign
Suporte à tag colgroup: span, valign
Suporte à tag del: xmlns
Suporte à tag html: href, name, target
Suporte à tag img: alt, src
Suporte à tag ins: cite, datetime
Suporte à tag meta: content, http-equiv, name
Suporte à tag ol: reversed, start, type
Suporte à tag q: cite
Suporte à tag style: data-premailer, type
Suporte à tag table: border, cellpadding, cellspacing, summary
Suporte à tag tbody: valign
Suporte à tag td: abbr, axis, colspan, rowspan, valign
Suporte à tag tfoot: valign
Suporte à tag th: abbr, axis, colspan, rowspan, scope, valign
Suporte à tag thead: valign
Suporte à tag time: datetime, pubdate
Suporte à tag tr: valign
Suporte à tag ul: type

Aqui estão as diferentes tags HTML que suportamos para blocos HTML:

Cabeçalhos: h1, h2, h3, h4, h5, h6
Tags de formatação de texto como strong, em, sub, sup, small, code, pre, strike
Tags para criar tabelas: table, thead, tbody, tfoot, th, tr, td
Listas: ol, ul
Hiperlinks usando o elemento anchor
Imagens

Aqui estão os atributos HTML que suportamos para blocos HTML:

TODAS as tags permitem dir, lang, title, width, height, id, class, align
a permite href, target, name
blockquote permite cite
col permite span, width, valign
colgroup permite span, width, valign
del permite cite, datetime
img permite align, alt, height, src, width, title
ins permite cite, datetime
ol permite start, reversed, type
q permite cite
table permite summary, width, border, cellspacing, cellpadding
tbody permite valign
tfoot permite valign
thead permite valign
td permite abbr, axis, colspan, rowspan, width, valign
th permite abbr, azis, colspan, rowspan, scope, width, valign
thead permite tr
time permite datetime, pubdate
ul permite type

Melhores práticas para usar HTML no Intercom

Quer você esteja enviando um email HTML único ou criando um modelo de email personalizado reutilizável, as seguintes melhores práticas se aplicam:

Inclua seus estilos CSS inline

A maioria dos clientes de email exige que você inclua seus estilos CSS inline, o que pode tornar a experiência de desenvolvimento menos agradável. Isso porque, ao adicionar um estilo, você precisa adicioná-lo a cada tag <p> individualmente. E se quiser alterar o estilo, terá que mudar o estilo de cada tag <p> individualmente. No entanto, no Intercom você pode (e deve) escrever seu HTML e estilos usando tags de estilo e classes normalmente. Quando o email for enviado, o Intercom colocará todos os seus estilos CSS inline nos elementos apropriados.

Estilos responsivos não devem ser colocados inline

Uma ressalva é que você não deve colocar estilos responsivos inline (aqueles dentro de um bloco @media() {}). Se forem colocados inline, serão aplicados por padrão em vez de em uma largura de tela específica. Em vez disso, eles devem ser colocados dentro de uma tag de estilo com a incantação especial data-premailer="ignore". Isso significa que esses estilos responsivos não serão colocados inline. Qualquer navegador que entenda consultas de mídia aplicará esses estilos dependendo do tamanho da tela.

Adicione os atributos de dados corretos

Ao criar um modelo personalizado, exigimos que você tenha uma única tag {{content}}. Você pode colocá-la em qualquer lugar dentro da tag <body>. Atualmente, suportamos apenas uma tag {{content}} por email, o que significa que você não pode ter mais de uma região de conteúdo por email.
Ao criar um modelo personalizado ou escrever HTML completo no Intercom, você deve incluir {{unsubscribe_url}} ou {{unsubscribe_link}} para cumprir as leis anti-Spam. Você pode colocá-lo em qualquer lugar dentro da tag <body> Veja como.

Acertando o básico do HTML

E por fim, não poderíamos deixar de compartilhar algumas dicas fundamentais sobre como criar emails HTML melhores:

Crie seus layouts usando tabelas para garantir que seu email seja exibido corretamente em todos os clientes de email. Se quiser colocar um espaço de 20px abaixo de um parágrafo de texto, por exemplo, é melhor adicionar uma linha com o atributo height="20". Não use padding, margens e floats, pois eles nem sempre funcionam (principalmente em certas versões do Outlook).
Inclua todos os estilos inline no seu email para garantir que seus estilos sejam aplicados por cada cliente de email e para garantir que seu design apareça corretamente quando enviado, facilitando seu fluxo de trabalho. O Intercom ajuda você com isso.
Você pode usar fontes web hospedadas personalizadas de um serviço de fontes open source como Google Fonts. Tudo o que você precisa fazer é incorporar o código no seu modelo de email. No entanto, note que se seu cliente de email não suportar isso, o texto dos seus emails usará sua fonte web segura como fallback.
Para criar um design responsivo, sua largura deve ser de pelo menos 320px, mas não mais que 600px. E é melhor usar uma largura máxima de 600px como sua visualização padrão. Também é importante usar consultas de mídia para transformar seu modelo em uma única coluna em visualizações menores.
Para o tamanho dos arquivos de imagem, tente manter suas imagens o menor possível (máximo de 1MB). Baixar imagens grandes proporcionará uma experiência subótima para seus users, especialmente aqueles que visualizam seu email em dispositivos móveis, pois as imagens podem demorar a aparecer.
Use uma ferramenta de teste de email como Litmus para testar seus emails em todos os clientes e navegadores de email alvo. Não basta apenas olhar seu email em um navegador comum ou em um ou dois clientes de email. Todos produzem resultados diferentes. Ferramentas como o Litmus dão total visibilidade de como seu email aparecerá em todos os lugares.

Agora que você aprendeu a criar emails HTML melhores no Intercom, você vai querer garantir que eles sejam entregues e abertos.

Criando e-mails em HTML