# PDF Entries {% embed url="" %} **PDF Entries** feature is available in the pro version of the plugin and allows exporting the Total summary of calculations in a `.pdf` document. This feature allows [sending](#email-quotes-with-pdf-entries) **calculated quotes** in PDF format **as an invoice as well.** Users can get these PDF entries after completing the order on the confirmation page, on the same page as a calculator, or via email. Admin [can access](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/global-settings/pdf-entries) it in the **Orders tab.**

## **Activating** PDF Entries **The PDF Entries** option can be enabled in **Cost Calculator Global Settings** by toggling the "**Activate PDF Entries**" button:

After activating the **PDF Entries**, the PDF Download button will automatically appear on your calculators:

You can turn on the '**Show button only after payment**' setting to make the button visible after completing the payment by the user.

In the individual settings of the calculator, you can also enable to add a **PDF Download button** for the [**Confirmation Page**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/confirmation-page) as well:

{% hint style="info" %} **Button to share receipt** will be available if the Share Quote Form[ **is enabled.**](#email-quotes-with-pdf-entries) {% endhint %} ### Email Quotes with PDF Entries There is an availability to send email quotes with PDF entries. To enable this feature follow the **Global Settings > Share Quote Form** and fill in the required fields:

To get know more about this feature, refer to this manual: {% content-ref url="share-quote-form" %} [share-quote-form](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/global-settings/share-quote-form) {% endcontent-ref %} ## Customization of PDF Entries **Cost Calculato**r offers a powerful builder to customize the **PDF Entries**. You can create almost any invoice or quote using our builder with simple logic. ### Overview of PDF Entries Tab We can divide the **PDF Entries tab** into several sections as shown below: * [**Document & Template Settings** ](#template-and-document-section) * [**Body**](#body-section) * [**\*****Sidebar**](#sidebar-section) * **Preview** {% hint style="info" %} [**\*****The Sidebar section**](#sidebar-section) may not be in the builder as it **depends** on the selected [**sidebar position**](#sidebar)**.** {% endhint %}

We can also divide the PDF into [**Body** ](#body-section)and [**Sidebar** ](#sidebar-section)sections based on the chosen [sidebar position. ](#sidebar)These sections consist of [**editable prebuilt blocks**](#blocks)**,** which you can **change** within the **Body** and **Sidebar** Sections.

### Template & Document Section In this section, you can choose the template and rename it, save it for future uses, rename the PDF Download button text, change the document layout and other settings.

#### Templates To start, you have to select one of the templates and change it according to your needs. To do it, click on the **Select Templates** button.

On the opened pop-up, templates are organized into two tabs: **Default Templates** and **My Templates**:

* **Default templates** - ready-to-use customizable templates come with the plugin * **My Templates** - all of your saved templates. Here are the available **Default Templates**: {% tabs %} {% tab title="Default" %} ### Default

{% endtab %} {% tab title="1" %} ### **Colored blocks**

{% endtab %} {% tab title="2" %} ### Burgundy Sidebar

{% endtab %} {% tab title="3" %} ### Contrast Pink

{% endtab %} {% tab title="4" %} ### Mesh Gradient

{% endtab %} {% tab title="5" %} ### Dark Paper

{% endtab %} {% tab title="6" %} ### Yellow Paper

{% endtab %} {% tab title="7" %} ### Gray Geometry

{% endtab %} {% tab title="8" %} ### Autumn

{% endtab %} {% tab title="9" %} ### 3D

{% endtab %} {% tab title="10" %} ### Abstract Mint

{% endtab %} {% tab title="11" %} ### Modern

{% endtab %} {% tab title="12" %} ### Minimalistic

{% endtab %} {% tab title="13" %} ### Contrast Blue

{% endtab %} {% tab title="14" %} ### Purple Paper

{% endtab %} {% tab title="15" %} ### Green Sidebar

{% endtab %} {% tab title="16" %} ### Highlighted Blocks

{% endtab %} {% endtabs %}

* **Restore Styles** - undo **all changes** that you have made to the template and restore the original style of the template * **Preview** - opens a **printable preview** of the PDF in a new tab * **Name** - give a name to your template * **Button text** - rename the button that enables users to download this PDF file in the calculator * **Show button only after payment** - hides the **PDF Download** button and shows it only when the payment has been processed or the order is submitted successfully. {% hint style="success" %} After making **any modifications**, changes should be saved by clicking the **Save** and/or **Publish** buttons on the top right corner of the **section.** {% endhint %} #### Document In the document section, **global setting**s for the blocks can be set up. It consists of three tabs: * [**Body**](#body) * [**Sidebar**](#sidebar) * [**Border**](#border) {% hint style="info" %} The settings in the **Document section** will **be applied** to **all blocks** as well. However, you can **freely change** them in the block's settings. {% endhint %} #### Body In this tab, the body party of the PDF can be customized.

* **Text Color** - indicate the color for texts. You can put the hexadecimal color code or just use the color picker of the Cost Calculator. * **Background Color** - indicate the color for the background. You can put the hexadecimal color code or just use the color picker of the Cost Calculator. * **Background Image** - upload or select the image as a background. * **Angle Radius** - indicate the angle radius for the body in terms of pixels. * **Side Paddings** - indicate the side[ paddings](#user-content-fn-1)[^1] in terms of pixels. #### Sidebar In the Sidebar tab, the overall behavior and the layout of the sidebar can be modified. {% hint style="info" %} Color settings of the **Sidebar** can be enabled or disabled. If it is disabled, respective settings will be inherited from the [**Body tab**](#body). {% endhint %}

* **Sidebar Position** (3 options) - Choose the Sidebar position in the first row * **Left Sidebar** - puts the sidebar to the left side of the document * **No Sidebar** - removes the sidebar from the sidebar entirely. In this case, all of the blocks in the [**Sidebar** ](#sidebar-section)will be automatically moved to the [**Body**](#body-section) * **Right Sidebar** - puts the sidebar to the right side of the document * **Text Color** - indicate the color for texts. You can put the hexadecimal color code or just use the color picker of the Cost Calculator. * **Background Color** - indicate the color for the sidebar background. You can put the hexadecimal color code or just use the color picker of the Cost Calculator. #### Border In this tab, border settings can be modified for the entire document.

* **Show Border** - enable the toggle to add a border to the entire document * **Border Position** - choose one of the four positions to display the border. Available options are * **4-sided border** * **Left-side border only** * **Right-side border only** * **Top border only** * **Bottom border only** * **Border Color -** indicate the color of the border * **Border Size** - indicate the thickness of the border in terms of pixels ### Body Section The body section contains blocks that will be displayed in the body part of the PDF.

### Sidebar Section {% hint style="info" %} **The Sidebar section** may not be in the builder as it **depends** on the selected [**layout**. ](#sidebar) {% endhint %} This section contains blocks that will be displayed in the **sidebar part** of the PDF.

## Blocks

**Blocks** are the essential parts of PDF Entries. They display **static** and **dynamic information.** * **Static Information** - block titles, descriptions, details, etc. In short, **any** information that **you have entered** in this builder. For instance, the company logo, slogan, title are the same in all PDF receipets. * **Dynamic Information** - information that will **be added by the calculator automatically** based on the **user input** in the calculator. For instance, Order ID, Created Date, and Order Details are dynamic. {% hint style="info" %} Initially, background color and text color settings are **inherited** from [**global settings (Documents section)**](#document). But you can freely change them in block settings. {% endhint %} You can **click on the blocks** in the preview and their **settings will be opened** on the right side - in the body or sidebar section:

**Blocks** can be turned on and off using the toggles and can be reordered freely, even within the **Body** and **Sidebar** sections:

If you **expand** the blocks, you'll access their settings. Each block's settings are organized into **multiple tabs**, tailored to what the block displays, making the settings **unique** to each block.

> **Let's see all the blocks we have in our builder one by one** :white\_check\_mark: ### Top Text Block

In the **Top Text Block**, you can include your 'Thank you' message to the customer for using your service. It has two tabs in its settings: {% tabs %} {% tab title="Text" %}

In this tab, you can indicate the title and the body of the top text block. {% endtab %} {% tab title="Design" %}

This block displays the unique Order ID and the Order Creation Date. It has these tabs in its settings: {% tabs %} {% tab title="ID" %}

You can enable or disable the Order ID and edit the corresponding text. {% hint style="info" %} Note that the **Order ID** will be inserted by the calculator **automatically.** {% endhint %} {% endtab %} {% tab title="Date" %}

* **Show** - indicate the label for the Order Date. Additionally, you can hide the date by disabling the toggle. * **Format** - indicate the date and time format. {% hint style="info" %} Note that the **Order Date** will be inserted by the calculator **automatically.** {% endhint %} {% endtab %} {% tab title="Design" %}

**Order Block** is the most important block in our builder. It displays the order details, calculations, total price, and more. Additionally, you can add a QR Code, stamp, and signature to improve the document's overall look and confidentiality. Here are the available tabs in the block's settings: {% hint style="success" %} **Order details** will be inserted by the calculator **automatically.** {% endhint %} {% tabs %} {% tab title="Content" %}

* **Show Payment Method** - displays the payment method in the block (e.g. Stripe, PayPal, Cash Payment) * **Show QR Code** - insert the QR Code of the URL link that you have provided below. {% hint style="info" %} Note that, this is a **static** QR Code, which means it is **universal** for all PDFs. It does not redirect to any verification page, but only to the URL link that you have specified. {% endhint %} {% endtab %} {% tab title="Images" %}

{% hint style="success" %} Actually, you can use these image fields **according to your needs.** It is **not mandatory** to upload a stamp image to the stamp image field. It has been designed to insert the specific image to the specific location of the orders tab. {% endhint %} * **Stamp Image** - upload or select the image that can be used as a stamp. * **Stamp Size** - indicate the size of the stamp image in terms of percentage (in 100 scale) * **Signature Image** - upload or select the image that can be used as a signature. * **Signature Size** - indicate the size of the signature image in terms of percentage (in 100 scale) {% endtab %} {% tab title="Lines" %}

* **Show Lines** - enables to display of the lines between the order elements within the block * **Line Color** - indicate the color of the lines * **Line Size** - indicate the thickness of the lines in pixels * **Show Border** - enables to display of the border for the Order Block * **Border Color** - indicate the color of the border. You can put the hexadecimal code of the color or use the color picker of CCB. * **Border Size** - indicate the thickness of the border in pixels * **Angle Size** - indicate the border radius of the Order Block {% endtab %} {% tab title="Design" %}

In this tab, you can set the colors for the heading and table background as well as texts. {% endtab %} {% endtabs %} ### Footer Text

**Footer text block** can be used to include the short and long notices that will usually be pasted at the bottom of the document. Here are the available settings for the footer block: {% tabs %} {% tab title="First Tab" %}

In the text tab, provide your footer text. {% endtab %} {% tab title="Design" %}

* **Alignment** - choose one of the four alignments for the block * **Font Size** - indicate the font size for the footer text in pixels * **Text Color** - choose the color for the texts in the block * **Background Color** - choose the color for the background of the block {% endtab %} {% endtabs %} ### Brand

In the brand block, you can illustrate the logo, name, and slogan of your company. Here are the available settings for the block: {% tabs %} {% tab title="Logo" %}

* **Logo Image** - upload or select the logo of your company * **Logo Width** - indicate the logo width in pixels * **Logo Height** - indicate the logo height in pixels {% endtab %} {% tab title="Name" %}

* **Company Name** - edit the text to replace it with your company's name * **Font Size** - adjust the font size for the company name * **Font Color** - select the color according to your needs {% endtab %} {% tab title="Slogan" %}

* **Company Slogan** - edit the text to replace it with your company's slogan * **Font Size** - adjust the font size for the company slogan * **Font Color** - select the color according to your needs {% endtab %} {% tab title="Design" %}

* **Alignment** - choose one of the four alignments for the block * **Background Color** - choose the color for the background of the block {% endtab %} {% endtabs %} ### Image

**Image block** enables you to insert any image into the PDF. Upload or select the image in the block settings and adjust the height of it. ### Company Block

**Company block** can be used to share general info about the company as well as the contact details. Here are the available block settings: {% tabs %} {% tab title="Text" %}

Enter the Block Title and description. {% endtab %} {% tab title="Context" %}

This tab contains several text line input fields. For the **initial 4 ones**, you can enter the **short contact details** of your company as shown in the picture. **The last one** provides the text area input field which is designed to enter the **Address** of the company. {% endtab %} {% tab title="Design" %}

**Customer block** can be used to provide the **user-entered information** in the order form. {% hint style="warning" %} This block will be **different** based on the [**Order** ](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/order-form)or [**Contact form**](https://docs.stylemixthemes.com/cost-calculator-builder/develeopers-guide/cost-calculator-hooks/contact-form) details that you have attached to the calculator. **User-entered information** in the form will **automatically** be **included** in the document. *** In case the user downloads the PDF **before filling** in the order form, the block will be **omitted** in the document. {% endhint %} Here are the available tabs in the block's settings: {% tabs %} {% tab title="Text" %}

In the **text tab**, just enter the title for the block. {% endtab %} {% tab title="Design" %}

In this block, you can include any **additional information** that you would like to include in PDF receipts. {% tabs %} {% tab title="Text" %}

In this tab, you can provide the block title and descriptions of the designed areas. {% endtab %} {% tab title="Design" %}

* **Alignment** - choose one of the four alignments for the block * **Text Color** - choose the color for the texts in the block * **Background Color** - choose the color for the background of the block {% endtab %} {% endtabs %} ## PDF Entries **with Orders** The site administrator can export orders as `.pdf` documents in the Orders section of the Cost Calculator dashboard:

By expanding order details, the displayed information can be sent as an email quote as well:

[^1]: Padding is the space between the content and the border of an element.