Here, you will find all the parameters, events and methods on the PrintAppClient class. You can find a basic installation guide here.

This is how to initialize a PrintAppClient:

const printAppInstance = new PrintAppClient({
    ...parameters
});

​
Parameters

PropertyTypeDescription
domainKeyString-Your store domainKey. You can fetch this from your Print.App Admin
designIdString-The id of the design you want your customer to edit.
You can fetch this from the Designs page. Click the more icon and copy the design. That should also copy the designId into your clipboard.
designListArray 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
designTemplateObject-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 can be found at the end of this page
projectIdString-This is required if you want to load the editor to edit an existing project. Remember to also set the mode to edit-project
modeString-The editor mode. Valid values are:
new-project: The editor should create a new project using the designId as a template.
edit-project: You want to edit an existing project. This requires a projectId to be provided
customBoolean-Set this to true to let the editor know it’s a custom installation
autoShowBoolean-This is used to automatically launch the editor after it initializes, without the customer clicking a customize button.
customValuesObject-Pass additional value-pair data into the editor
langCodeString-Default: en
The language to load the editor in. This should be a two letter language code following the ISO 639-1 two-digit language codes.
You will find a list of valid language codes supported by Print.App here

​
Methods

NameDescription
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.

const printAppInstance = new PrintAppClient({
    ...parameters
});

function readyFunction() {
    printAppInstance.showApp();
}
printAppInstance.addEventListener('app:ready', readyFunction);
EventTypeDescription
app:validation:success-Dispatched when the editor has completed its authentication process.
This is the first action the editor makes before being ready to show any design or project.
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.
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.
app:closed-The editor is closed

​
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.

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
			},
		}
	]
}
Basic Installation