Solução de problemas de CSS, JavaScript e HTML personalizados na Klaviyo
O que você vai aprender
Saiba como solucionar problemas de código personalizado ao importar um modelo HTML personalizado ou criar seu próprio modelo com código personalizado.
Recomendamos usar HTML personalizado apenas para profissionais de marketing com conhecimento técnico ou para quem tem acesso a um desenvolvedor. Embora nosso produto ofereça suporte a HTML personalizado, nossa equipe de suporte não pode ajudar você a criar seus modelos personalizados além de oferecer as orientações gerais abordadas nesta documentação.
Para manter a segurança dos seus dados, a equipe de suporte da Klaviyo não pode abrir seus arquivos HTML.
Elementos personalizados de HTML e CSS
Se você estiver criando um modelo HTML personalizado, não poderá usar feed de produtos no seu e-mail.
No momento, alguns elementos de HTML e CSS usados para tornar os e-mails interativos não são compatíveis. Por exemplo, se você estiver tentando deixar seu e-mail interativo no Gmail usando determinados seletores de atributo de CSS, seu modelo pode gerar um erro no Klaviyo.
No momento, a Klaviyo não oferece suporte a determinados operadores (como ~) em modelos de e-mail. Isso pode limitar até que ponto determinados HTML e CSS personalizados podem ser usados. Se o seu modelo contiver HTML ou CSS que não é totalmente compatível, você não poderá gerar uma prévia do seu e-mail e verá uma mensagem de erro.
Problemas comuns de HTML
Se você está percebendo que seu e-mail HTML personalizado não está aparecendo corretamente, aqui estão alguns pontos comuns para verificar possíveis problemas.
Aspas simples na fonte
Sempre que você adicionar um atributo font-family no CSS, procure aspas simples ou aspas desnecessárias. Remova todas as aspas ao adicionar no seu font.
Problema | Fixa |
font-family:'Helvetica Neue', Helvetica, Arial | font-family:Helvetica Neue, Helvetica, Arial |
Consultas de mídia
Se as consultas de mídia não estiverem no formato padrão, elas não serão renderizadas corretamente. Siga o formato padrão para todas as consultas de mídia.
Standard media query format |
@media only screen and (max-width: 460px) |
Tags de centralização desnecessárias
Se você tiver várias tag <center> no seu modelo de e-mail, ele pode não ser renderizado corretamente no Gmail. Para corrigir esse problema, remova todas as tag <center> desnecessárias. Apenas uma tag <center> é necessária no topo do modelo de e-mail, perto da tag <body>. Todas as tag <center> adicionais são supérfluas.
A Klaviyo não oferece suporte a e-mails com JavaScript
A maioria dos clientes de e-mail (Gmail, Hotmail, Yahoo etc.) vê JavaScript em e-mails como uma ameaça à segurança. Isso acontece porque scripts podem ocultar conteúdo malicioso. Como resultado, esses principais clientes de e-mail bloqueiam scripts em e-mails completamente. Considerando a ameaça de segurança inerente associada ao JavaScipt em e-mails e a falta de suporte para esses scripts pela maioria dos principais clientes de e-mail, quaisquer scripts adicionados serão removidos automaticamente.
O Klaviyo não oferece suporte a formulários ou vídeos incorporados
A Klaviyo não oferece suporte a formulários incorporados, widgets ou vídeos em modelos. Isso acontece porque nossos testes mostram que esses tipos de recursos não são renderizados de forma confiável em todos os principais clientes de e-mail. De forma semelhante a snippets de JavaScript, a maioria dos clientes de e-mail vê esses elementos como uma ameaça à segurança e os remove completamente dos e-mails.
Se você quiser conhecer soluções alternativas para isso, confira este artigo sobre como adicionar um vídeo ou GIF a um e-mail.
Outras tags e atributos sem suporte
As tags e os atributos HTML abordados aqui não são uma lista exaustiva do que a Klaviyo oferece suporte. Em geral, os elementos HTML que são compatíveis com os principais provedores de caixa de entrada também são compatíveis com a Klaviyo.
Se o seu modelo tiver HTML não compatível, a Klaviyo vai tentar substituir os elementos não compatíveis por uma alternativa compatível (ou seja, uma tag span). Se não houver uma substituição clara, essa parte do seu HTML será removida. Se partes do seu HTML parecerem desaparecer depois que você as adiciona, isso significa que elas provavelmente não são compatíveis; tente uma tag HTML ou um atributo alternativo para obter um efeito semelhante.
Recursos adicionais
- How to import a custom HTML template
Learn how to import a custom HTML template into Klaviyo.
- Troubleshooting email template error messages
If you encounter errors or warnings in an email template, you may need to resolve them before sending your message. Search this resource for the error message or warning you’re encountering to find tips for resolving the issue.