Panel-UI is currently in BETA phase, and subject to change. Please let us know all problems you saw during your integration
This documentation will grow over the next month to cover all aspects of the new Panel-Ui. Still the printess-api is identical in all methods of integration. So whatever you have learned in the other chapters will work with the Panel-Ui as well.
The new Panel-UI is web-component base and much easier to work with from a developer standpoint as with the classic iframe integration.
The Panel-UI also offers much more customization options. You can create themes and remove or move every panel in its position.
Wa have created a new CodePen profile to provide you with live examples of various use cases.
The most basic and straightforward intergration of the panel ui will work like this. Printess wil automatically determine screen size and device and attach itself in the foreground when loaded.
Printess - Panel-Ui Integration
You also can provide a dive where Printess attaches itself to. The following example also shows how to SHOW and HIDE the editor with avoiding intererence on your shop site:
Printess - show and hide editor in custom div
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",
addToBasketCallback: (saveToken, thumbnailUrl) =>
{
prompt("Savetoken:", saveToken)
}
})
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: '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: "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.