> ## Documentation Index
> Fetch the complete documentation index at: https://print.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration

> Full Print.App Editor Configuration

Here, you will find all the parameters, events and methods on the `PrintAppClient` class.
You can find a basic [installation guide here](/docs/api-reference/editor/installation).

This is how to initialize a `PrintAppClient`:

```javascript theme={null}
const printAppInstance = new PrintAppClient({
    ...parameters
});
```

### Parameters

| Property | Type | | Description |
| - | - | - | - |
| `domainKey` | String | - | Your store domainKey. You can fetch this from your [Print.App Admin](https://admin.print.app/domains) |
| `designId` | String | - | The id of the design you want your customer to edit.<br />You can fetch this from the [Designs page](https://admin.print.app/designs). Click the more icon and copy the design. That should also copy the designId into your clipboard. |
| `designList` | Array of strings | - | A list of designId. This is only valid if you want your customers to pick from a list of designs you specify here. The first design is always loaded as default. If this is provided, you can omit the designId parameter |
| `designTemplate` | Object | - | An object describing a sample design source to display when the editor loads. This is optional and only required if you do not want to use a pre-generated designId. [More details](#loading-the-editor-without-a-designid) can be found at the end of this page |
| `projectId` | String | - | This is required if you want to load the editor to edit an existing project. Remember to also set the `mode` to `edit-project` |
| `mode` | String | - | The editor mode. Valid values are:<br />`new-project`: The editor should create a new project using the designId as a template.<br />`edit-project`: You want to edit an existing project. This requires a projectId to be provided |
| `custom` | Boolean | - | Set this to `true` to let the editor know it's a custom installation |
| `autoShow` | Boolean | - | This is used to automatically launch the editor after it initializes, without the customer clicking a customize button. |
| `customValues` | Object | - | Pass additional value-pair data into the editor |
| `langCode` | String | - | Default: `en`<br />The language to load the editor in. This should be a two letter language code following the [ISO 639-1](https://www.loc.gov/standards/iso639-2/php/code_list.php) two-digit language codes.<br />You will find a list of valid [language codes supported by Print.App here](/docs/configuration/specifications/language) |

### Methods

| Name | | Description |
| - | - | - |
| `showApp()` | - | Show the Print.App Editor |
| `closeApp()` | - | Close and hide the Print.App Editor |
| `addEventListener(eventType, function)` | - | Attaches an event listener to the Print.App Editor |
| `removeEventListener(eventType, function)` | - | Removes an eventListener from the Editor |

### Event types

Events are attached to the `PrintAppClient` after initialization using the `addEventListener` method.

```javascript theme={null}
const printAppInstance = new PrintAppClient({
    ...parameters
});

function readyFunction() {
    printAppInstance.showApp();
}
printAppInstance.addEventListener('app:ready', readyFunction);
```

| EventType | | Description |
| - | - | - |
| `app:validation:success` | - | Dispatched when the editor has completed its authentication process.<br />This is the first action the editor makes before being ready to show any design or project.<br />The store configuration is passed down to your event |
| `app:validation:failed` | - | Dispatched when the editor cannot validate the domainKey or the parameters passed are invalid |
| `app:ready` | - | Dispatched when the Editor has initialized and is ready to be shown |
| `app:saved` | - | Dispatched when the customer has clicked the submit button and a project is completely saved.<br />A data object is passed to your function that contains the details of the project and includes the complete project source, projectId and preview images.<br />`addToCart` is `true` when the design has **Add to Cart on Save** turned on. See [Adding to the cart on save](#adding-to-the-cart-on-save). |
| `app:closed` | - | The editor is closed |
| `app:display:changed` | - | Only in the Dialog [Display Mode](/docs/configuration/display-modes): dispatched when the customer expands the editor to full window or shrinks it back.<br />A data object of `{ expanded: Boolean }` is passed to your function. |

## Adding to the cart on save

With **Add to Cart on Save** turned on in a [design's settings](/docs/guides/designs/design-settings), the client
presses the store's Add to Cart button for the customer after the project is saved. It waits for every
`app:saved` listener to finish first, so the project can be attached to the cart line before the add.
A listener that does asynchronous work (posting the project to your server, say) must return its promise,
or the add can happen before that work is done:

```javascript theme={null}
printAppInstance.addEventListener('app:saved', async event => {
    // returned, so the add waits for it
    await saveProjectToMyCart(event.data.projectId);
});
```

If your cart needs something other than a button press, take the add over. Just before it presses the button,
the client dispatches a cancelable `printapp:addtocart` event on `document`. Call `preventDefault()` and do the
add yourself:

```javascript theme={null}
document.addEventListener('printapp:addtocart', event => {
    event.preventDefault();
    const { projectId, data } = event.detail;   // data is the app:saved payload
    myCartPlugin.add({ projectId });
});
```

You can add this script to your store from the **Custom JavaScript** input in your
[store settings](/docs/configuration/settings#store-settings).

If the client cannot find your Add to Cart button, set the **Cart button selector** in your store settings.

## Loading the editor without a designId

This feature allows you to initilize the editor without having an prior design, by describing a design template.

The parameter to pass unto the editor is an object titled `designTemplate`
A sample value is shown in the code below with detailed comments.

```javascript theme={null}
designTemplate: {
	// design unit. possible values are: cm, mm, in, pt, px, ft
	"unit": "cm",

	// an array of pages in the design
	"pages": [
		{
			// page dimensions, bleed and other info
			"width": 20,
			"height": 22,
			"bleed": 0.5,

			// background color
			"background": "transparent",

			// underlay image url
			"underlay": "",

			// overlay image url
			"overlay": "",

			// page margins (if you provide an underlay)
			"offsets": {
				"top": 4,
				"left": 5.6,
				"right": 5.6,
				"bottom": 1.5
			},
		}
	]
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.