Understanding Customer's Canvas
We have provided you with a Customer's Canvas account, so now you are ready to start building your own unique web-to-print solution. Let's find out how you can do this.
The first thing you need to start with is to familiarize yourself with BackOffice - the Customer's Canvas admin panel. It is highly recommended to learn how to create new designs inside BackOffice or import them from Photoshop or InDesign, manage fonts, images and other assets. You will find this information in the user guide.
Another important thing to do is to understand what web-to-print scenario you are going to implement. Different tasks require different tools. Depending on whether you just want to edit a design and save it, connect the editor to an online store to give customers a product personalization tool, or implement variable data printing scenarios, you may need to organize your application in a different way and use different Customer's Canvas APIs and SDKs.
This section is organized in the following way:
- In Typical W2P Scenarios, you can find general approaches of how to implement the most common web-to-print project types. This section gives you a detailed description of your future application and explains which Customer's Canvas APIs and SDKs will work best.
- In Creating a Proof of Concept, you will find the instructions for creating quick prototypes illustrating various web-to-print features and functionality.
Once you get familiarized with these sections, you will be able to dive in the guides and reference for the required APIs and SDKs.
APIs and SDKs
It is important to understand that Customer's Canvas is not a single application. It consists of multiple services and SDKs that can be used for various web-to-print tasks.
For backend developers
For the backend developer, Customer’s Canvas offers several services that allow for managing data, integrating with e-commerce platforms, rendering previews, proofs and print files, as well as carrying out other tasks.
Here is a quick overview.
- Backend Services - consists of several parts:
- Asset Storage API - allows for manipulating web-to-print data, such as designs, fonts, images.
- Asset Processor API - can be used to import data, generate previews and perform other operations on the data stored in the Asset Storage.
- Storefront API - intended for the integration with your online store.
- Design Atoms API - useful if you would like to create your own editor.
- Web-to-print Applications connected to the backend:
- Design Editor API. Design Editor is the main editor application connected to the Customer's Canvas backend. You may use its API if you are using the Design Editor directly (if it is not connected to Customer's Canvas). Also, it includes some useful endpoints that are not available in Backend Services. See more in the Design Editor documentation.
- Dynamic Image API - you may use it to generate photo realistic preview images of your products by applying a design to a PSD mockup image.
- Preflight API - can be used to check the PDF uploaded by the user against the printer's requirements.
Design Atoms SDK
Here are several examples of tasks it can help with:
- Create a design from scratch or generate it with certain rules.
- Import designs from various source formats.
- Render print files or proof images on your server.
- Manipulate design elements, for example, by populating texts with data or changing colors and other properties.
Unlike Design Atoms API service mentioned above, this library runs as a part of your application on your server (so, no remote calls to our servers are made).
This SDK refers unmanaged assemblies, so it can only run on Windows. Also, additional licensing fees may be applied per each machine where you run the code that uses Design Atoms SDK.
For frontend developers
On the frontend, you want to show the user an editor where they can, for example, personalize the design of a product listed in your account or create new design for future product from scratch. Moreover, in most cases, a design editing tool is not the only thing you need to worry about. If you are integrating it with an online store, you may need to organize the whole ordering process depending on the product category.
For example, your products may require the user to choose some options or variations, such as a material, color, or shape. You may want to edit multiple products in a single order, like a postcard with an envelope. It gets more complicated if you have to offer different product types on a single website.
Design Editor IFrame API and UI Framework
Let's see how Customer's Canvas can help on the frontend:
- UI Framework SDK - a framework that allows for describing various editors in a single JSON file, which allows you to integrate very different editing workflows in an unified way.
The former is a great choice if you just want to show the editor on a screen without integrating it with an e-commerce platform. The latter is recommended for integration with online stores and other more complicated scenarios. It supports multiple widgets, including:
- Design Editor - a wrapper around the Design Editor IFrame that displays the editor.
- Preflight - loads a preflight tool - a user interface on top of the Preflight API mentioned above.
- Data upload widget used in a variable data printing scenario.
- 3d Model Viewer used in the packaging solution.
- Image viewers, HTML, and various UI elements.
For a better understanding of UI Framework, read the UI Framework article.
In addition, you can also build your own editors using the
It consists of several important parts:
- Design Atoms Model - a data structure describing a design. It gives you access to its surfaces (pages), containers (layers) and elements.
- Viewer control - a visual control that displays a design model on a screen and allows for manipulations.
- Commands - a library that encapsulates the most popular operations used in the designs.
Although creating a custom editor may be a complicated tasks, you may still find this SDK useful for certain tasks.
In the next section, we will learn more about Backend Services.