How can I customize the configuration PDF?

info

To modify the PDF, you'll need a basic understanding of HTML and CSS. You may want to leave this to your web designer.

You can generate a PDF for the configuration. This can be done either via Mail verschickt or downloaded directly. Let’s take a look at this first:

Download the PDF Directly

The PDF is only downloaded directly if it is not sent via email.

Open your configurator’s editor.
Click on
Loading...
in the sidebar.
Click the pencil icon on the block that contains the price and “Order” buttons.
Here you can create and manage “Order” buttons. Either use the existing one or click
Loading...
to create a new one.
Uncheck Send to Shop and Send Internal Email (and usually, in this case, also Contact Form—but at the very least, check Send Email).
Check Download or Send PDF
If multiple documents are to be downloaded, also click
Loading...
and select a PDF document (i.e., a template) for each row, and optionally a filename.
Click
Loading...

Formatting PDFs

By default, PDFs are generated in a neutral format. You can change this, but you’ll need some knowledge of HTML. You may want to leave this to your web designer.

Open your configurator’s editor.
Click on
Loading...
in the sidebar.
Switch to the PDF tab. Here you can
- select a font
- set page margins
- select a template: a PDF on which the print will be placed.
- modify multiple building blocks (=templates).
For the building blocks: Click on
Loading...
and select one of the templates:
- content: the entire document
- customer: Section containing customer data
- images: Section containing product images. To provide these images, legen Sie Screenshot-Kameras an
- variables: Table containing the selected attributes
- bom (=Bill of Materials) table containing the bill of materials, i.e., all purchased items
Templates are written in Twig.
You can use locale to make the PDFs multilingual.
Otherwise, take a look at the template to understand how you can modify the PDFs.
Click on
Loading...
.

tip

You can test your template here using existing configurations. To do so, simply select an existing configuration and the corresponding template, then click on

tip

The templates generate HTML, which is converted to a PDF using mpdf. Only a limited range of HTML and CSS is available.

tip

You can also create completely new templates. This allows you, for example, to send a quote to a customer and a work order to yourself. Then select the various templates in the settings for Mails.

Which variables are available in the PDF templates?

app Configurator data
- label Name
- description Description
- image Image URL (currently empty)
- settings All settings
cfg Configuration data
- code Unique configuration code
- price Price
- customer Customer data. Which fields are filled in depends on how you have set up the contact form:
  - name: Customer’s name
  - address: Customer’s street and house number
  - zip: Customer's ZIP code
  - city: Customer's city
  - email: Customer's email address
  - phone: Customer's phone number
  - company: Customer's company
  - taxID: Customer’s tax ID
- variables List of attributes selected by the customer:
  - label Name of the attribute
  - value Name of the selected value
  - price: Possibly the surcharge for this
- bom: Bill of materials (BOM) with the implicitly selected items:
  - qty: Quantity
  - price: Complete price information
    - article The selected item
      - no Item number
      - name Item name
      - description Item description
  - priceUnit Unit price of the item
  - priceTotal Total price of the item
- json The actual content of the configuration
  - summary List of features selected by the customer, combined with their items and prices:
    - group Name of the step
    - row Position of the attribute in the group among the non-hidden ones, starting at 1
    - index Position of the attribute in the group, starting at 0
    - variableLabel Name of the feature
    - variableKey If set, the key of the feature.
    - selectionLabel Selected or entered value
    - type The type of the attribute, e.g., list, number, or image
    - data Depending on type, additional data:
      - url Image URL, for image
      - leftright Image position (left/right), from 0 to 100, default 50, for image
      - topbottom Image position (top/bottom), from 0–100, default 50, for image
      - scale Image size, from 0–100, default 75, for image
    - bom All items inserted based on this attribute
      - articleLines Items
      - surchargeLines Surcharges
      - priceTotal Total price
    - subvariables List of parts inserted into this variable, if applicable
- files Uploaded images and screenshots
  - camera_0: Screenshot
  - camera_1: Screenshot
  - Additional data, if applicable, such as imprints or uploaded files. The key is the key of the attribute, if assigned; otherwise, it is a random string.
- created_at: Date of creation
- action ID of the button used to save. Must be matched with app.settings.actions.id.
dealerApp A dealer’s settings
- settings Settings
  - logo Dealer’s logo
locale Language, such as de or en
link Link to the configurator
full Complete definition of the configurator; this should not normally be needed

Examples

Outputting a Specific Feature

If you want to output a very specific feature in the PDF, first assign a key to that feature.

tip

To do this, go to your profile (click on the email address in the navigation bar, then select “Profile”) and enable “Developer Mode” there.

The input field for the key will then appear next to a feature. You can choose any key you like here.

For example, if you’ve assigned the key breite to a feature, you can access it as follows:

{% set myVar = cfg.json.summary | filter(l => l.variableKey=='breite') | first %}

{% if myVar %}
<p>{{ myVar.variableLabel }}: {{ myVar.selectionLabel }} Aufpreis: {{ myVar.bom.priceTotal | format_currency('EUR') }} </p>
{% endif %}

Outputting a Specific Camera Image

When you define a camera for order images, the dialog displays the camera’s name, e.g., “Available in the PDF as camera_0.” It can then be displayed in the PDF something like this:

<img src="{{cfg.files.camera_0[0]}}" style="width:15cm; padding-top:0.5cm; border: 1pt solid #DDDDDD"/>

Displaying a User-Uploaded Image

If you have an image attribute and want to display the uploaded image in the PDF, first assign the attribute a key, e.g., baustelle. Then you can write the following in the PDF:

<img src="{{cfg.files.baustelle[0]}}" style="width:15cm; padding-top:0.5cm; border: 1pt solid #DDDDDD"/>

Renaming PDF Files

The names of PDF documents attached to emails or offered for download can be changed:

Open your configurator’s editor.
Click on
Loading...
in the sidebar.
Click the pencil icon next to the block containing the price and “Order” buttons.
Here you can manage the “Order” buttons. Select one.
Under "PDF File Name," enter the desired file names (including the extension .pdf!).
Click on
Loading...

You can perform file name substitutions here. For example, by entering Anfrage-{code}.pdf, the PDF will be named “Anfrage-JHDBSGJ.pdf,” since the configuration code is entered. The following fields can be specified between the {} placeholders:

Field	Meaning
code	Configuration code
app.label	Name of the configurator
app.code	Configurator code
customer.name	Customer’s name
customer.address	Customer’s street and house number
customer.zip	Customer’s ZIP code
customer.city	Customer’s city
customer.email	Customer’s email address
customer.phone	Customer’s phone number
customer.company	Customer’s company
customer.taxID	Customer’s tax ID

Of course, the customer data is only available if it was entered in the contact form.

Download the PDF Directly​

Formatting PDFs​

Which variables are available in the PDF templates?​

Examples​

Outputting a Specific Feature​

Outputting a Specific Camera Image​

Displaying a User-Uploaded Image​

Renaming PDF Files​