Plantillas de correo

Si querés que tus correos tengan un diseño propio, más allá del logo y los colores, podés subir tu propio HTML para los correos que reciben tus clientes. Se hace en Configuración → Integraciones, en la tarjeta Plantillas de correo. La pueden usar el propietario y los administradores de la agencia.

Antes de armar HTML propio, probá Apariencia de los correos: con el logo, los colores, la tipografía y el pie muchas veces alcanza, y el diseño estándar ya está probado en los programas de correo más usados. Si no activás ninguna plantilla, todos tus correos usan ese diseño.

Qué correos se pueden personalizar

Los dos primeros dependen del módulo CRM y los dos últimos, del módulo Newsletter.

Los correos a tu equipo, los de seguridad (ingreso, recuperación de acceso, invitaciones) y los avisos de Agenciar no se personalizan: usan siempre el diseño de la plataforma.

Arriba de la tarjeta ves cada correo con su estado: Por defecto o Plantilla propia con el número de versión activa. Tocá uno, o elegilo en Correo, para trabajar sobre él.

Cómo armar el HTML

Los programas de correo (Gmail, Outlook, Apple Mail) interpretan el HTML de forma mucho más limitada que un navegador. Estas pautas hacen que tu correo se vea igual en todos:

• Ancho de 600 px, centrado, dentro de una tabla de una columna.
• Maquetá con tablas (<table role="presentation">) y estilos en línea (style="...").
• Usá tipografías seguras, como Arial, Helvetica o Georgia. Las tipografías web no cargan en Gmail ni en Outlook.
• Poné en cada imagen un texto alternativo (alt), un ancho explícito y una dirección https:// completa. Probá cómo se ve el correo con las imágenes bloqueadas.
• Armá los botones como un enlace dentro de una celda con background-color; no uses <button>.
• Evitá flex, grid, position, variables CSS y animaciones: Outlook no los muestra.
• Con un bloque <style> podés usar clases y @media para adaptar el correo al celular, pero lo importante tiene que verse bien también sin él, porque Gmail a veces lo recorta.

Enlaces e imágenes: siempre con dirección completa

Las direcciones de los enlaces y de las imágenes tienen que ser absolutas: empezar con https:// (en enlaces también se admiten mailto: y tel:). Un correo no tiene una dirección base, así que no se pueden usar direcciones relativas como /viajes, img/logo.png o //cdn.example.com/logo.png, ni anclas a una parte del mismo correo como #arriba: la plantilla no se puede guardar. Los enlaces http:// (sin la «s») se quitan.

Shortcodes

Los shortcodes son marcadores que se reemplazan por los datos de cada envío. Se escriben entre dos pares de llaves, por ejemplo {{cliente.nombre}}. En la tarjeta, la sección Shortcodes de este correo lista los del correo elegido; con Copiar los copiás al portapapeles.

Hay tres tipos:

• Texto: un dato, como el nombre del cliente. Se puede usar en el cuerpo, en el asunto y en los atributos alt y title.
• Enlace: una dirección. Va solo como valor completo del href de un enlace o del src de una imagen, sin nada alrededor: href="{{newsletter.preferencias}}".
• Bloque: contenido que arma la plataforma, como el texto de una campaña. Va como texto en el cuerpo, dentro de un contenedor (por ejemplo, un <div>).

No se pueden usar shortcodes dentro de <style>, en el atributo style ni en otros atributos (class, id, width…).

Estos están en los cuatro correos:

• {{agencia.nombre}}: nombre de la agencia (texto).
• {{agencia.direccion}}: dirección de la agencia (texto).
• {{agencia.logo}}: dirección del logo (enlace). Puede faltar si tu agencia no tiene un logo que los correos puedan mostrar.

Y estos son los propios de cada correo:

• Presupuesto al cliente: {{cliente.nombre}}, {{presupuesto.titulo}}, {{presupuesto.version}}, {{presupuesto.validez}} y {{presupuesto.introduccion}}.
• Recordatorio de pago: {{cliente.nombre}}, {{viaje.titulo}}, {{cuota.monto}}, {{cuota.vencimiento}}, {{cuota.saldo}} y {{recordatorio.mensaje}} (bloque, obligatorio).
• Confirmación de suscripción: {{suscripcion.confirmar}}, {{suscripcion.preferencias}} y {{suscripcion.baja}} (enlaces).
• Envoltorio de campañas del newsletter: {{campania.asunto}}, {{campania.contenido}} (bloque, obligatorio), {{newsletter.baja}} y {{newsletter.preferencias}} (enlaces).

Reglas:

• Los bloques obligatorios tienen que estar en tu HTML: {{recordatorio.mensaje}} en el recordatorio y {{campania.contenido}} en las campañas. Tienen que aparecer en un texto visible del cuerpo, no dentro de <style> ni de <head>.
• Los enlaces para confirmar y cancelar la suscripción, el de baja del newsletter y los de preferencias aparecen en la lista con la etiqueta Lo agrega la plataforma al pie. Salen siempre en el pie del correo, aunque no los pongas: incluirlos en tu HTML es opcional, y no se cuentan como obligatorios (ver el bloque de abajo).
• Un shortcode que no existe para ese correo no se puede guardar.

El asunto

Cada plantilla tiene su Asunto, de hasta 200 caracteres. Admite solo shortcodes de texto. El <title> de tu HTML no se usa: el título del correo es el asunto.

• En las campañas, el asunto de la plantilla reemplaza al de todas las campañas. Si escribís un asunto fijo, como «Novedades de la agencia», todas tus campañas van a salir con ese mismo asunto. Usá {{campania.asunto}} para conservar el asunto que escribís en cada campaña, solo o con un prefijo: Viajes Mágicos | {{campania.asunto}}.
• En el recordatorio de pago, con una plantilla activa el asunto sale de la plantilla y no del que se escribe al enviar el recordatorio.

El bloque de la plataforma al pie del newsletter

En la confirmación de suscripción y en las campañas, la plataforma agrega siempre un bloque al final del correo, fuera de tu diseño:

• en la confirmación, el botón para confirmar y los enlaces para administrar las preferencias y cancelar la solicitud;
• en las campañas, el enlace para darse de baja, el de preferencias y la dirección de tu agencia.

Ese bloque no se puede ocultar, mover ni modificar, y tus estilos no lo alcanzan: así cada suscriptor tiene siempre a mano cómo confirmar o darse de baja. Por eso no necesitás poner esos enlaces en tu plantilla. Si igual usás alguno de sus shortcodes en tu diseño, el enlace funciona, pero el bloque del pie aparece de todos modos. El bloque usa el color de fondo y, en la confirmación, el color de los botones (para el botón de confirmar) de tu apariencia de correos.

El presupuesto y el recordatorio de pago no llevan este bloque.

Qué se rechaza y qué se limpia

No se puede guardar una plantilla con:

• <script>, atributos que ejecutan código (como onclick) o enlaces javascript:;
• <iframe>, <object> o <embed>;
• formularios y campos (<form>, <input> y similares);
• direcciones relativas o anclas en enlaces e imágenes;
• un correo sin texto legible propio, por ejemplo uno vacío o hecho solo con imágenes.

Se quita sin avisar:

• las etiquetas head, meta y title, y las html, head o body anidadas: el documento del correo lo arma la plataforma;
• del CSS, las propiedades que sacan elementos de su lugar: position, top, left, right, bottom, inset, transform, translate, scale, rotate, z-index, zoom, las offset y los márgenes negativos;
• los selectores CSS que empiezan con un combinador, como ~ div, + p o > a.

Se conserva: el idioma (lang) de <html> y, del <body>, los atributos style, bgcolor, align, dir y lang. Se aplican al contenedor de tu diseño, no al correo entero.

Tu CSS se limita a tu diseño: body, html y :root pasan a referirse a tu contenedor, y ninguna regla alcanza al bloque de la plataforma.

Tamaño

• El HTML que subís puede pesar hasta 100 KB. El panel lo indica debajo del editor: «Máximo 100 KB».
• El CSS dentro de <style> puede pesar hasta 20 KB, y el HTML puede tener hasta 256 niveles de anidado.
• El correo ya armado, con los datos y el bloque de la plataforma, no puede superar los 95 KB. Gmail recorta los correos de más de 102 KB y escondería el final, que es donde van los enlaces de baja. Se controla al validar y al guardar, con datos de ejemplo, y en cada envío real.

Versiones

Cada vez que tocás Guardar versión se crea una versión nueva, que queda guardada sin activar: la activás vos cuando la probaste. Las versiones guardadas no se modifican; para cambiar algo, guardás otra.

En Versiones guardadas ves todas, con su fecha:

• Cargar en el editor: abre esa versión para revisarla o partir de ella.
• Activar: la pone en uso para todos los envíos de ese correo.
• Enviar prueba: te manda esa versión a tu correo, con datos de ejemplo.

Con Usar la por defecto volvés al diseño estándar cuando quieras. Para empezar desde el diseño estándar, usá Cargar la por defecto (lo abre en el editor) o Descargar plantilla por defecto (lo baja como archivo .html). Con Cargar archivo .html subís un archivo que armaste fuera del panel.

Guardar, activar y volver a la por defecto pueden pedirte que confirmes tu identidad.

Si una plantilla falla al enviar

Si al enviar un correo real tu plantilla activa no se puede armar (por ejemplo, porque falta un dato o el correo queda demasiado pesado), el correo sale igual con la plantilla por defecto, para que tu cliente no se quede sin él. En la tarjeta vas a ver el aviso «La versión … falló al generar un correo real…» y el estado Falló al generar. Corregí la plantilla y activá la versión corregida, o volvé a la por defecto. El aviso se va cuando activás otra versión.

Cómo probar una plantilla

1. Pegá o cargá el HTML y completá el Asunto.
2. Tocá Validar y previsualizar. Si hay problemas, los ves listados con su número de línea, por ejemplo «Línea 12: …».
3. Revisá la vista previa: muestra tu correo con datos de ejemplo y el asunto ya armado.
4. Tocá Guardar versión y, en la lista de versiones, Enviar prueba. Podés mandar hasta 5 pruebas por hora. La prueba es un correo real: sale con la configuración de Correo y remitente y cuenta como cualquier otro envío.
5. Abrí la prueba en Gmail (web y app), Outlook y Apple Mail, en la computadora y en el celular, y también con las imágenes desactivadas.
6. Si todo está bien, tocá Activar.

Ejemplos

Cada ejemplo es una plantilla válida que podés usar como punto de partida. Cambiá colores y textos a gusto.

Presupuesto al cliente

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4;">
  <tr><td align="center" style="padding:24px 12px;">
    <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width:600px;width:100%;background-color:#ffffff;">
      <tr><td style="padding:24px;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#222222;">
        <h1 style="margin:0 0 16px;font-size:22px;">{{agencia.nombre}}</h1>
        <p>Hola {{cliente.nombre}},</p>
        <p>Te enviamos el presupuesto «{{presupuesto.titulo}}» (versión {{presupuesto.version}}), válido hasta {{presupuesto.validez}}.</p>
        <p>{{presupuesto.introduccion}}</p>
      </td></tr>
    </table>
  </td></tr>
</table>

Asunto: Presupuesto de viaje: {{presupuesto.titulo}}

Recordatorio de pago

<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width:600px;width:100%;margin:0 auto;">
  <tr><td style="padding:24px;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#222222;">
    <h1 style="margin:0 0 16px;font-size:20px;">Tu cuota vence el {{cuota.vencimiento}}</h1>
    <div>{{recordatorio.mensaje}}</div>
    <p style="font-size:14px;color:#555555;">Viaje: {{viaje.titulo}} · Saldo pendiente: {{cuota.saldo}}</p>
  </td></tr>
</table>

Asunto: Recordatorio de pago: vence el {{cuota.vencimiento}}

Confirmación de suscripción

<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width:600px;width:100%;margin:0 auto;">
  <tr><td style="padding:24px;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#222222;">
    <h1 style="margin:0 0 16px;font-size:20px;">Confirmá tu suscripción</h1>
    <p>Queremos asegurarnos de que fuiste vos.</p>
    <table role="presentation" cellpadding="0" cellspacing="0"><tr>
      <td style="background-color:#172d3b;border-radius:6px;">
        <a href="{{suscripcion.confirmar}}" style="display:inline-block;padding:12px 24px;color:#ffffff;text-decoration:none;font-weight:bold;">Confirmar suscripción</a>
      </td>
    </tr></table>
  </td></tr>
</table>

Asunto: Confirmá tu suscripción a {{agencia.nombre}}

Envoltorio de campañas del newsletter

<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width:600px;width:100%;margin:0 auto;">
  <tr><td style="padding:24px;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#222222;">
    <div style="font-size:14px;color:#555555;margin-bottom:16px;">{{agencia.nombre}}</div>
    <div>{{campania.contenido}}</div>
  </td></tr>
</table>

Asunto: {{campania.asunto}}

En la confirmación y en las campañas, la plataforma agrega sola, al final, el bloque con la baja y las preferencias.