SendGrid es una plataforma de marketing digital todo en uno que permite a las empresas B2B y B2C, vendedores de comercio electrónico y agencias construir relaciones con los clientes a través de campañas de marketing digital de extremo a extremo y mensajería transaccional.
La plataforma de correo electrónico transaccional de SendGrid tiene una API que soporta contenido HTML dinámico para entregar mensajes personalizados a clientes o usuarios finales, como se puede ver en su documentación aquí. En este tutorial, integrarás los eventos de tu cuenta de Ubidots a través de webhooks para enviar una alerta de correo electrónico personalizada a tus clientes.
Requisitos
1. Crea una plantilla de correo electrónico con contenido dinámico
Inicia sesión en tu cuenta de SendGrid, ve a la barra de menú en la parte superior izquierda, haz clic en “Email API”, selecciona “Dynamic Templates” y luego haz clic en “Create Dynamic Template”.
Dale un nombre a tu plantilla y luego haz clic en “Create”, y haz clic en “Add version” para comenzar a editar el contenido de tu plantilla. Aquí elegiremos una “Blank Template”, selecciona “Design Editor” para edición visual, arrastrar y soltar con acceso para modificar HTML.
2. Edita la plantilla para incluir tu contenido personalizado
El menú del editor se divide en dos partes principales, “Settings” y “Building”.
En "Settings" asigna un nombre personalizado a esta versión de tu plantilla, también puedes configurar un “Subject” y un “Preheader”, que es el contenido que sigue al asunto en el correo electrónico que se enviará a tus clientes. “Build” te permitirá agregar componentes visuales a tu plantilla desde una paleta de arrastrar y soltar que incluye módulos como imágenes, código, botones, etc.
Aquí, agregaremos—en orden de arriba hacia abajo—una imagen seguida de un módulo de código que tendrá dentro una tabla HTML para mostrar los datos de tu evento dinámicamente utilizando la sintaxis de handlebars, también conocida como "Mustache". Para más información sobre cómo funciona esta sintaxis, consulta la documentación de SendGrid aquí.
En resumen, los valores de handle o mustache se indicarán en la solicitud API, la clave sería su nombre y el valor sería los datos del evento—en este caso, el nombre de tu dispositivo Ubidots, el nombre de la variable, el valor que activó la alerta y la marca de tiempo del evento.
Aquí está la estructura de nuestra plantilla:
Componente de imagen: Allí puedes subir una imagen desde tu computadora. Ten en cuenta que la imagen subida puede ser modificada, en caso de que necesites cambiar el tamaño de tu imagen puedes modificar su propiedad width de la siguiente manera.
Componente de código: Copia y pega el siguiente código HTML:
<style>h2{font-family: arial, sans-serif}table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}td, th {border: 1px solid #dddddd;text-align: left;padding: 8px;}</style><h2>Datos del Sensor</h2><table><tr><th>Nombre del Dispositivo</th><th>Variable</th><th>Último Valor</th><th>Marca de Tiempo</th></tr><tr><td>##{{devicename}}</td><td>##{{variable}}</td><td>##{{value}}</td><td>##{{date}}</td></tr></table>La plantilla se verá de la siguiente manera:
3. Integra un evento a través de webhooks a la API de SendGrid
Aquí nos enfocaremos en la configuración necesaria para enviar una solicitud POST al endpoint de la API de correo electrónico transaccional con el fin de enviar un correo electrónico a un cliente. Para hacer esto, necesitarás la API Key de tu cuenta de SendGrid y el template ID de la plantilla ya creada. Si necesitas aprender cómo crear un webhook en detalle, consulta este tutorial.
Para crear una nueva clave API o modificar la existente, ve al panel izquierdo en tu cuenta de SendGrid, selecciona “Settings” y haz clic en “API Keys”.
El template ID se puede obtener yendo a “Templates” de la siguiente manera:
En la sección de acción del evento de tu Ubidots, debes seleccionar el método HTTP POST, la URL de SendGrid y los encabezados de la siguiente manera:
Método HTTP: POST
URL: https://api.sendgrid.com/v3/mail/send
Encabezados:
Content-Type | application/json |
Authorization | Bearer <<Tu clave API de SendGrid>> |
Cuerpo:
{"from":{"email":"support@youriotcompany.com"},"personalizations":[{"to":[{"email":"yourcustomers@email.com"}],"dynamic_template_data":{"subject":"<variable> alert!", "devicename":"<deviceName>","variable":"<variable>","value":"<value>","date":"<timestamp>"}}],"template_id":"<el id de tu plantilla>"}Así es como se ve la configuración al configurar el webhook en el módulo de eventos:
El siguiente video te ayudará a entender cómo ingresar el contenido dinámico del evento en el cuerpo, como el valor para las claves que ya configuramos en nuestra plantilla.
4. Prueba tu evento y verifica los resultados
En este ejemplo, tenía un sensor de Humedad conectado a una placa ESP32 y configuré el evento basado en esta condición.
Una vez que se activó el evento, tu cliente recibirá un correo electrónico como este: