User Manual Quickstart General Concepts Frame Features Resources Style Reference Change Log Glossary Acknowledgements Api Reference Authorization Iframe Api Js Api Getting Started Load options resourcePath and domain div token showBuyerSide templateName api Typescript Basket and User ID Merge templates Passing Buttons to Printess Load in Headless mode Form Fields Access Save and Load Work Creating a Thumbnail Image Backend Api

Load options

api = printess.attachPrintess({
    resourcePath: '', // needs to be always set
    domain: '',
    div: document.getElementById('printess'),
    basketId: 'CurrentShopBasketId',
    shopUserId: 'CurrentShopCustomerId',
    token: 'YOUR TOKEN',
    showBuyerSide: true,
    templateName: 'Sign',

The attachPrintess() call initializes Printess, passes the authentication token and the name of the template to be loaded.

resourcePath and domain

resourcePath: '',
domain: ''

Please be aware that you’ll need to tell Printess the path to its resource files (Web-Assembly and Default Fonts) in a separate property resourcePath. Please do not change this value.

The domain should remain unchanged. It only needs to be changed if you are uing a private Printess cloud.


div: document.getElementById('printess')

In the div property you need to pass a div-element which Printess Editor will attach to. Printess is intended to have as much space as possible, so it is highly recommended to not leave space on left and right side. Especially on mobile.


 token: 'YOUR TOKEN'

token should be set to a Shop-Token which points to yout Printess Account. You can get this token once you are logged in in the Printess Editor -> Account Menu -> API-Token. You’ll see 3 different tokens in the dialog. Please always use the Shop-Token.


showBuyerSide: true

showBuyerSide is a boolean which forces Printes to jump to the buyer-side directly. If you use the shop-token Printess will always show the buyer-side no matter what you pass in that property.


templateName: 'Sign'

templateName is required and specifies the name of the template to load.
templateName can also take the token you received from saveJson() and load it directly.


The return value of the attachPrintess()call holds a reference to to the Printess js-api, your direct link to the Printess Editor. In our example the variable is named api.


If you’re using typescript you’ll find a printess-editor.d.ts file in the repro which contains all types for the printess object.

Basket and User ID

To enable your customer to upload images and to save or load the state of work - you need to pass in minimum a BasketId to printess on attachPrintess().

Optionally you can pass a shopUserId to make Printess store in the context of the current customer (user). Also when the customer uploads an image it will be stored under the shopUserId. So if the customer returns later he or she will see its previous uploaded images.

  basketId: "CurrentShopBasketId",
  shopUserId: "CurrentShopCustomerId"

We are working on a method to assign an existing basketId to a shopUserId in the case the user logs in after he or she has already designed his or her artwork. So you can ensure that even with late sign in or user creation the existing uploaded images are assigned to that customer.

Merge templates

mergeTemplates: [{
  templateName: "motive1";
  spreadIndex: 0; // [optional]

A comonly used approach is to have a master-template with the final dimensions and all the general buyer side settings and the available colors and fonts. And then having multiple artwork-templates which the customer can select directly from the shop-catalog. Lets say the master-template’s is named card and the selected motive’s name is motive1. If you show the Printess editor you can now load card via the templateName property and merge in the template motive1 via then mergeTemplates property.
In spreadIndex you can define spread number where the merged template is placed on. It’s zero based and please keep in mind that on a facing-pages document each pair of pages counts only as a single spread.

Passing Buttons to Printess

Let’s say you want to embedd the-printess editor in full screen mode and just need a button to continue to checkout. You can tell Printess to show a button and receive a callback once it’s pressed. Buttons is actually a list of buttons, so you can pass as many as you like.

buttons: [
    type: "print",
    caption: "Print and continue",
    callback: () => alert("Here I am")

type could be print or callback, whereby “print” will send the current state of work to the Printess back-end in a wait-for-approval state. Both button-types can execute a callback.

caption [optional] is the title displayed in the button

callback [optional] is the function called when the button is pressed