Personalização dos modelos das notificações por e-mail

Caminho rápido: Central de administração > Canais > Talk e e-mail > E-mail

Importante: por padrão, a opção de editar modelos de e-mail não está ativada para contas em período de avaliação e podem não estar ativadas para algumas contas. Para ativar a edição, entre em contato com o suporte ao cliente Zendesk com seu subdomínio, um link para o website da sua empresa e uma breve descrição das alterações que deseja fazer.

Todas as notificações por e-mail enviadas de seu Zendesk, incluindo as notificações de ticket e de artigos da Central de Ajuda, são controladas por modelos de e-mail. Os modelos para e-mails possuem formatação em HTML e texto sem formatação. Ambos os formatos estão inclusos em cada e-mail. A versão que os usuários finais veem depende das preferências configuradas nos clientes de e-mail deles.

Você pode personalizar o modelo em HTML para que ele corresponda à sua marca fazendo alterações simples de estilo. Você também pode editar as informações nas versões em texto de seus e-mails.

Dica: leia esta publicação no Zendesk Blog para saber como ganhar tempo usando modelos de e-mail para o atendimento ao cliente.

Este artigo abrange as seguintes seções:

• Edição dos modelos de e-mail
• Edição do modelo em HTML
• Edição do modelo em texto
• Noções básicas sobre os placeholders do sistema

Artigos relacionados:

• Adição ou remoção de links de ticket em e-mails
• Adição e remoção do delimitador nas notificações por e-mail

Edição dos modelos de e-mail

Você pode personalizar a aparência das notificações por e-mail enviadas aos clientes. As notificações têm um modelo HTML e um modelo de texto sem formatação.

Se você está no plano Enterprise, pode modificar e testar as alterações de e-mail em uma sandbox antes de implantá-las publicamente (consulte Teste de alterações em sua sandbox).

Como editar seus modelos de e-mail

1. Na Central de administração, clique em Canais na barra lateral e selecione Talk e e-mail > E-mail.
2. Na seção Modelos de e-mail, clique em Exibir fotos de perfil do usuário em e-mails para mostrar os perfis dos usuários nos e-mails.

   Nem todos os clientes de e-mail exibem as imagens por padrão.

3. Modifique o modelo HTML conforme necessário.
4. Modifique o modelo de texto conforme necessário.
5. Se você desejar recomeçar com uma versão padrão, clique em Reverter para o padrão abaixo do modelo.
6. Clique em Salvar ao final de página.

   Os modelos de e-mail são atualizados.

Além de personalizar seus modelos de e-mail, você pode alterar os e-mails da seguinte maneira:

• Exibir as fotos de perfil do usuário
• Adicionar ou remover links do ticket
• Adição e remoção do delimitador nas notificações por e-mail
• Usar a marcação Liquid
  Observação: há suporte para a marcação Liquid em macros, gatilhos e automações para as notificações do ticket, mas não há suporte para as notificações de artigo da central de ajuda, como as notificações por e-mail enviadas para seguidores. Em vez de usar a marcação Liquid para alterar a aparência das notificações por e-mail, você pode seguir as etapas para uso do modelo de e-mail com várias marcas.

Edição do modelo em HTML

Você pode alterar a aparência de e-mails em HTML editando o HTML e CSS no modelo em HTML.

Observação: por padrão, a edição do modelo HTML não está ativada. Para ativar a edição do modelo HTML, entre em contato com o suporte ao cliente Zendesk com o seu subdomínio.

Esta seção abrange os tópicos a seguir:

• Alteração da aparência de e-mails em HTML
• Diretrizes para a personalização de e-mails em HTML

Alteração da aparência de e-mails em HTML

O modelo em HTML consiste em marcas DIV e placeholders do sistema.

Os placeholders fornecem a maioria do conteúdo para e-mail:

• {{content}} é obrigatório e não deve ser apagado.
• {{delimiter}} é obrigatório somente se você usa delimitador de e-mail nas notificações
• {{styles}} e {{attributes}} servirão para uso futuro e, às vezes, são usados pelo sistema para inserir estilos e atributos para oferecer suporte a localidades cuja escrita é da direita para a esquerda.
• {{footer}} é opcional

Nenhum outro placeholder pode ser usado no modelo. Para obter mais informações, consulte Noções básicas sobre os placeholders do sistema.

As marcas DIV aplicam estilos de CSS ao conteúdo. Ao adicionar ou modificar estilos de CSS, você pode alterar a aparência do e-mail por completo, o delimitador ou o rodapé.

Se for mudar a cor do texto, use contraste suficiente para acessibilidade. Siga as orientações para a acessibilidade de conteúdo da web (WCAG) e utilize ferramentas como o verificador de contraste de cor da WebAim para conferir a proporção de contraste entre o texto e o plano de fundo.

Dica: se você configurou várias marcas, confira a dica enviada por Andrew Soderberg sobre como estruturar seu modelo de e-mail para usar layouts em HTML personalizados para diversas marcas (em inglês).

Como editar os estilos no modelo

1. Na Central de administração, clique em Canais na barra lateral e selecione Talk e e-mail > E-mail.
2. Na seção Modelos de e-mail, modifique o modelo HTML conforme a necessidade.

   

   Se você desejar usar algum placeholder de modelo padrão, comece a digitar o nome do placeholder e escolha dentre as opções disponíveis que aparecerão.

   

3. Clique em Salvar.

Por exemplo, eis como alterar a cor da fonte do rodapé para azul-petróleo:

...
 <div style=" color: #009966;
              margin: 10px 0 14px 0;
              padding-top: 10px;
              border-top: 1px solid #eeeeee;" >
    {{footer}}{{footer_link}}
  </div>
...

A cor da fonte é definida para o valor hexadecimal de azul-petróleo com seguinte declaração style a seguir:

color: #009966;

Observação: a cor dos links não pode ser personalizada. Os links são estilizados com pseudoclasses CSS como :hover. Exemplo: a:hover {color:#FF00FF;}. Infelizmente, as pseudoclasses CSS não são suportadas em CSS embutido e grandes clientes de e-mail como o Gmail retiram qualquer CSS que não esteja embutido.

Para adicionar uma imagem como o logotipo da empresa ao modelo, insira uma marca IMG que faça uma referência a essa imagem. Exemplo:

<img src="http://YOURWEBSITE.com/logo.png"/>

Observação: antes de adicionar logotipos e outras imagens, lembre-se que grande parte dos clientes de e-mail não exibe imagens por padrão.

Se você desejar adicionar um hyperlink ao logotipo, inclua a marca IMG em uma marca de ancoragem, como neste exemplo:

<a href="http://YOURACCOUNT.zendesk.com"><img src="http://YOURWEBSITE.com/logo.png"></a>

Para obter mais informações, consulte os recursos a seguir:

• Portal de CSS na Mozilla Developer Network
• Manual de CSS da Central de Ajuda

Diretrizes para a personalização de e-mails em HTML

Você pode personalizar bastante o modelo HTML, mas lembre-se de que a Zendesk não oferece suporte para códigos personalizados. Se a sua conta foi criada a partir de 15 de junho de 2022, o modelo será compatível com HTML5. Para saber mais sobre as tags HTML5 compatíveis, consulte HTML5 Elements Reference em www.w3docs.com.

A criação de e-mails em HTML é desafiadora, devido ao modo como o HTML e CSS são renderizados em diferentes tipos de navegadores e clientes de e-mail. Alguns tipos de formatação podem até mesmo ser interpretados como spam.

Em geral, mantenha a personalização a mais simples possível e siga estas diretrizes:

• Não use declarações style de CSS3. Use CSS1 ou 2.
• Não adicione mais seções DIV.
• Mantenha a formatação do texto mínima. Muito texto em negrito pode disparar filtros de spam.
• Não adicione muitas imagens (outro gatilho para os filtros de spam) e diminua as imagens usadas.
• Use uma marca ALT em todas as imagens. Essa marca exibe uma descrição da imagem antes que os usuários permitam que as imagens sejam exibidas.
• Se você souber a altura e largura da imagem, defina-as. Isso força o cliente de e-mail a reservar o espaço da imagem no layout do e-mail antes de baixar as imagens.
• Nem todos os clientes de e-mail oferecem suporte a imagens de fundo, por isso não confie nelas para transmitir informações ou design funcional.
• Não coloque links para imagens em uma conta do Zendesk fechada. Se o recipiente esperado não for um usuário registrado e conectado, as imagens ficarão corrompidas.

Edição do modelo em texto

O modelo de e-mail em texto é usado quando o usuário desativa a leitura de mensagens de e-mail em formato HTML. O modelo consiste em dois placeholders do sistema:

{{content}}

{{footer}}

O placeholder {{content}} insere o delimitador de texto, o título do ticket, o texto gerado a partir de regras de negócios (gatilhos, automações ou macros) e os comentários do ticket. O placeholder {{footer}} é opcional. Você pode removê-lo, se desejar. Para obter mais informações, consulte Noções básicas sobre os placeholders do sistema.

Observação: o placeholder {{delimiter}} não é obrigatório em um modelo de texto. O placeholder {{content}} contém o texto do delimitador.

Se desejar adicionar uma linha aos seus e-mails, adicione-a ao modelo.

Thanks for contacting MondoCam Support!

{{content}}

{{footer}}

Como editar o modelo em texto

1. Na Central de administração, clique em Canais na barra lateral e selecione Talk e e-mail > E-mail.
2. Role o cursor para baixo até a seção Modelos de e-mail.
3. Modifique o modelo de texto conforme necessário.
4. Clique em Salvar ao final de página.

Noções básicas sobre os placeholders do sistema

A maioria do conteúdo nos e-mails de notificação é gerada dinamicamente pelo sistema do Zendesk. O conteúdo gerado dinamicamente é representado por placeholders nos modelos de e-mail. Os placeholders são incluídos em chaves duplas, como {{footer}}.

Os placeholders inserem texto do delimitador, os conteúdos do e-mail e um rodapé.

{{delimiter}}

Exibe a linha "##- Não escreva abaixo desta linha -##". O delimitador é usado pelo sistema para separar o conteúdo antigo do novo. Quando uma pessoa responde a um e-mail, o novo conteúdo na resposta é adicionado ao ticket como um comentário. Esse placeholder é obrigatório no modelo HTML se você usa o delimitador do e-mail. Consulte Personalização do texto do delimitador de e-mail.

{{content}}

Exibe o conteúdo do e-mail, que pode incluir comentários do ticket e fotos de perfis de usuário. O conteúdo é definido no gatilho, na automação ou qualquer outra coisa que envie e-mails de sua conta. Consulte Criação e gerenciamento de gatilhos para notificações e atualizações de tickets.

{{quoted_content}}

opcional. Exibe o histórico de mensagens. O conteúdo citado geralmente é recolhido no aplicativo de e-mail do usuário, que pode expandi-lo. No Gmail, por exemplo, o usuário clica nas reticências (…). Consulte Noções básicas sobre a conversa simplificada de e-mail.

{{footer}}

opcional. Exibe a linha "Este e-mail é um serviço de SeuNomeZendesk." Ele também exibe as propriedades do ticket, como status e solicitante, nos e-mails enviados para agentes. As propriedades não são exibidas em e-mails enviados para os usuários finais.

{{footer_link}}

opcional. Exibe a linha "Fornecido por Zendesk". A palavra Zendesk é um link para https://www.zendesk.com.

{{styles}}

opcional. Para uso futuro. Atualmente, o sistema usa esse placeholder para inserir estilos quando ele detecta que a localidade tem escrita da direita para a esquerda.

{{attributes}}

opcional. Para uso futuro. Atualmente, o sistema usa esse placeholder para inserir atributos quando detecta que a localidade tem escrita da direita para a esquerda.