Intercom viene con tres plantillas de correo electrónico predeterminadas. Pero también puedes personalizar la tuya usando el diseñador visual de plantillas, o crear una nueva plantilla desde HTML que cubriremos a continuación.

Para acceder, ve a Configuración > Saliente > Plantillas de correo electrónico y haz clic en Nueva plantilla > Crear desde HTML.

Ahora puedes editar el HTML para que elementos como el tamaño, tipo y color de la fuente coincidan con tu marca. También puedes añadir tu logo o encabezado en la parte superior. También puedes crear una plantilla completamente nueva desde cero usando el HTML o diseño que prefieras.

Nota:

Los espacios de trabajo están limitados a 100 plantillas de correo electrónico personalizadas.
El tamaño máximo de la plantilla está restringido a 200,000 caracteres.

Una vez que estés satisfecho con tu plantilla, asígnale un nombre y guárdala. Luego estará disponible en tu lista de plantillas cuando estés redactando un correo electrónico.

Importante: Las plantillas personalizadas no deben usarse como un editor HTML completo (insertando HTML, CSS + contenido), sino que deben centrarse más en encabezados, pies de página y estilizado del contenido. Si pones todo tu contenido en la plantilla personalizada y la envías sin hacer ninguna edición en el editor estándar, recibirás un error al intentar publicar el mensaje.

Consejos al usar plantillas HTML

1. Debes incluir estas etiquetas en la plantilla:

La etiqueta {{content}}
La etiqueta {{unsubscribe_link}} o {{unsubscribe_url}}

Nota: La URL de cancelación de suscripción debe colocarse antes de la etiqueta </body> para que sea detectada por nuestras comprobaciones de validación y para que el mensaje se guarde correctamente.

La {{content}} etiqueta

La etiqueta {{content}} será reemplazada por el cuerpo de tu correo electrónico. Este es el contenido que cambiará cada vez que envíes un nuevo mensaje. Debes incluir esta etiqueta incluso si no planeas actualizar el contenido del cuerpo de tu mensaje.

La {{unsubscribe_link}} etiqueta
Debes dar a tus users la oportunidad de darse de baja de tus mensajes. La etiqueta {{unsubscribe_link}} incluirá un enlace HTML completo con texto que el usuario puede clicar para darse de baja. Puedes incluir el enlace en el correo electrónico:

{{unsubscribe_link}}

La {{unsubscribe_url}} etiqueta

Si deseas proporcionar tu propio texto para el enlace de cancelación, la etiqueta {{unsubscribe_url}} incluirá solo la URL de cancelación. Puedes hacerlo así:

<a href="{{unsubscribe_url}}">TU TEXTO PERSONALIZADO DE CANCELACIÓN</a>

Importante:

La URL de cancelación debe colocarse antes de la etiqueta </body> para que sea detectada por nuestras comprobaciones de validación y para que el mensaje se guarde correctamente.
Para el enlace de cancelación no hay forma de personalizar la URL en sí (solo puedes personalizar el texto del enlace).

2. Al agregar variables de user, empresa o autor a tu plantilla.

Variables de user:

{{ first_name | fallback:"ENTER FALLBACK HERE" }}

Variables personalizadas de user:

{{ custom_data.name_of_attribute | fallback:"ENTER FALLBACK HERE" }}

Empresa

{{ company.name | fallback:"ENTER FALLBACK HERE" }}

ID de empresa

 {{ company.remote_company_id | fallback:"ENTER FALLBACK HERE" }}

Variables personalizadas de empresa:

{{ company.custom_data.name_of_attribute | fallback:"ENTER FALLBACK HERE" }}

Variables de autor y espacio de trabajo

Para incluir el nombre del compañero que envía, nombre completo o el nombre de tu espacio de trabajo en una plantilla, puedes usar cualquiera de las siguientes variables:

{{ message.author.first_name }}
{{ message.author.name }}
{{ app.name }}

Esto usará el nombre del compañero en el campo 'De' de cualquier mensaje enviado con esta plantilla.

3. Al pegar código de otro proveedor...

...como MailChimp o Campaign Monitor, ten en cuenta que tus etiquetas personalizadas pueden no funcionar, y necesitarás modificar el código para que funcione correctamente.

4. Haciendo que tus plantillas sean responsivas

Para asegurar que tus correos sean responsivos y se muestren bien en móviles, usa esta etiqueta “Style” que hemos incluido en la plantilla predeterminada.

<style type="text/css" data-premailer="ignore">...</style>

5. Usando imágenes en tu plantilla

Si usas imágenes en tu plantilla, necesitarás usar una app como Imgur o Zight para alojarlas. Luego solo pega la URL en el código de tu plantilla y la imagen se mostrará.

Usa HTTPS (no HTTP) para las imágenes para evitar cualquier advertencia de contenido mixto. Las imágenes HTTP no se mostrarán en la vista previa del correo en Intercom.

6. Usando CSS en tu plantilla

Puedes usar todo el CSS que quieras, automáticamente pondremos todos los estilos en línea a menos que pongas el atributo data-premailer="ignore" en el atributo style en el encabezado de tu plantilla personalizada. Ignorar puede ser útil cuando tienes un diseño responsivo y poner el CSS en línea rompería ese diseño.

Nota: Al estilizar el área principal de contenido de tu plantilla no apliques la regla overflow: hidden; ya que esto afectará la experiencia de edición del compositor de mensajes. Aplicar esta regla hará que los componentes de la interfaz del compositor, por ejemplo el formateador de texto, el inserto de atributos, etc., se oculten, así:

7. Escribiendo tu mensaje

Para usar tu plantilla, selecciónala en el menú desplegable de la ventana del compositor de mensajes la próxima vez que quieras enviar un correo. Luego puedes estilizar el contenido con HTML básico, y se mostrará en lugar de la etiqueta {{ content }} que incluiste en tu plantilla.

8. Estilizando botones

Si creas una plantilla de correo personalizada, ten en cuenta que los botones insertados por el Compositor tendrán estilos mínimos aplicados. Puedes personalizar los botones apuntando a la clase HTML .intercom-h2b-button y el siguiente marcado:

<a href="http://test.com" class="intercom-h2b-button">Texto del botón</a>

9. Prueba tus plantillas personalizadas en diferentes clientes de correo

Cada proveedor de correo tiende a mostrar los correos de forma un poco diferente. Nuestras plantillas predeterminadas están diseñadas para funcionar lo mejor posible con la mayor cantidad de clientes de correo.

Si usas una plantilla personalizada, recomendamos revisar la visualización de tu correo en varios clientes diferentes. Esto se puede hacer usando la opción 'Enviar un correo de prueba' de cada mensaje para probar envíos a diferentes clientes de correo.

Otra opción es usar una herramienta de terceros para obtener una vista completa de cómo se mostrará tu correo en una amplia variedad de clientes: Litmus, 250ok y Email on Acid son solo algunos ejemplos de herramientas que hacen esto.

Correos únicos en HTML completo

Si quieres enviar un mensaje único escrito en HTML, en lugar de crear una plantilla reutilizable, solo haz clic en </> Cambiar a editor HTML al redactar un nuevo mensaje.

Preguntas frecuentes

`dir="rtl"` se elimina de la plantilla, ¿es esto intencional?

Sí, este es un comportamiento esperado. Hay una solución para agregar rtl en una plantilla personalizada, que es usar la alternativa CSS: style="direction: rtl;". Esto no se elimina de nuestras plantillas.

Quiero comenzar la línea de asunto del correo con un `#`, pero se elimina, ¿cómo puedo hacerlo?

Si agregas una barra invertida \ antes del #, entonces se mostrará correctamente. Por ejemplo, si envías la línea de asunto como #HashtagsAreGreat, esto se eliminará a HastagsAreGreat. Sin embargo, si envías \#HashtagsAreGreat, esto se eliminará a #HashtagsAreGreat.

¿Por qué no se muestra una imagen en la vista previa del correo HTML?

Si usas imágenes en tu correo HTML, debes usar URLs https para ver la vista previa del mensaje. No soportamos imágenes sin procesar con URL http, por lo que la imagen aparecerá rota en la vista previa (pero se mostrará correctamente cuando se envíe al cliente). Para resolver esto, debes alojar la imagen en una URL https.

¿Quiero cargar dinámicamente el nombre del autor del mensaje y el nombre de la app directamente desde una plantilla personalizada, es posible?

Sí, puedes. Aquí tienes una plantilla HTML personalizada que puedes usar.

<table>
 <tbody>
 <tr> 
 <td width="40" class="space"> </td>
 
 <td valign="middle" width="50" style="color: #272727;" align="left">
 <img src="example-image.com" height="40" width="40" class="avatar" alt="intercomavatar">
 </td>

 <td class="admin_name" style="color: #999999">
 <p> {{ message.author.first_name }} from {{ app.name }} </p> 
 </td>
 </tr>
 </tbody>
</table>

Nota: Debes reemplazar el src="example-image.com" de la etiqueta img con un enlace real a una imagen que quieras usar.