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 Load in Headless mode Full API Reference Enabling the headless mode Avoid space around the template Restrict pan and zoom Form Fields Access Save and Load Work Creating a Thumbnail Image Backend Api

Load in Headless mode

api = printess.attachPrintess({
    resourcePath: 'https://editor.printess.com/printess-editor',
    domain: 'api.printess.com',
    div: document.getElementById('printess'),
    basketId: 'CurrentShopBasketId',
    shopUserId: 'CurrentShopCustomerId',
    token: 'YOUR TOKEN',
    showBuyerSide: true,
    templateName: 'Sign',

    hideControls: true // Enables the headless-mode
  });

api object refernce

For maximum control of the UI you can run printess in headless-mode. This will reduce the editor to a pure view cotainer only showing the layout area and not exposing any toolbar, page-bar or properties-panel.

There are two ways to add the Printess editor to your website.

In most cases the easy approach of using Printess Ui will be the way to go. Just provide a div and let Printess do the heavy lifting. After the buyer has configured its document, you save th work and pass the received ID to your shopping basket. You can also tweak the Ui with CSS.

The second option, Headless mode reduces Printess to a pure view-container which will not expose any Ui other then the editable area. All controls and inputs must be provided by your website. This will give you full control on how your website looks. But you have to handle selection-change and page-change callbacks to update your UI, which in return needs to update Printess properties via the js-api.

You can test drive the headless mode here: https://printesseditor.github.io/getting-started/external.html The sample code in this github repository is a great boilerplate for your own project. It implements a fully fledged UI with the most simple HTML behind it. So its easy to read and to adapt.

Full API Reference

Full Reference can be found here

Enabling the headless mode

hideControls: true

hideControls is a boolean property which is false by default. Set it to true to hide all controls on the Printess Editor.

Avoid space around the template

Especially when you would like to disable zooming and panning in Printess, you might want Printess to exactly frame the template you have loaded. This is where the autoScale parameter is for.

autoScale {
  maxWidth: 500,
  maxHeight: 700
};

autoScale accepts 2 parameters, maxWidth and maxHeight. Both set the maximum expansion the Printess container can occupy. Depending on the aspect ratio of the loaded template the final size will be calculated.

Restrict pan and zoom

When using autoScale you might want disable the possibilty of the user pan and zoom the loaded template. Simply do so by setting the allowZoomAndPan parameter to true.

allowZoomAndPan: true;