> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.pdfgeneratorapi.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Integrate with Adalo

[Adalo](https://www.adalo.com/) is an app-building software that supports building websites and applications without learning how to code. Its goal is to offer a platform to design and host websites and applications that include databases, workflow actions, and integrations.

You can use PDF Generator API Adalo Component to quickly generate PDF documents using the data you already have in your Adalo application (e.g. store orders, database records).

* [Example Web Application](https://tanel-tahepolds-team.adalo.com/pdf-generator-api-demo)
* [Example Mobile Application](https://previewer.adalo.com/7322a502-00d0-463e-8855-7dd381d0eda6)
* [Example documents](https://pdfgeneratorapi.com/templates/free-templates)

${youtube}[PDF Generator API Adalo Plugin Introduction](hBgDirz5Mko)

| You can easily clone our example Example Application to speed up the development process.

![](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-12-0909-45-55_mm5wv2.png)

### Setup

To use PDF Generator API Adalo Component, you need a PDF Generator API account. You can create a [free Sandbox Account](https://us1.pdfgeneratorapi.com/signup) and use it for **14 days** to evaluate and integrate the API, with **up to 50 credits** available during the trial period.

| For more information on how credit usage is calculated, see this [article](/en/article/how-credit-usage-is-calculated-5820vc/).

### Installing the Component

You can install the PDF Generator API Adalo Component from the [Adalo Marketplace](https://www.adalo.com/marketplace); you can find an official tutorial on [Adalo Help Page](https://help.adalo.com/component-basics/marketplace-components/how-to-add-components-from-the-marketplace). 

In the Add Component view, navigate to the Marketplace section and click **Explore Marketplace**. Then search for **PDF Generator API** and click **Install** to install the Component.

![Add Component > Marketplace > Explore Marketplace > search "PDF" > Click Install](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-12-0909-55-53_cxy47i.png)

### Configuring the Component

Once you have installed the Component, you can add it to your screen and start the configuration process. The Component has three configuration sections - PDF Generator API, Line items and Button.

##### PDF Generator API

This section allows you to configure PDF Generator API related parameters like API key, API secret, Workspace identifier, Template Id and JSON Payload. 

**API key**
You can find your PDF Generator API key from the Account Settings view in PDF Generator API.

**API secret**
You can find your PDF Generator API secret from the Account Settings view in PDF Generator API.

![PDF Generator API keys and secrets in Account Settings](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/image_8x1c25.png)

**Workspace identifier**
The Workspace identifier specifies the request user context. Your default workspace identifier is the email you used to sign up to PDF Generator API. You can also set any other string value. If the workspace doesn't exist yet, it is automatically created when an API request is made.

**Template Id**
The numeric template id from PDF Generator API.

**FileName**
Here you can specify the generated file name. You can map fields to create a dynamic file name.

##### Line items

The Line items configuration allows you to specific Collection that is sent as part of JSON Payload. You can use `{{line_items}}` placeholder in the JSON Payload to replace it with the Collection data.

###### JSON Payload

The JSON payload allows you to configure data fields that you can access in the PDF Generator API template. Our example application uses order data with line items to generate invoices. Values can be static or mapped from the Adalo database or Components.

![JSON Payload configuration with dynamic values](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-12-0912-48-14_93mqt0.png)

**Example JSON Payload**

```
{
	"order_number": "123123",
	"status": "paid",
	"truck_name": "Yellow Truck",
	"location": "Timesquare",
	"line_items": [{
		"var1": "Sandwitch",
		"var2": "5.99",
		"var3": "3"
	}, {
		"var1": "Coffee",
		"var2": "4.99",
		"var3": "1"
	}]
}
```

##### Line items

This section allows you to map fields from the Line Items object specified in the PDF Generator API section. In our example application, we use this feature to set line items that belong to the order. For example, `var1` is the line item name, `var2` is price, and `var3` is quantity.  You can use `{var1}`, `{var2}` and `{var3}` as placeholders in the PDF Generator API template to show values.

![](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-12-0912-55-40_10s2uio.png)

**Example JSON Payload**

```
{
	"order_number": "123123",
	"status": "paid",
	"truck_name": "Yellow Truck",
	"location": "Timesquare",
	"line_items": [{
		"var1": "Sandwitch",
		"var2": "5.99",
		"var3": "3"
	}, {
		"var1": "Coffee",
		"var2": "4.99",
		"var3": "1"
	}]
}
```

##### Button

This section allows you to configure the button style and specify what Actions are executed on button click. For example, you can open the generated PDF URL in a new window. 

###### Open PDF in a new window

To open the generated PDF in a new window we can use Button action **External Link**. Click on the Magic Text icon in the input and select **PDF Generator API > PDF Output**.

![Use PDF Output (URL) as External Link for Button](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-12-1509-02-59_1d2pzkf.png)
---
### Related articles you may find helpful

* [How to connect my template with data?](/en/article/how-to-connect-my-template-with-data-r8vfc6/)
* [How to use the editor?](/en/article/how-to-use-the-editor-1a194yy/)
* [Supported operators](/en/article/supported-operators-1g0y3zu/)