Como insertar HTML crudo en correos Gmail

21
48681

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:

  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

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.

21 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.

  4. Hola,
    Estoy incrustando un html , pero la propiedad z-Index no la respeta, mi a
    html es una imagen con un texto con hipervinculos por encima,
    ¿Como deberia hacerlo? , ¿saben la manera correcta de que se me muestre el html?

    Gracias

  5. Yo envio correo electronico insertando codigo html ( tabla ) con thunderbird ( Hay para linux, Windows o Mac ) es muy sencillo

    ya en el cuerpo del correo , tomar INSERTAR / HTML de la barra superior de herramientas y en automatico carga el html que deseas enviar

    ya solo faltaria darle enviar

    aun no se como automatizar el envio respetando un listado de correos

    y tambien ando buscando como hacerlo desde la app de una tablet android

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad