Printess Editor Integration

The Printess Editor is very simple to integrate into your website in a baseline, out of the box way.

The following chapter will not only teach you how to implement these simple techniques but also dive deeper into ways to make the Printess Integration your very own, utilising parameters and our APIs to build the shop you envision.

Architecture

The Panel-UI is web-component base and very easy to work with for developers. You get full control over the Printess Editor through its API. You can set the initial state of your Editor through the attach parameters, listen to events in with callbacks and manipulate the live state with more API methods.

The Panel-UI also offers much more customization options. You can create themes and remove or move every panel in its position through the Theme Manager.

Getting Started

samples on CodePen

We have created a CodePen profile to provide you with live examples of various use cases.

Basic Integration (recommended):

The most basic and straightforward integration of the panel ui will work like this. Printess will automatically determine screen size and device and attach itself in the foreground when loaded.

You can see a simple, working implementation in our CodePen:

The implementation is as simple as this:

<script type="module">
   const printessLoader = await import("https://editor.printess.com/v/nightly/printess-editor/loader.js");
    const printess = await printessLoader.load({
      token: "[your-shop-token]",
      templateName: "[your-template-name]",
      templateVersion: "published",
      basketId: "Some-Unique-Basket-Or-Session-Id",
      addToBasketCallback: (saveToken, thumbnailUrl) =>
        {
          prompt("Savetoken:", saveToken)
        }
    })
</script>

Custom Div Integration

You also can provide a <div> for Printess to attach itself to. The following example also shows how to show and hide the editor with avoiding interference on your shop site:

Required Attach Parameters

Following are the parameters which are needed to load the Printess Editor, without them the process will fail.

There are more optional attach parameters available - you can use them to personalise your editor integration or achieve more complex workflows.

const printessLoader = await import("https://editor.printess.com/v/nightly/printess-editor/loader.js");

const printessApi = await printessLoader.load({
  token: "[your-shop-token]",
  translationKey: "en",
  templateName: "Baby Photo Book",
  templateVersion: "published",
  basketId: "Some-Unique-Basket-Or-Session-Id",
})

token

 token: "[your-shop-token]"

token should be set to a Shop-Token which points to your Printess account. You can retrieve this token once you are logged in (Printess Editor -> Account Menu -> API-Token). You’ll see 2 different tokens in the dialog. Always use the Shop-Token.

templateName and templateVersion

templateName: 'Baby Photo Book',
templateVersion: "published"

templateName is required and specifies the name of the Template to load. templateName can also take the save-token you received from the back or basket callback and load it directly.

templateVersion can be *draft" oder publish default is published and this is what you always should use in your live shops.

basketId and shopUserId

basketId: "Some-Unique-Basket-Or-Session-Id"

To allow your customer to upload images and save/load their work - you need to set the basketId.

Alternatively you can set a shopUserId to make Printess store the context of the current customer (user) so when the customer uploads an image it will be stored under the shopUserId. Thus, when the customer returns later they will see all of their previously uploaded images.