Puedes usar HTML para crear correos personalizados en Intercom. Tienes tres opciones, y cada una sirve para un propósito diferente. Puedes:

Crear una plantilla de correo reutilizable desde HTML recomendado
Enviar un correo HTML completo único.
Formatear tu correo usando bloques HTML.

Crear una plantilla reutilizable desde HTML

Intercom te ofrece una selección de tres plantillas para usar en tus correos. Pero si quieres crear una plantilla estilizada que coincida con el diseño de tu marca, puedes crear una plantilla de correo desde HTML. Tu nueva plantilla personalizada se guardará como plantilla en Intercom y podrás usarla tantas veces como quieras.

¿Por qué crear una plantilla personalizada en lugar de un correo HTML único?

Deberías crear una plantilla personalizada (y no un correo HTML único) si quieres un estilo personalizado para tu marca pero aún quieres aprovechar la potencia y facilidad de uso del compositor. Una vez que guardes tu plantilla personalizada en Intercom, puedes seleccionarla como plantilla y escribir tu correo sin necesidad de usar HTML.

Crea una plantilla de correo desde HTML si quieres:

Establecer el estilo de tu correo, incluyendo tipo de fuente, tamaño y color de fondo.
Agregar un encabezado, pie de página o borde personalizado.
Usar seguimiento de enlaces de URLs con plantilla.
Personalizar el estilo del botón de Intercom. Para ello, añade algunos estilos a la clase HTML .intercom-h2b-button.

¿Listo para empezar? Aquí te mostramos cómo crear una plantilla de correo desde HTML en Intercom.

Enviar un correo HTML completo único

También puedes crear un diseño de contenido personalizado y enviar un correo único diseñado en HTML.

Nota: El seguimiento de enlaces de URLs con plantilla no funcionará en correos HTML únicos. Recomendamos encarecidamente usar una plantilla de correo personalizada o crear una nueva plantilla desde HTML en su lugar.

Cómo crear un correo HTML completo

Para escribir tus mensajes en HTML completo, crea un nuevo mensaje de correo usando cualquier plantilla y luego haz clic en </> Cambiar al editor HTML en la parte inferior izquierda del compositor de correos.

El compositor HTML se abrirá a la derecha y ahora puedes crear tu correo.

Mientras escribes, puedes ver cómo aparecerá tu mensaje en la Vista previa de la plantilla.

Importante: No puedes volver al editor visual ni cambiar el tipo de mensaje a en-app una vez que hayas comenzado a escribir tu correo en HTML completo.

Formatea tu correo usando bloques HTML

Cuando necesites salir de las opciones de formato regulares que ofrece el compositor, puedes usar bloques HTML para añadir elementos personalizados a tu correo.

Puedes usar bloques HTML para:

Colocar una tabla en tu correo.
Mostrar datos en tablas HTML para facilitar la visualización.
Insertar imágenes HiDPI retina en tu correo.
Crear citas en bloque.
Agregar un botón personalizado (necesitas crear tu estilo de botón en una plantilla personalizada primero, pero puedes establecer la clase usando un bloque HTML).
Agregar una columna (esto es útil para colocar imágenes una al lado de la otra).

Para añadir un bloque HTML a tu correo, solo pasa el cursor sobre el compositor y selecciona el icono + para insertar </> HTML.

4 consejos para recordar al usar bloques HTML en tus correos

Usa HTTPS (no HTTP) para imágenes para evitar cualquier advertencia de contenido mixto. Las imágenes HTTP no se mostrarán en la vista previa de tu correo en Intercom.
Ten cuidado al previsualizar tu mensaje, especialmente al enviarlo por correo. Siempre puedes ajustar los mensajes en-app, pero una vez que un correo se envía, no hay vuelta atrás.
Aunque los videos incrustados funcionan bien para mensajes en-app, no soportamos iframes y no mostraremos tus videos incrustados.
Recuerda que todos los estilos y atributos ID que incluyas en el cuerpo del mensaje serán eliminados.

Si quieres aplicar un estilo especial al HTML dentro de tus bloques HTML, entonces podrías crear una plantilla de correo desde HTML con tus estilos específicos en el <head> y luego referenciar las clases en el bloque HTML. Estos estilos se aplicarán en línea cuando se envíe el correo.

Etiquetas y atributos HTML que Intercom soporta

Soportamos dos subconjuntos de HTML en Intercom. A continuación, puedes ver las etiquetas y atributos que soportamos para correos HTML completos y plantillas personalizadas. Y verás las etiquetas y atributos que soportamos para bloques HTML.

Elementos soportados en modo HTML (para correos HTML completos y plantillas personalizadas):

Elementos estructurales: article, aside, blockquote, body, br, div, figcaption, figure, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, main, p, section, wbr
Elementos de encabezado: meta, title
Elementos de lista: dd, dl, dt, li, ol, ul
Elementos de formato de texto: a, abbr, address, b, bdi, bdo, center, cite, code, del, dfn, em, i, ins, kbd, mark, pre, q, rp, rt, ruby, s, samp, small, span, strike, strong, sub, sup, time, u, var
Elementos multimedia: img
Elementos de tabla: caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr

Atributos soportados en modo HTML (para correos HTML completos y plantillas personalizadas):

Todos los atributos soportan: align, bgcolor, class, dir, height, id, lang, style, title, width
Soporte para etiqueta a: href, name, target
Soporte para etiqueta blockquote: cite
Soporte para etiqueta col: span, valign
Soporte para etiqueta colgroup: span, valign
Soporte para etiqueta del: xmlns
Soporte para etiqueta html: href, name, target
Soporte para etiqueta img: alt, src
Soporte para etiqueta ins: cite, datetime
Soporte para etiqueta meta: content, http-equiv, name
Soporte para etiqueta ol: reversed, start, type
Soporte para etiqueta q: cite
Soporte para etiqueta style: data-premailer, type
Soporte para etiqueta table: border, cellpadding, cellspacing, summary
Soporte para etiqueta tbody: valign
Soporte para etiqueta td: abbr, axis, colspan, rowspan, valign
Soporte para etiqueta tfoot: valign
Soporte para etiqueta th: abbr, axis, colspan, rowspan, scope, valign
Soporte para etiqueta thead: valign
Soporte para etiqueta time: datetime, pubdate
Soporte para etiqueta tr: valign
Soporte para etiqueta ul: type

Aquí están las diferentes etiquetas HTML que soportamos para bloques HTML:

Encabezados: h1, h2, h3, h4, h5, h6
Etiquetas de formato de texto como strong, em, sub, sup, small, code, pre, strike
Etiquetas para crear tablas: table, thead, tbody, tfoot, th, tr, td
Listas: ol, ul
Hipervínculos usando el elemento ancla
Imágenes

Aquí están los atributos HTML que soportamos para bloques HTML:

TODAS las etiquetas permiten dir, lang, title, width, height, id, class, align
a permite href, target, name
blockquote permite cite
col permite span, width, valign
colgroup permite span, width, valign
del permite cite, datetime
img permite align, alt, height, src, width, title
ins permite cite, datetime
ol permite start, reversed, type
q permite cite
table permite summary, width, border, cellspacing, cellpadding
tbody permite valign
tfoot permite valign
thead permite valign
td permite abbr, axis, colspan, rowspan, width, valign
th permite abbr, azis, colspan, rowspan, scope, width, valign
thead permite tr
time permite datetime, pubdate
ul permite type

Mejores prácticas para usar HTML en Intercom

Ya sea que estés enviando un correo electrónico HTML único o creando una plantilla de correo electrónico personalizada reutilizable, se aplican las siguientes mejores prácticas:

Incluye tus estilos CSS en línea

La mayoría de los clientes de correo electrónico requieren que incluyas tus estilos CSS en línea y puede ser una experiencia de desarrollo no tan agradable. Esto se debe a que cuando quieres agregar un estilo, debes añadirlo a cada etiqueta <p> individualmente. Y si quieres cambiar el estilo que has agregado, tendrías que cambiar el estilo para cada etiqueta <p> individualmente. Sin embargo, en Intercom puedes (y debes) escribir tu HTML y estilos usando etiquetas de estilo y clases como normalmente lo harías. Luego, cuando se envía el correo, Intercom incluirá en línea todos tus estilos CSS en los elementos apropiados.

Los estilos responsivos no deben incluirse en línea

Una advertencia es que no debes incluir en línea los estilos responsivos (aquellos dentro de un bloque @media() {}). Si se incluyen en línea, se aplicarán por defecto en lugar de a un ancho de pantalla específico. En cambio, deben colocarse dentro de una etiqueta de estilo con la incantación especial data-premailer="ignore". Esto significa que estos estilos responsivos no se incluirán en línea. Cualquier navegador que entienda las consultas de medios aplicará estos estilos según el tamaño de la pantalla.

Agrega los atributos de datos correctos

Al crear una plantilla personalizada, requerimos que tengas una única etiqueta {{content}}. Puedes colocarla en cualquier parte dentro de la etiqueta <body>. Actualmente solo soportamos tener una etiqueta {{content}} por correo, lo que significa que no puedes tener más de una región de contenido por correo.
Al crear una plantilla personalizada o escribir en HTML completo en Intercom, debes incluir ya sea un {{unsubscribe_url}} o {{unsubscribe_link}} para cumplir con las leyes anti-Spam. Puedes colocarlo en cualquier parte dentro de la etiqueta <body> Aquí te mostramos cómo.

Domina lo básico del HTML

Y por último, no podíamos dejar de compartir algunos consejos fundamentales sobre cómo crear mejores correos HTML:

Crea tus diseños usando tablas para asegurar que tu correo se muestre correctamente en todos los clientes de correo. Si quieres colocar un espacio de 20px debajo de un párrafo de texto, por ejemplo, es mejor agregar una fila con un atributo de height="20". No uses padding, márgenes ni floats ya que no siempre funcionan (especialmente con ciertas versiones de Outlook).
Incluye todos los estilos en línea en tu correo para asegurar que tus estilos se apliquen en cada cliente de correo y para asegurarte de que tu diseño aparezca correctamente cuando se envíe, facilitando tu flujo de trabajo. Intercom te ayuda con eso.
Puedes usar fuentes web personalizadas alojadas desde un servicio de fuentes de código abierto como Google Fonts. Todo lo que tienes que hacer es incrustar el código en tu plantilla de correo. Sin embargo, ten en cuenta que si tu cliente de correo no soporta esto, el texto en tus correos usará tu fuente web segura.
Para crear un diseño responsivo, tu ancho debe ser al menos 320px pero no más de 600px. Y es mejor usar un ancho máximo de 600px como vista predeterminada. También es importante usar consultas de medios para transformar tu plantilla en una sola columna en vistas más pequeñas.
Para el tamaño de los archivos de imagen, intenta mantener tus imágenes lo más pequeñas posible (máximo 1MB). Descargar imágenes grandes proporcionará una experiencia subóptima a tus users, especialmente a aquellos que ven tu correo en dispositivos móviles, ya que las imágenes pueden tardar mucho en aparecer.
Usa una herramienta de prueba de correo como Litmus para probar tus correos en todos tus clientes y navegadores objetivo. No es suficiente con solo ver tu correo en un navegador regular o en uno o dos clientes de correo. Todos producen resultados diferentes. Herramientas como Litmus te dan visibilidad completa de cómo se verá tu correo en todas partes.

Ahora que has aprendido a crear mejores correos HTML en Intercom, querrás asegurarte de que se entreguen y abran.

Creación de correos electrónicos HTML