Como insertar HTML crudo en correos Gmail

18
17530

Este tutorial explica como insertar HTML crudo en Gmail.

En principio Gmail no soporta el envío de diseños HTML complejos a través del interfaz estándar. Su editor en formato rico es suficiente para usuarios normales, pero no permite la creación de plantillas profesionales.

Buscando soluciones en Internet encontré estas:

  • Contratar un servicio profesional como Mailchimp.
  • Usar un cliente de Gmail que permita el envío de HTML crudo.
  • Copiar HTML y pegarlo en el editor de Gmail.
  • Usar la extensión de Chrome Gorgias.
  • Posiblemente otras que no conozco.

Mailchimp es un servicio excelente, pero demasiado para mis necesidades. Tampoco quiero cambiar de cliente porque mi flujo de trabajo se apoya en Gmail. Ni me sirve copiar y pegar HTML porque en mi experiencia, es un método poco fiable y difícil de editar. Buscando otra alternativas encontré la extensión de Chrome Gorgias, que me permite enviar HTML arbitrario en correos de Gmail. En solo un par de minutos te enseñaré como funciona.

La extensión se instala en Chrome desde aquí: https://gorgias.io/chrome-extension No hay versión para otros navegadores 🙁 Tras instalarla, aparece un botón adicional en el interfaz de Gmail, que permite insertar o definir plantillas.

gorgias-button

La función de definir una plantilla muestra un dialogo donde puedo escribir HTML y editarlo más tarde. Los únicos campo que necesito rellenar son el nombre de plantilla y el contenido HTML. Ojo! antes de pegar el HTML pulsa el botón </> Show HTML Source. Pulso en Save Template y queda grabada.

Al volver a la ventana de edición del correo y pulsar el botón, aparece mi plantilla con un adelanto del diseño realizado. Solo queda insertarla.

gorgias-templates

Para escribir el diseño usé el editor Atom y un servicio online para codificar una imagen en base 64 y adjuntarla como parte del documento.

He aquí un fragmento de mi HTML, por si quieres probarlo:

El diseño front-end sigue siendo una tarea compleja a pesar de la adhesión a estándares de los navegadores modernos. Con mis conocimientos básicos hice un diseño minimalista que puedo reutilizar de forma fiable. Si quieres dar un aspecto profesional a tus campañas o sorprender a tus amistades, este es un modo de hacerlo.

18 Comentarios

  1. Hola;

    Quiero insertar un html con un css en style tag en el head, pero no me lo admite, es problema mío o es que no funciona???

    gracias

  2. Hola Gustavo,

    una vez creado el template, cuando le des a crear un nuevo correo verás en la parte superior derecha una G de la extensión Gorgia que has tenido que instalar. Al hacer click en ella verás tu template, simplemente pinchas en ella y se te pondrá en el correo.

    Saludos

  3. Buenas noches. Soy diseñadora gráfica. No diseñadora web. Necesito saber como resolver el asunto de que el cabezote de una plantilla mail enviada mediante gmail no supere el texto ocupado por el texto.

    Diseñé el cabezote en illustrator. Tiene 1200 px de ancho e hice una respuesta predeterminada insertando cabezote y «pie de página», también de 1.200 pixeles. Pero el texto del mensaje desborda las imágenes.

    Puedo hacer una plantilla html rudimentaria con dreamweaver pero no sé después como usarla como respuesta predeterminada en gmail.

    ¿Cuál consejo pueden dar a alguien que no sabe de programación?

    Gracias.
    Ángela.

Dejar respuesta

Please enter your comment!
Please enter your name here