Hey,
Here is my scenario, I want people to fill up the form with their name and number of persons, and I want to create personalized ID passes with my ID card design and want to replace the variable in the card with their name and number of persons attending dinner party, and then send them this card via whatsapp or telegram, but how can I generate such images or pdf with the form data with my design in background.
Please help
Hello @Suhani_Bhatt,
could you give more information?
Cheers
Hey,
Thanks for quick response.
I am using n8n on hostinger vps
I can submit for with google form or n8n form or any webhook to receive name and number of persons and then I want to add that to the predefined template which has a design background, and yes I already have a design ready
Hello @Suhani_Bhatt,
thank you for your answers.
Since yours is a request rather than a problem next time I recommend you open a topic on Help me Build my Workflow
First of all, of course, find a way to receive the form filling data, then for image manipulation I used https://imagemagick.org/ or https://craftmypdf.com/ to directly generate PDFs or images.
Once modified you can use a telegram node or whatsapp cloud API to send.
You can use tool like HTML to Image API - Powerful Image & PDF Generation API and use a dynmic html template like below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Dinner Party Pass</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #f4f4f4;
padding: 30px;
display: flex;
justify-content: center;
}
.card {
width: 400px;
background: white;
border-radius: 15px;
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
padding: 20px;
text-align: center;
position: relative;
background-image: url('your-background-image-url.jpg'); /* Optional */
background-size: cover;
background-position: center;
}
.card-overlay {
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 15px;
}
.restaurant-name {
font-size: 1.6rem;
font-weight: bold;
color: #D63384;
margin-bottom: 5px;
}
.restaurant-address {
font-size: 0.95rem;
color: #555;
margin-bottom: 15px;
}
.person-name {
font-size: 1.4rem;
color: #333;
font-weight: 600;
margin-top: 20px;
}
.pass-info {
margin: 10px 0;
font-size: 1.1rem;
color: #555;
}
.footer {
margin-top: 20px;
font-size: 0.85rem;
color: #999;
}
</style>
</head>
<body>
<div class="card">
<div class="card-overlay">
<div class="restaurant-name">{restaurant_name}</div>
<div class="restaurant-address">{restaurant_address}</div>
<hr />
<div class="person-name">{person_name}</div>
<div class="pass-info">Guests: {no_of_persons}</div>
<hr />
<div class="footer">Please show this pass at the entry</div>
</div>
</div>
</body>
</html>
this is corresponding curl command
curl --request POST \
--url https://htmlcsstoimg.com/api/v1/generateImage \
--header 'CLIENT-API-KEY:apikey' \
--header 'Content-Type: application/json' \
--data '{"html_content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/>\n <title>Dinner Party Pass</title>\n <style>\n body {\n font-family: 'Segoe UI', sans-serif;\n background: #f4f4f4;\n padding: 30px;\n display: flex;\n justify-content: center;\n }\n\n .card {\n width: 400px;\n background: white;\n border-radius: 15px;\n box-shadow: 0 6px 15px rgba(0,0,0,0.15);\n padding: 20px;\n text-align: center;\n position: relative;\n background-image: url('your-background-image-url.jpg'); /* Optional */\n background-size: cover;\n background-position: center;\n }\n\n .card-overlay {\n background: rgba(255, 255, 255, 0.9);\n padding: 20px;\n border-radius: 15px;\n }\n\n .restaurant-name {\n font-size: 1.6rem;\n font-weight: bold;\n color: #D63384;\n margin-bottom: 5px;\n }\n\n .restaurant-address {\n font-size: 0.95rem;\n color: #555;\n margin-bottom: 15px;\n }\n\n .person-name {\n font-size: 1.4rem;\n color: #333;\n font-weight: 600;\n margin-top: 20px;\n }\n\n .pass-info {\n margin: 10px 0;\n font-size: 1.1rem;\n color: #555;\n }\n\n .footer {\n margin-top: 20px;\n font-size: 0.85rem;\n color: #999;\n }\n </style>\n</head>\n<body>\n <div class=\"card\">\n <div class=\"card-overlay\">\n <div class=\"restaurant-name\">{restaurant_name}</div>\n <div class=\"restaurant-address\">{restaurant_address}</div>\n \n <hr />\n\n <div class=\"person-name\">{person_name}</div>\n <div class=\"pass-info\">Guests: {no_of_persons}</div>\n\n <hr />\n <div class=\"footer\">Please show this pass at the entry</div>\n </div>\n </div>\n</body>\n</html>\n","css_content":"","response_format":"url","dynamic_params":[{"no_of_persons":"10"},{"restaurant_name":"Dominos"},{"restaurant_address":"Wall Street"},{"person_name":"Jack Smith"}]}'
it generates the image like this as pass
hey, I am almost there, I even get msg with my generated pdf file in whatsapp but it throws error : the file type may not be supported
here is my workflow :
Also I am using google docs to generate pdf and save it to google drive but its giving me error at the end unsupported file type. I am almost there if you can help.
it seems that the exported file type is not good.
After the Download node, insert a Set node and configure a field as: {{ $binary.data.mimeType }}
If you see application/pdf, you’re good to go.
Also while uploading, make sure that you are saving the PDF binary file, and not converting it back to a Google document.
ok, but as you see in my screen shot the google drive 2 i.e. upload file node already gives me google drive pdf download link, which I want to send via whatsapp, so I already have the file but its not getting me literal pdf to be sent via whatsapp, when I open the pdf in whatsapp it gives unknown file type error.
I saw the workflow and wondered if it was a file extension issue that is not read correctly on Whatsapp.
I think the telegram node is more flexible, have you tried to see if it works correctly with that one?
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
