How to generate creative content from the platform?
The Botmaker platform continues to add functionalities to optimize communication with users/customers and thus achieve better results. In this regard, now you can generate images and PDFs from an HTML template that fills in with conversation variables.
The Botmaker platform continues to add functionalities to optimize communication with users/customers, aiming for better results. You can now generate images and PDFs from an HTML template filled with conversation variables.
Estimated reading time: 06 minutes
Procedure in Bot Version 1.0 (Procedure in Bot Designer Version 2.0 is at the end of the article)
From Menu > Chatbots, within the intent you desire, you can add the "render template" action to create images and PDFs from an HTML template.
You can generate the document or image in real-time from the platform by filling in conversation variables taken from the bot. This involves including an HTML template and replacing certain values with variables from the bot.
It's important to note that this content is generated at the moment when the user is interacting and requesting that information (certificate, receipt, proof), and it is sent in real-time through the conversation channel being used (e.g., WhatsApp, WebChat).
Example of PDF Generation
HTML Code:
<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>
In the multimedia template UI, you will find a field called "Document type," where you enter the file type to generate (pdf/jpg/png). Then, complete these two fields:
- Html template: Fill this field with your HTML code.
- Cdn link var: Enter the variable where the generated file will be stored.
Example of Image Generation
HTML Code
<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>
Advantages of this Functionality:
The render template action offers numerous possibilities in situations where generating documents for customers/users is required. For instance:
- Automatically generate receipts upon completing an online purchase, as seen in bots handling transactions (receipts, documents generated during the process).
- Generate certificates with QR codes. Below is an example of valid HTML code for document formats and image formats:
HTML Code:
<!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" alt=" ">
![https://cdn.eslkidsgames.com/wp-content/uploads/2020/10/QR-Code-Roleplay-Card-Example.png"](https://cdn.eslkidsgames.com/wp-content/uploads/2020/10/QR-Code-Roleplay-Card-Example.png"){kind=link}
</body>
</html>
You simply need to structure an HTML with your design team and include it in the platform for use as needed. This way, the document or image is created with the information your client shares during the conversation and/or with data from API integrations.
In Bot Designer, you can access this setup through an action block with the same name, "Render Template":
.
Optimize and effectively manage your communications in real-time on the platform with this new feature!
Remember to visit our Help Center for more information.
Written By: Botmaker Team
Updated: 07/07/2024