Actualizado: 1/8/2024

¿Cómo generar contenido creativo desde la plataforma?

La plataforma Botmaker continúa sumando funcionalidades para optimizar la comunicación con usuarios/ clientes y así obtener mejores resultados. En este sentido, ahora puedes generar imágenes y PDFs a partir de un HTML como template que completa con las variables de la conversación.


La plataforma Botmaker sigue añadiendo funcionalidades para optimizar la comunicación con los usuarios/clientes y, por lo tanto, obtener mejores resultados. puedes generar imágenes y PDF a partir de una plantilla HTML, que se completa con las variables de conversación.


Leitura estimada: 06 minutos


PROCEDIMIENTO EN LA VERSIÓN 1.0 DEL BOT (EL PROCEDIMIENTO EN BOT DESIGNER (VERSIÓN 2.0) , SE ENCUENTRA AL FINAL DEL ARTICULO)


Desde Menú>Chatbots, en la intención que desees, puedes agregar la acción render template para crear imágenes y PDFs a partir de un HTML como template.


imagen1


Puedes generar el documento o la imagen en el momento desde la plataforma completando con variables de la conversación que se tomarán desde el bot. Para ello, es necesario incluir un template de HTML y reemplazar en ciertos lugares valores con variables que están en el bot.


Asimismo, una consideración importante es que este contenido se genera en el momento en que el usuario está hablando y solicitando esa información (certificado, comprobante, recibo) y se envía en tiempo real por el canal en el cual se está llevando a cabo la conversación (Ejemplo: WhatsApp, WebChat).


Ejemplo de generación de PDF


Código HTML

<DOCTYPE html>

<html lang=“en”>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content=“IE=edge”>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Botmaker - Multimedia Template</title>

</head>

<body>

<h1>Multimedia Template Example</h1>

</body>

<html>


imagen2


En la UI del multimedia template, verás un campo llamado "Document type", donde deberás ingresar el tipo de archivo a generar (pdf/jpg/png). Luego, debes completar estos dos campos:


  • Html template : completa ese campo con el código del HTML
  • Cdn link var : completa con la variable donde se va a guardar el archivo generado


imagen3

imagen4


Ejemplo de generación de imagen


Código HTML

<DOCTYPE html>

<html lang=“en”>

<head>

<meta charset="UTF-8">

<meta http-equiv=“X-UA-Compatible”; content=“IE=edge”>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Botmaker - Multimedia Template</title>

</head>

<body>

<h1>Multimedia Template Example</h1>

</body>

</html>


imagen5

imagen6

imagen7


¿Cuáles son las ventajas de esta funcionalidad?


La acción render template ofrece muchas posibilidades en situaciones donde se requiera generar documentos para el cliente/usuario, por ejemplo:


  • Hacer un recibo automático al cierre de una compra online, como en el caso de bots que generan transacciones (recibos, documentos que se generan en el proceso).
  • Generar certificados con código QR. A continuación, verás un ejemplo de código HTML válido tanto para formatos de documentos como para formatos de imágenes :


Código HTML


<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta http-equiv="X-UA-Compatible" content=“IE=edge”>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Botmaker - Multimedia Template</title>

<head>

<body>

<h1> Multimedia Template Example</h1>

<img src="https://cdn.eslkidsgames.com/wp-content/uploads/2020/10/QR-Code-Roleplay-Card-Example.png&quot; alt=" ">

</body>

</html>


Solamente necesitas maquetar un HTML con tu equipo de diseño e incluirlo en la plataforma para que puedas utilizarlo cuando sea necesario. Así, el documento o imagen se crea con la información que tu cliente comparte dentro de la conversación y/o con datos de integraciones via API.


En el Bot Designer, se puede acceder a esta configuración mediante un bloque de acción con el mismo nombre, "Render Template":


image.png

image.png


¡Optimiza y gestiona eficazmente tus comunicaciones en la plataforma y en tiempo real con esta nueva feature!

Recuerda visitar nuestro Centro de Ayuda para mayor información.


Escrito por: Equipo Botmaker

Actualizado: 01/04/2024