O Intercom vem com três modelos de email padrão. Mas você também pode personalizar o seu usando o designer visual de modelos, ou criar um novo modelo a partir do HTML, que abordaremos abaixo.

Para acessá-lo, vá para Configurações > Saída > Modelos de Email e clique em Novo modelo > Criar a partir do HTML.

Agora você pode editar o HTML para que elementos como tamanho, tipo e cor da fonte combinem com sua marca. Você também pode adicionar seu logo ou cabeçalho no topo. Também é possível criar um novo modelo totalmente do zero usando qualquer HTML ou design que desejar.

Nota:

Os workspaces são limitados a 100 modelos de email personalizados.
O tamanho máximo do modelo é restrito a 200.000 caracteres.

Quando estiver satisfeito com seu modelo, dê um nome a ele e salve. Ele estará disponível na sua lista de modelos ao compor um email.

Importante: Modelos personalizados não devem ser usados como editor HTML completo (inserindo HTML, CSS + conteúdo), mas devem focar mais em cabeçalhos, rodapés e estilização do conteúdo. Se você colocar todo o seu conteúdo no modelo personalizado e enviar sem editar a mensagem no editor padrão, ocorrerá um erro ao tentar publicar a mensagem.

Dicas ao usar modelos HTML

1. Você precisa incluir estas tags no modelo:

A tag {{content}}
A tag {{unsubscribe_link}} ou {{unsubscribe_url}}

Nota: A URL de cancelamento de inscrição deve ser colocada antes da tag </body> para ser detectada pelas nossas verificações de validação e para que a mensagem seja salva corretamente.

A {{content}} tag

A tag {{content}} será substituída pelo corpo do seu email. Este é o conteúdo que mudará a cada nova mensagem enviada. Você deve incluir esta tag mesmo que não pretenda atualizar o conteúdo da mensagem.

A {{unsubscribe_link}} tag
Você deve dar aos users a oportunidade de cancelar o recebimento das suas mensagens. A tag {{unsubscribe_link}} incluirá um link HTML completo com texto que o user pode clicar para cancelar a inscrição. Você pode incluir o link no email:

{{unsubscribe_link}}

A {{unsubscribe_url}} tag

Se quiser fornecer sua própria redação para o link de cancelamento, a tag {{unsubscribe_url}} incluirá apenas a URL de cancelamento. Você pode fazer o seguinte:

<a href="{{unsubscribe_url}}">SUA REDAÇÃO PERSONALIZADA DE CANCELAMENTO</a>

Importante:

A URL de cancelamento deve ser colocada antes da tag </body> para ser detectada pelas nossas verificações de validação e para que a mensagem seja salva corretamente.
Para o link de cancelamento, não há como personalizar a URL em si (você só pode personalizar o texto do link).

2. Ao adicionar variáveis de user, empresa ou autor ao seu modelo.

Variáveis de user:

{{ first_name | fallback:"ENTER FALLBACK HERE" }}

Variáveis personalizadas de user:

{{ custom_data.name_of_attribute | fallback:"ENTER FALLBACK HERE" }}

Empresa

{{ company.name | fallback:"ENTER FALLBACK HERE" }}

ID da empresa

 {{ company.remote_company_id | fallback:"ENTER FALLBACK HERE" }}

Variáveis personalizadas da empresa:

{{ company.custom_data.name_of_attribute | fallback:"ENTER FALLBACK HERE" }}

Variáveis de autor e workspace

Para incluir o primeiro nome do colega que envia, nome completo ou o nome do seu workspace em um modelo, você pode usar qualquer uma das seguintes variáveis:

{{ message.author.first_name }}
{{ message.author.name }}
{{ app.name }}

Isso usará o nome do colega no campo 'De' de qualquer mensagem enviada com este modelo.

3. Ao colar código de outro provedor...

...como MailChimp ou Campaign Monitor, esteja ciente de que suas tags personalizadas podem não funcionar, e você precisará modificar o código para que funcione corretamente.

4. Tornando seus modelos responsivos

Para garantir que seus emails sejam responsivos e exibidos corretamente no celular, use esta tag “Style” que incluímos no modelo padrão.

<style type="text/css" data-premailer="ignore">...</style>

5. Usando imagens no seu modelo

Se você estiver usando imagens no seu modelo, precisará usar um app como Imgur ou Zight para hospedá-las. Depois, basta colar a URL no código do seu modelo e a imagem será exibida.

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 email no Intercom.

6. Usando CSS no seu modelo

Você pode usar todo o CSS que quiser, nós automaticamente aplicaremos todos os estilos inline, a menos que você coloque o atributo data-premailer="ignore" no atributo style no cabeçalho do seu modelo personalizado. O ignore pode ser útil quando você tem um layout responsivo e aplicar CSS inline quebraria esse layout.

Nota: Ao estilizar a área principal do conteúdo do seu modelo, não aplique a regra overflow: hidden; pois isso afetará a experiência de edição do compositor de mensagens. Aplicar essa regra fará com que os componentes da interface do compositor, como o formatador de texto e o inseridor de atributos, fiquem ocultos, assim:

7. Escrevendo sua mensagem

Para usar seu modelo, selecione-o no menu suspenso na janela do compositor de mensagens na próxima vez que quiser enviar um email. Você pode então estilizar o conteúdo com HTML básico, e ele será exibido no lugar da tag {{ content }} que você incluiu no seu modelo.

8. Estilizando botões

Se estiver criando um modelo de email personalizado, esteja ciente de que os botões inseridos pelo Composer terão estilos mínimos aplicados. Você pode personalizar os botões direcionando a classe HTML .intercom-h2b-button e a seguinte marcação:

<a href="http://test.com" class="intercom-h2b-button">Texto do Botão</a>

9. Teste seus modelos personalizados em diferentes clientes de email

Cada provedor de email tende a renderizar os emails de forma um pouco diferente. Nossos modelos padrão são projetados para funcionar da melhor forma possível com o maior número de clientes de email.

Se estiver usando um modelo personalizado, recomendamos verificar a renderização do seu email em vários clientes diferentes. Isso pode ser feito usando a opção 'Enviar um email de teste' de cada mensagem para testar envios em diferentes clientes de email.

Outra opção é usar uma ferramenta de terceiros para obter uma visão abrangente de como seu email será renderizado em uma ampla variedade de clientes — Litmus, 250ok e Email on Acid são apenas alguns exemplos dessas ferramentas.

Emails únicos em HTML completo

Se quiser enviar uma mensagem única escrita em HTML, em vez de criar um modelo reutilizável, basta clicar em </> Alternar para editor HTML ao compor uma nova mensagem.

Perguntas frequentes

`dir="rtl"` é removido do modelo, isso é intencional?

Sim, esse é o comportamento esperado. Há uma solução alternativa para adicionar rtl em um modelo personalizado, que é usar a alternativa CSS: style="direction: rtl;". Isso não é removido dos nossos modelos.

Quero começar a linha de assunto do email com um `#`, mas ele é removido - como posso fazer isso?

Se você adicionar uma barra invertida \ antes do #, ele aparecerá corretamente. Por exemplo, se você enviar a linha de assunto como #HashtagsAreGreat, ela será removida para HashtagsAreGreat. No entanto, se enviar \#HashtagsAreGreat, ela será removida para #HashtagsAreGreat.

Por que uma imagem não está sendo exibida na pré-visualização do email em HTML?

Se você estiver usando imagens no email em HTML, deve usar URLs https para ver a pré-visualização da mensagem. Não suportamos imagens brutas com URL http, portanto a imagem aparecerá quebrada na pré-visualização (mas será exibida corretamente quando enviada ao customer). Para resolver isso, hospede sua imagem em uma URL https.

Quero carregar dinamicamente o nome do autor da mensagem e o nome do app diretamente de um modelo personalizado, isso é possível?

Você pode sim. Aqui está um modelo HTML personalizado que você pode usar.

<table>
 <tbody>
 <tr> 
 <td width="40" class="space"> </td>
 
 <td valign="middle" width="50" style="color: #272727;" align="left">
 <img src="example-image.com" height="40" width="40" class="avatar" alt="intercomavatar">
 </td>

 <td class="admin_name" style="color: #999999">
 <p> {{ message.author.first_name }} from {{ app.name }} </p> 
 </td>
 </tr>
 </tbody>
</table>

Nota: Você deve substituir o src="example-image.com" da tag img por um link real para a imagem que deseja usar.