Saltar al contenido

¿Puedo tener una imagen con una etiqueta de sustitución en una plantilla de SendGrid?

Solución:

Supongo que ha logrado activar la API SendGrid a través de Node.js, ya que está etiquetando la pregunta con la etiqueta Express.

Actualmente también estoy tratando de crear una plantilla de correo electrónico transaccional usando SendGrid, y lo logré.

Probablemente desee agregar un nuevo elemento de imagen primero usando el constructor.

agregar una imagen

Luego sube una imagen. Una vez que su imagen esté cargada, haga doble clic en el elemento de la imagen. Toma el nombre de tu archivo de imagen y cópialo.

archivo de imagen

Cambie a la vista de código.

vista de código

En la vista de código, busque la etiqueta html que contiene su nombre de archivo de imagen. Aquí hay un ejemplo en mi caso.

código para reemplazar

Reemplace este código con su “etiqueta de sustitución”.

etiqueta de sustitución

Guarde la plantilla. Tu plantilla debería estar lista para usarse. En su código de Node.js, configure la etiqueta de sustitución.

mail.personalizations[0].addSubstitution(new helper.Substitution("your-subtitution-tag", "image-url"));

Usé esta biblioteca: https://github.com/sendgrid/sendgrid-nodejs Con suerte, su correo electrónico debería contener la nueva imagen.

resultado de correo electrónico

Borré algunos contenidos sensibles arriba. Este es el resultado del correo electrónico de mi parte. ¡Espero que esto ayude!

Entonces, como muchos notaron, Sendgrid ha cambiado la capacidad de cambiar entre un editor “basado en código” a un editor de “diseño WYSIWYG” después de que se haya creado inicialmente una plantilla de correo electrónico, lo que hace que la respuesta de Nicholas sea irrelevante (lo siento amigo). Uno debe seleccionar en el punto de creación y luego se queda como ese tipo de modo de editor.

Supongo que a muchos de ustedes (¡lo sé!) Les gustaría conservar la capacidad de tener un editor visual de sus correos electrónicos (lo que permite a los diseñadores y redactores hacer su trabajo sin molestar a los desarrolladores con sus cambios) sin renunciar a la personalización. extras de la oferta de correos electrónicos dinámicos de Sendgrid.

Encontré una alternativa que, aunque un poco engorrosa, ofrece el resultado deseado.

Siga este conjunto de instrucciones para insertar un valor dinámico en el src atributo del img etiquetas en su editor de plantillas “wysiwyg”:

  1. Crear un nuevo Editor de diseño plantilla (le permitirá seleccionar esto una vez que agregue su primera versión de esa plantilla).
  2. Diseñe su correo electrónico: agregue textos, imágenes y otras cosas.
  3. Seleccione un cuadro de elemento de imagen (en el que desea inyectar más tarde la URL de SRC) y haga clic en el icono de código de vista para ver el código subyacente (botón de código subyacente).
  4. Copie a un lado el valor de la URL que está allí actualmente (supongo que seleccionó una imagen temporal solo para estilizar su correo electrónico en el paso 2) y luego cierre este cuadro de diálogo sin realizar ningún cambio.
  5. Ve a la Importación y exportación sección a la izquierda Construir barra lateral (hacia abajo), luego haga clic en Exportar HTML. Guarde el archivo y ábralo en un editor de texto.
  6. Busque la URL que copió en el paso (4) y reemplácela con la variable dinámica de su elección (ejemplo: {{my_dynamic_logo_url}}).
  7. Copie todo el contenido del archivo (después de sus cambios en el paso anterior), luego regrese al editor Sendgrid y haga clic en el Importar botón en el mismo Importación y exportación sección del paso (5).
  8. Pegue el contenido del archivo allí y haga clic en Aceptar. Se verá igual (tal vez solo la imagen desaparezca, pero está bien, confía en mí. Guarde su plantilla ahora.
  9. Voila: envíe su correo electrónico a través de API, mientras inyecta la URL deseada en {{my_dynamic_logo_url}}; ahora debería poder ver esa imagen dinámica en el correo electrónico recibido.
  10. Solo haz una buena ronda 10 aquí: P
    Adjuntando imagen que puede ayudar con el proceso
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *