Automate PDF Generation from Custom Designs using Orshot
Designing PDFs that look great is a hassle. There are very few apps that do it right. Automating PDF generation from those good designs is even harder.
I found a cool app called Orshot, which lets you do this easily. All you need is your design skills and some knowledge of automation tools, such as Zapier or n8n.
- Step 1: Design the PDF
- Step 2: Test the Design
- Step 3: Automate dynamic PDF generation
- Integrating in your backend
Step 1: Design the PDF
Go to Orshot Studio(free signup) and use their visual editor to create a template for your PDF.
You can also quickly start and use AI to generate templates, where you can just write a prompt describing the kind of design you want.
They also have a bunch of templates which you can use to start with, and customize further.
Once done, make sure to make the layers dynamic you want to pass different data to. To do that, you can select the layer, and on the right panel, you can toggle on the “Parameterize” option. You’ll get an ID for the element, which is going to be the parameter ID where you can pass dynamic data.
Step 2: Test the Design
Once you’ve designed the template, you can save it. Click on “Integrate template” on top left. It’ll show a bunch of integration options.
Click on “Playground” and you’ll see a playground.
Use this playground to test the PDF generation by selecting “PDF” in the response format dropdown. You can also change data for dynamic values that you’ve set.
Step 3: Automate dynamic PDF generation
You are now ready to automate this design. On the playground page itself, you can select different automation tools you can use to automate PDF generation from your template.
You can click on either of the automation tools to see the setup guide.
Orshot supports popular automation tools like Zapier, n8n, Make, etc. If you’re an n8n fanatic, they’ve a detailed tutorial on auto-generating certificates using Google Sheets or any other sources. The good thing about automation tools is that you can basically connect different sources, triggers, and outputs.
Integrating in your backend
Since you get a REST API for your template, you can also integrate it in your backend using Orshot’s Rest API. Within both the automation tools and the REST API, you can pass dynamic data to generate PDFs with different content.
Below is a quick example of how you can integrate into your Node.js backend. Orshot also has SDKs for Python, PHP, Ruby, etc. which you can use for quick start.
await fetch('https://api.orshot.com/v1/studio/render', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer <ORSHOT_KEY>'
},
body: JSON.stringify({
templateId: 391,
modifications: {
"canvasBackgroundColor": "linear-gradient(0deg, rgba(255,255,255,1) 0%, RGB(251, 242, 216) 100%)",
"type": "CERTIFICATE OF RECOGNITION",
"name": "Amit Merchant"
},
response: {
type: "binary",
format: "pdf",
scale: 1
},
})
});
You can get your Orshot API key in Workspace > Settings > API Keys.
templateId: The ID of the template, you’ll see it in your template’s playground page.modifications: This is where you can pass dynamic data, for ex. your backend.response: Since we want to generate PDFs, we’ll select the format to be “PDF” and type as “binary”. You can also generate images from the same template if you want.
The best part about Orshot is that you can literally design anything and generate dynamic versions of it at scale. With custom fonts, layouts, and images, the app gives you the flexibility over the design and the power to automate your design with the apps and services you already use.
You may also like: Convert HTML to PDF using Headless Chrome in PHP
👋 Hi there! This is Amit, again. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
