Este manual contém receitas de HTML para personalizar a aparência dos e-mails enviados da sua conta. Personalizar a aparência do seu e-mail pode ajudar a melhorar a consistência da marca e o engajamento do cliente. Por exemplo, você pode adicionar o logotipo da sua empresa ou um banner de chamada para ação ao layout do e-mail para corresponder à identidade da marca da sua empresa ou para que fique mais parecido com a aparência da sua central de ajuda.
A aparência das notificações por e-mail enviadas da sua conta do Zendesk é, em grande parte, determinada por dois modelos na Central de administração: um em HTML e o outro em texto sem formatação. O modelo de texto sem formatação não é compatível com o tipo de personalização descrito no manual. Para obter detalhes, consulte Personalização dos modelos de e-mail para notificações.
Este manual inclui os seguintes tópicos:
- Padrões de design comuns para e-mail de notificação
- Diretrizes de HTML e práticas recomendadas para e-mail
- Receita: adição do logotipo da sua empresa
- Receita: adição de um banner da empresa
- Receita: adição de um banner de chamada para ação
- Receita: adição de um rodapé
- Receita: adição de links de redes sociais ao rodapé
- Receita: personalização do corpo do e-mail
- Teste das alterações feitas
As receitas usam HTML e CSS para personalizar notificações por e-mail. Para ver uma introdução e referência de CSS, consulte CSS: Cascading Style Sheets na Mozilla Developer Network.
Padrões de design comuns para e-mail de notificação
Entender padrões comuns de design pode ajudar você a criar disposições de e-mail coesas e eficazes que estejam alinhadas com sua marca.
A maioria dos e-mails de notificação consiste em apenas alguns componentes:
- Logotipo: uma imagem de logotipo.
- Banner da empresa: uma alternativa ao uso de um logotipo sozinho.
- Conteúdo: o corpo do e-mail.
- Banner de chamada para ação: uma chamada para ação para fazer parte da sua comunidade, usar sua central de ajuda, experimentar um novo produto e assim por diante.
- Rodapé: pode conter várias informações, incluindo informações de contato, links de redes sociais e assim por diante.
Todos os componentes são opcionais no modelo de e-mail, exceto o conteúdo.
As receitas neste manual descrevem como criar e inserir elementos de design no modelo de e-mail. Você pode misturar e combinar elementos para criar seu próprio design de e-mail. A seguir estão alguns padrões de design comuns:
Logotipo da empresa | Logotipo da empresa com rodapé |
![]() |
![]() |
Banner da empresa com rodapé | Banner da empresa com banner de CTA e rodapé |
![]() |
![]() |
Para se inspirar, veja alguns designs de e-mail no blog da Lotus Themes.
Diretrizes de HTML e práticas recomendadas para e-mail
Criar a aparência dos e-mails pode ser desafiador porque HTML e CSS podem ser renderizados de formas distintas em diferentes aplicativos de e-mail. Alguns tipos de formatação podem até mesmo ser interpretados como spam.
Siga estas diretrizes gerais ao criar e-mails:
- Mantenha a simplicidade: mantenha seu design simples e evite o uso de layouts complexos.
- Use tabelas para o layout: alguns aplicativos de e-mail podem não renderizar layouts baseados em CSS de modo confiável. Criar layouts com tabelas em HTML é mais confiável.
-
Use estilos de CSS embutidos: use estilos embutidos, que são estilos definidos no atributo
style
de um elemento HTML, como:<p style="width=400px;">
. Folhas de estilo importadas ou estilos definidos em uma tag<style>
podem não ser compatíveis com todos os aplicativos de e-mail. - Use fontes seguras para a web: use fontes seguras para a web, como Arial, Verdana ou Georgia. Fontes personalizadas podem não ser compatíveis ou não ser renderizadas corretamente em todos os aplicativos de e-mail.
- Use o mínimo de formatação de texto: minimizar a formatação do texto ajuda a manter o layout limpo e organizado. Além disso, muito texto em negrito pode disparar filtros de spam.
Siga estas diretrizes para imagens:
- Use imagens com parcimônia: menos imagens ajudam a manter o layout limpo e organizado. Além disso, muitas imagens podem disparar filtros de spam.
- Defina o tamanho das imagens com CSS: use estilos embutidos para dimensionar as imagens no layout. Imagens sem tamanhos definidos muitas vezes distorcem o layout dos e-mails. Para maior tranquilidade, redimensione fisicamente as imagens usando a reamostragem.
- Use tags ALT em todas as imagens: as tags ALT mostram uma descrição das imagens antes que os usuários permitam que as imagens sejam exibidas.
- Não coloque links para imagens em uma conta do Zendesk fechada: as imagens serão corrompidas se o destinatário pretendido não estiver registrado e conectado à conta.
Receita: adição do logotipo da sua empresa
Esta receita mostra como adicionar o logotipo da sua empresa ao modelo de e-mail. Exemplo:
Ingredientes
- URL da imagem do logotipo da sua empresa
Receita
- Cole o seguinte bloco de código em um editor de texto ou HTML:
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 0px; padding-bottom: 0px;"> <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto;"> </td> </tr> </tbody> </table>
- Faça qualquer uma das seguintes alterações para personalizar o logotipo:
Alterar Imagem do logotipo
Elemento: img > src
Substitua o valor do placeholder do atributo
src
pela URL da imagem do seu logotipo.Exemplo:
img src="https://www.example.com/images/logo_acme.png"
Tamanho do logotipo
Elemento: img > style > width
Altere o valor de
width
para redimensionar o logotipo.Exemplo:
img style="width: 120px; height: auto; ..."
Espaço ao redor do logotipo
Se houver muito espaço ao redor do logotipo, talvez seja necessário recortar o espaço em branco ao redor da imagem com uma ferramenta de edição de imagem.
Se houver pouco espaço ao redor da imagem, você pode aumentar o preenchimento da célula da tabela.
Elemento: td > style
Adicione
padding
ao atributostyle
e ajuste o valor.Exemplo:
td style="padding: 10px; ..."
Alinhamento horizontal do logotipo
Elemento: td > align
Escolha center, left ou right.
Exemplo:
td align="left"
Espaçamento vertical do logotipo
Elemento: td > style > padding-top
Altere o valor de
padding-top
para adicionar espaço acima do logotipo.Elemento: td > style > padding-top
Altere o valor de
padding-bottom
para adicionar espaço abaixo do logotipo.Exemplo:
td style="padding-top: 15px; padding-bottom: 5px; ..."
- Ajuste outros valores conforme necessário.
- Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
- Visualize o logotipo em um modelo de e-mail de teste antes de adicioná-lo ao modelo de e-mail em sua conta.
- Quando estiver tudo pronto para publicação, insira o bloco de código do logotipo no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).
Receita: adição de um banner da empresa
Esta receita mostra como adicionar um banner da empresa ao modelo de e-mail. Um banner de empresa normalmente consiste no logotipo e no nome da empresa posicionados em uma cor de plano de fundo. Exemplo:
Ingredientes
- URL da imagem do logotipo da sua empresa
- valores de cores para a identidade da sua marca
Receita
- Cole o seguinte bloco de código em um editor de texto ou HTML:
<table style="background-color: #c0c7d8;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px;"> <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto; margin-right: 10px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333; margin-top: 50px;">Company name</p> </td> </tr> </tbody> </table>
- Faça qualquer uma das seguintes alterações para personalizar o banner da empresa:
Alterar Imagem do logotipo
Elemento: img > src
Substitua o valor do placeholder do atributo
src
pela URL da imagem do seu logotipo.Exemplo:
img src="https://www.example.com/images/logo_acme.png"
Tamanho do logotipo
Elemento: img > style > width
Altere o valor de
width
para redimensionar o logotipo.Exemplo:
img style="width: 120px; height: auto; ..."
Espaço ao redor do logotipo
Se houver muito espaço ao redor do logotipo, talvez seja necessário recortar o espaço em branco ao redor da imagem com uma ferramenta de edição de imagem.
Se não houver espaço suficiente ao redor da imagem, você pode aumentar o preenchimento da célula da tabela.
Elemento: td > style
Adicione
padding
ao atributostyle
e ajuste o valor.Exemplo:
td style="padding: 10px; ..."
Formato do nome da empresa
Elemento: p > style
Altere qualquer um dos estilos de texto ou adicione o seu próprio estilo.
Exemplo:
p style="font-size: 30px; color: #553e3e; ..."
Espaço entre o logotipo e o nome da empresa
Elemento: img > style > margin-right
Aumente ou diminua o valor de
margin-right
para aumentar ou diminuir o espaço entre o logotipo e o nome.Exemplo:
img style="margin-right: 15px; ..."
Alinhamento vertical do nome da empresa em relação ao logotipo
Elemento: p > style > margin-top
Aumente ou diminua o valor de
margin-top
para mover o nome da empresa para cima ou para baixo em relação ao logotipo.Exemplo:
p style="margin-top: 40px; ..."
Cor do plano de fundo do banner
Elemento: table > style > background-color
Substitua o valor hexadecimal #d3d3d3 do estilo
background-color
pelo seu próprio valor. Consulte as diretrizes da sua marca ou um seletor de cores online, como html-color.codes.Exemplo:
table style="background-color: #d8e3fb; ..."
- Ajuste outros valores conforme necessário.
- Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
- Visualize o banner em um modelo de e-mail de teste antes de adicioná-lo ao modelo de e-mail em sua conta.
- Quando estiver tudo pronto para publicação, cole o bloco de código do banner no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).
Receita: adição de um banner de chamada para ação
Esta receita mostra como adicionar um banner de chamada para ação (CTA) ao modelo de e-mail. Um banner de chamada para ação costuma ficar localizado após o corpo do e-mail. Normalmente, ele convida o usuário a fazer algo, como participar de sua comunidade, usar sua central de ajuda, experimentar um novo produto e assim por diante. Ele consiste em uma imagem, texto e um link posicionados em uma cor de plano de fundo. Exemplo:
Ingredientes
- texto da sua chamada para ação
- URL de uma imagem de chamada para ação
- URL de um link para ajudar os usuários a executarem a chamada para ação
- valores de cores para a identidade da sua marca
Receita
- Cole o seguinte bloco de código em um editor de texto ou HTML:
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px; padding-left: 50px; margin-top: 12px; margin-bottom: 8px;"> <div id="cta-text" style="width: 300px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #333; margin-top: 6px;">Take a hand, lend a hand</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 14px;">Join our worldwide community to ask expert users for advice or share your own.</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px;"><a href="#">Ask the community</a></p> </div> <div id="cta-image" style="padding-left: 20px;"> <img src="cta_image.png" alt="cta_image" style="width: 140px; height: auto; border-radius: 50% 50% 0 0;"> </div> </td> </tr> </tbody> </table>
- Adicione sua chamada para ação nas três tags de parágrafo. Adicione ou remova os parágrafos conforme necessário.
- Faça qualquer uma das seguintes alterações para personalizar o banner de chamada para ação:
Alterar Imagem de chamada para ação
Elemento: img > src
Substitua o valor do placeholder do atributo
src
pela URL da sua imagem de chamada para ação.Exemplo:
img src="https://www.example.com/images/cta_image.png"
Tamanho da imagem
Elemento: img > style > width
Altere o valor
width
para redimensionar sua imagem.Exemplo:
img style="width: 120px; height: auto; ..."
Formato das mensagens de chamada para ação
Elemento: p > style
Altere qualquer um dos estilos de texto ou adicione o seu próprio estilo.
Exemplo:
p style="font-size: 30px; color: #553e3e; ..."
Espaço entre as mensagens e a imagem
Elemento: div id="cta-image" > style > padding-left
Aumente ou diminua o valor de
padding-left
para aumentar ou diminuir o espaço entre as mensagens e a imagem.Exemplo:
div id="cta-image" style="padding-left: 30px; ..."
Cor do plano de fundo do banner
Elemento: table > style > background-color
Substitua o valor hexadecimal #d8e3fb do estilo
background-color
pelo seu próprio valor. Consulte as diretrizes da sua marca ou um seletor de cores online, como html-color.codes.Exemplo:
table style="background-color: #d3d3d3; ..."
- Ajuste outros valores conforme necessário.
- Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
- Visualize o banner em um modelo de e-mail de teste antes de adicioná-lo ao modelo de e-mail em sua conta.
- Quando estiver tudo pronto para publicação, cole o bloco de código do banner no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).
Receita: adição de um rodapé
Esta receita mostra como adicionar um rodapé ao modelo de e-mail. Um rodapé pode conter várias informações, incluindo informações de contato, links de redes sociais e assim por diante. Para links de redes sociais, veja a próxima receita, Receita: adição de links de redes sociais ao rodapé.
O modelo de e-mail padrão já fornece os seguintes placeholders para um rodapé:
-
{{footer}}
: exibe a linha "Este e-mail é um serviço da Acme.", em que "Acme" corresponde ao nome da sua empresa. -
{{footer_link}}
: exibe no e-mail a linha "Fornecido por Zendesk.", com um link em "Zendesk" para zendesk.com.
Você pode substituir ou complementar esses placeholders com seu próprio rodapé.
Nesta receita, você criará um rodapé que fornece informações de contato. Ele substituirá os placeholders {{footer}}
e {{footer_link}}
. Exemplo:

Ingredientes
- informações de contato da sua empresa
- valores de cores para a identidade da sua marca
Receita
- Cole o seguinte bloco de código em um editor de texto ou HTML:
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p> </td> </tr> </tbody> </table>
- Altere as informações de contato nas três tags de parágrafo.
- Faça qualquer uma das seguintes alterações para personalizar o rodapé:
Alterar Cor do plano de fundo do rodapé
Elemento: table > style > background-color
Substitua o valor hexadecimal #d8e3fb do estilo
background-color
pelo seu próprio valor. Consulte as diretrizes da sua marca ou um seletor de cores online, como html-color.codes.Exemplo:
table style="background-color: #d3d3d3; ..."
Cor do texto
Elemento: p > style > color
Altere o valor de
color
.Exemplo:
p style="color: #553e3e; ..."
Formatação do texto
Elemento: p > style
Altere qualquer um dos estilos de texto ou adicione o seu próprio estilo.
Exemplo:
p style="font-family: Georgia, sans-serif; ..."
Espaçamento das bordas superior e inferior
Elemento: td > style > padding-top
Aumente ou diminua o valor de
padding-top
para alterar o espaço entre a borda superior e o texto.Exemplo:
td style="padding-top: 8px; ..."
Elemento: td > style > padding-bottom
Aumente ou diminua o valor de
padding-bottom
para alterar o espaço entre o texto e a borda inferior.Exemplo:
td style="padding-bottom: 8px; ..."
- Ajuste outros valores conforme necessário.
- Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
- Visualize o rodapé em um modelo de e-mail de teste antes de adicioná-lo ao modelo de e-mail em sua conta.
- Quando estiver tudo pronto para publicação, cole o bloco de código no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).
Receita: adição de links de redes sociais ao rodapé
Esta receita mostra como adicionar links de redes social a um rodapé personalizado.
{{footer}}
exiba botões para seus canais de redes sociais. Consulte Inclusão de botões de redes sociais em seus e-mails. Exemplo:
Ingredientes
- URLs de imagens de redes sociais para usar como botões
- links para suas contas de redes sociais
Receita
- Cole o seguinte bloco de código em um editor de texto ou HTML:
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p> </td> </tr> </tbody> </table>
Esta é a receita para criar um rodapé com informações de contato (Receita: adição de um rodapé).
- Adicione os ícones de redes sociais ao HTML antes da primeira tag de parágrafo. Exemplo:
<div style="padding-top: 12px; padding-bottom: 0px;"> <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_facebook.png"/></a> <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_x.png"/></a> <a href="#"><img style="width: 30px;" src="https://www.example.com/images/icon_instagram.png"/></a> </div>
- Para cada link de rede social, altere a URL do link (
href="..."
) e a imagem do ícone (src="..."
). - Faça qualquer uma das seguintes alterações para personalizar os ícones:
Alterar
Tamanho dos ícones
Elemento: img > style > width
Certifique-se de que todos os ícones tenham o mesmo valor de largura.
Exemplo:
img style="width: 24px; ..."
Espaçamento entre os ícones
Elemento: img > style > padding-right
Altere o valor do estilo
padding-right
de cada link de rede social, exceto o último.Exemplo:
img style="padding-right: 8px; ..."
Espaço acima e abaixo dos ícones
Elemento: div > style > padding-top
Aumente ou diminua o valor de
padding-top
para ajustar o espaço acima dos ícones.Exemplo:
div style="padding-top: 8px; ..."
Elemento: div > style > padding-bottom
Aumente ou diminua o valor de
padding-bottom
para ajustar o espaço abaixo dos ícones.Exemplo:
div style="padding-bottom: 10px; ..."
- Ajuste outros valores conforme necessário.
- Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
- Visualize o rodapé em um modelo de e-mail de teste antes de adicioná-lo ao modelo de e-mail em sua conta.
- Quando estiver tudo pronto para publicação, cole o bloco de código no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).
Receita: personalização do corpo do e-mail
Esta receita mostra como personalizar o corpo do e-mail. Você alterará a fonte e o tamanho do texto, bem como o espaço ao redor do corpo do e-mail.
O e-mail consiste na mensagem de notificação e na conversa por e-mail. No modelo de e-mail, o corpo do e-mail é representado pelo placeholder {{content}}
. O Zendesk substitui o placeholder pelo HTML antes de enviar o e-mail. Exemplo:
Parte do HTML inserido pelo Zendesk contém estilos que não podem ser modificados nem substituídos. Para obter detalhes, consulte Limitações para personalizar o corpo do e-mail.
Receita
- Cole o placeholder
{{content}}
e a tag div principal em um editor de HTML ou de texto. Exemplo:<div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;"> {{content}} </div>
- Faça qualquer uma das seguintes alterações nos estilos da tag div principal para personalizar o corpo do e-mail.
Alterar Tamanho do texto da mensagem
Elemento: div > style > font-size
Altere o valor de
font-size
.Essa alteração não mudará o tamanho do texto do nome de usuário nem da hora em que o e-mail foi enviado.
Exemplo:
div style="font-size: 11px; ..."
Fonte do texto
Elemento: div > style > font-family
Você pode alterar a fonte dentro de determinados limites. Use fontes seguras para a web, como Trebuchet MS, Verdana ou Georgia. Outras fontes podem não ser compatíveis com todos os aplicativos de e-mail.
Exemplo:
div style="font-family: 'Trebuchet MS', sans-serif; ..."
Espaço ao redor do corpo do e-mail
Elemento: div > style > padding
Aumente ou diminua o valor de
padding
para alterar o espaço ao redor do corpo do e-mail.Exemplo:
div style="padding: 15px; ..."
Se você quiser alterar o espaço nos lados esquerdo e direito (por exemplo, para 25 px), especifique dois valores para o estilo
padding
. O primeiro valor é o preenchimento para a parte superior e inferior e o segundo valor é o preenchimento para a esquerda e a direita.Exemplo:
div style="padding: 15px 25px; ..."
- Adicione outros estilos embutidos ou ajuste outros valores conforme necessário.
Algumas propriedades do corpo do e-mail não podem ser alteradas. Consulte Limitações para personalizar o corpo do e-mail.
- Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
- Visualize as alterações em um modelo de e-mail de teste antes de adicioná-las ao modelo de e-mail em sua conta.
- Quando estiver tudo pronto para publicação, cole o bloco de código no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).
Limitações para personalizar o corpo do e-mail
O Zendesk substitui o placeholder {{content}}
pelo próprio HTML quando envia o e-mail. No entanto, o HTML gerado pelo sistema contém estilos embutidos para determinados elementos do corpo do e-mail. Porém, não é possível acessar esses estilos para modificá-los. Também não é possível substituí-los usando estilos embutidos no modelo de e-mail. Em CSS, os estilos embutidos de elementos secundários prevalecem em relação aos estilos embutidos de elementos principais, como divs.
Esta seção descreve algumas das limitações para personalizar o corpo do e-mail. Certifique-se de levar essas configurações em consideração ao tomar decisões de design sobre o restante do corpo do e-mail.
Corpo do texto
Não é possível alterar os seguintes estilos para o corpo do texto:
- cor da fonte
- altura da linha
- margens ao redor do texto
As configurações para esses estilos são as seguintes:
color: #2b2e2f; line-height: 22px; margin: 15px 0
Nome e data de envio do texto
Não é possível alterar os seguintes estilos para o nome e a data de envio do texto:
- cor da fonte
- família de fontes
- tamanho da fonte
- altura da linha
- margens ao redor do texto
As configurações para o texto do nome são as seguintes:
color: #1b1d1e"; font-family: Verdana, Tahoma, sans-serif; font-size: 15px;
line-height: 18px; margin-bottom: 0; margin-top: 0;padding: 0; color: #1b1d1e"
As configurações para a data de envio do texto são as seguintes:
font-family: Verdana, Tahoma, sans-serif; font-size: 13px; line-height: 25px;
margin-bottom: 15px; margin-top: 0; padding: 0; color: #bbbbbb"
Teste das alterações feitas
Você pode testar suas alterações com o modelo de e-mail de teste anexado a esta receita.
As alterações feitas no modelo de e-mail da Central de administração são ativadas imediatamente. Portanto, você deve testar cuidadosamente suas alterações no modelo de teste para ter certeza de que funcionam conforme o esperado antes de adicioná-las ao modelo de e-mail em sua conta.
Como testar as alterações feitas
- Baixe o modelo de e-mail de teste, test_email_template.html anexado a seguir, e abra-o em um editor de HTML ou de texto.
- Cole o bloco de código do seu componente no local indicado no modelo de e-mail de teste. Exemplo:
<!-- Paste logo or company banner code block here -->
- Abra o modelo de teste em um navegador e deixe a janela do navegador mais estreita para simular um aplicativo de e-mail.
- Faça ajustes no código no modelo de teste e atualize a página do navegador para ver o efeito das alterações.
- Continue fazendo alterações iterativas até que o design fique conforme desejado.
- Quando estiver tudo pronto para publicação, cole o bloco de código do seu componente no mesmo local no modelo de e-mail da Central de administração (Central de administração > Canais > Email).
0 comentários