Solución de problemas de CSS, JavaScript y HTML personalizados en Klaviyo
Objetivos del artículo
Aprende a solucionar problemas de código personalizado al importar una plantilla HTML personalizada o al crear tu propia plantilla con código personalizado.
Solo recomendamos usar HTML personalizado a especialistas en marketing con conocimientos técnicos o a quienes tengan acceso a un desarrollador. Aunque nuestro producto sí es compatible con HTML personalizado, nuestro equipo de soporte no puede ayudarte a crear tus plantillas personalizadas más allá de ofrecer la orientación general incluida en esta documentación.
A fin de mantener la seguridad de los datos, el equipo de asistencia de Klaviyo no puede abrir tus archivos HTML.
Elementos de HTML y CSS personalizados
Si estás creando una plantilla HTML personalizada, no puedes usar fuente de productos dentro del correo electrónico.
Ciertos elementos de HTML y CSS que se usan para hacer que los correos electrónicos sean interactivos no son compatibles con todos los clientes de correo electrónico. Prueba la plantilla personalizada en las bandejas de entrada que usan tus destinatarios, incluso si se ve correcta en Klaviyo.
Si Klaviyo no puede procesar tu CSS, la generación de una vista previa puede fallar. Revisa la sintaxis del CSS y simplifica la regla que está causando el error, luego vuelve a generar la vista previa. Para errores relacionados con etiquetas de plantilla o variables, consulta Solución de problemas de los mensajes de error de la plantilla de correo electrónico.
Problemas comunes de HTML
Si ves que tu correo electrónico HTML personalizado no se ve bien, aquí tienes algunos lugares comunes donde revisar para detectar problemas.
Comillas en los estilos de font-family
Al agregar una propiedad font-family a un estilo en línea, asegúrate de que las comillas alrededor de un nombre de fuente no cierren el atributo style de HTML. Por ejemplo, usa comillas dobles alrededor del atributo style y comillas simples alrededor de Helvetica Neue. No necesitas eliminar las comillas emparejadas correctamente de los nombres de las fuentes.
Problema | Fijo |
<p style='font-family:'Helvetica Neue', Helvetica, Arial;'>Texto</p> | <p style="font-family:'Helvetica Neue', Helvetica, Arial;">Texto</p> |
Consultas de medios
Usa una sintaxis CSS válida para las media queries, incluidas las llaves alrededor de las reglas que quieres aplicar. Coloca el siguiente ejemplo en el <head> de la plantilla. Se aplica a los elementos con la clase mobile-text en pantallas de hasta 460px de ancho. Ajusta la clase, los estilos y el ancho para tu diseño; luego, prueba en los clientes de correo electrónico de los destinatarios.
Ejemplo de consulta de medios |
<style> |
Etiquetas center innecesarias
Si tienes varias etiquetas HTML <center> en toda la plantilla de correo electrónico, es posible que no se muestre correctamente en Gmail. Para solucionar este problema, elimina todas las etiquetas <center> innecesarias. Solo se necesita una etiqueta <center> en la parte superior de la plantilla de correo electrónico, cerca de la etiqueta <body>. Todas las etiquetas <center> adicionales son superfluas.
Klaviyo no admite correos electrónicos con JavaScript
La mayoría de los clientes de correo electrónico (Gmail, Hotmail, Yahoo, etc.) consideran que JavaScript en los correos electrónicos es una amenaza de seguridad. Esto se debe a que los scripts pueden ocultar contenido malicioso. Como resultado, estos principales clientes de correo electrónico bloquean por completo los scripts en los correos electrónicos. Dada la amenaza de seguridad inherente asociada con JavaScript en los correos electrónicos y la falta de compatibilidad con este tipo de scripts en la mayoría de los principales clientes de correo electrónico, cualquier script que se agregue se eliminará automáticamente.
Klaviyo no admite formularios ni videos incrustados
Klaviyo no admite formularios incrustados, widgets ni videos en las plantillas. Esto se debe a que nuestras pruebas muestran que este tipo de funciones no se representan de forma confiable en todos los principales clientes de correo electrónico. Al igual que los fragmentos de JavaScript, la mayoría de los clientes de correo electrónico consideran estos elementos como una amenaza de seguridad y los eliminan por completo de los correos electrónicos.
Si te interesa conocer soluciones alternativas para esto, consulta este artículo sobre cómo agregar un video o un GIF a un correo electrónico.
Otras etiquetas y atributos no admitidos
Las etiquetas y los atributos HTML que se explican aquí no son una lista exhaustiva de lo que admite Klaviyo. Verifica si los elementos que usas son compatibles con los principales proveedores de bandeja de entrada. Klaviyo también revisa las etiquetas y los atributos cuando importas o guardas la plantilla.
Cuando importas o guardas HTML personalizado, Klaviyo elimina elementos no permitidos como <script> y <iframe>, convierte las etiquetas no reconocidas en <span> y elimina los atributos no compatibles. Cuando guardes los cambios en el editor de HTML, revisa cualquier advertencia de la etiqueta o el atributo afectados. Si parte de tu HTML desaparece o cambia, usa una alternativa compatible.
Revisa los cambios
- Haz clic en Guardar en el editor de HTML. Revisa cualquier error o advertencia, corrige el código afectado y vuelve a guardar.
- Haz clic en Vista previa. Si la plantilla usa datos de perfil o de evento, elige el perfil o el evento con el que quieras hacer la vista previa.
- Selecciona Enviar como correo electrónico, ingresa tu dirección de correo electrónico en Enviar a: y haz clic en Vista previa ahora.
- Abre el correo electrónico de vista previa en computadoras y dispositivos móviles. Revisa el diseño, las fuentes, los enlaces y cualquier contenido interactivo. Si haces más cambios, guarda y envía otra vista previa antes de enviar a tu audiencia.
Recursos adicionales
- 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.