Code to convert HTML to image dynamically

Studio
1

How we can create a image dynamically from HTML content?
Could you please help us sharing code? or how we can do that?
How we are include nodejs libraries in Code base?

2 Likes
2

Hey @senthil.vasan,

How we can create an image dynamically from HTML content?
Could you please help us sharing code? or how we can do that?

Can you please share the HTML content here? If you have an image hosted on CDN, you can display it in the bot using code.

How we are include nodejs libraries in Code base?
All necessary nodejs libraries are already included in the code. Let us know if you need to access a library that is not available in the code yet.

3

@Pratik, Thank for you reply.

HTML will be generated dynamically, based on the status of Work Order number.
There are 5 different status. Each WO will go through each status, finally to “Completed” status.

<div>	
	<ul class="nav nav-tabs" role="tablist" id="myTab">
		<li>
			<div class="icon created2"></div>
			<div class="name">Work order <br>
				created</div>
			<div class="date">18-Apr-2022</div>
		</li>
		
		<li>
			<div class="icon Diagnosis2"></div>
			<div class="name">Unit Under<br>
				Diagnosis </div>
			<div class="date">18-Apr-2022</div>
		</li>
								  
	  
		<li>
			<div class="icon Parts2"></div>
			<div class="name">Waiting For<br>
				Parts </div>
			<div class="date">18-Apr-2022</div>
		</li>
									
		  
		<li>
			<div class="icon Progress1"></div>
			<div class="name">Repair in<br>
				Progress</div>
			<div class="date"></div>
		</li>
									  
		<li class="active">
			<div class="icon completed1"></div>
			<div class="name">Work order<br>
				completed</div>
			<div class="date"></div>
		</li>
	</ul>
</div>

After updating the status and dates for each status,
Image from the HTML created and send it to Customer WhatsApp.

Kindly help us on this

1 Like
4

Thanks for sharing this code snippet with me @senthil.vasan.

It seems like you need to use an external API or library to accomplish this usecase. This seems like a good place to start: javascript - Render HTML to an image - Stack Overflow

Let me know if this doesn’t work out. :wink:

Thanks!

5

Thanks @Pratik.

Can’t we do this in Yellow.ai Code base?
A year before when I worked for a BOT in app.yellowmessenger.com, we have converted HTML to PDF / Image dynamically. Is it possible in Yellow.ai itself?

1 Like
6

Yes @senthil.vasan.
Using generate pdf node, you can dynamically create PDF.

Let’s divide this usecase in 2 steps.

  1. Fetch data from the parent interface (here HTML):
    You can follow this guide to fetch data from the parent interface and pass it to the bot using payload: Web Client | yellow.ai

  2. Create pdf dynamically using the data we fetched earlier
    You can use generate PDF node to create PDF dynamically: Operational/Logical Nodes - Action and Logic | yellow.ai

7

Thank you @Pratik, will try this dynamic PDF option and update you.

8

@Pratik, I did checked the “Generate PDF” option. But after thet node I could not send it to chat. There is no Send file node.
Could you please help on it?

1 Like
9

@senthil.vasan
We already have file message node to send file in the chat.

10

@Partik,
Thank you so much, dynamic PDF generated and that file sent to customer WhatsApp. :+1:

11

@Partik,
If an API send base64 image, could we send to customer WhatsApp.
Like the base64 image will be stored a variable, and that will be used in File message node?