APIs and SDKs Overview

  • 5 minutes to read

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.

Web-to-print scenarios

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.

In Using Personalization Platform services, 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.

Once you get familiarized with this section, 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 Personalization Platform 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.

API

  • Personalization Platform Services - consists of several parts:
    • AssetStorage API - allows for manipulating web-to-print data, such as designs, fonts, images.
    • AssetProcessor API - can be used to import data, generate previews and perform other operations on the data stored in the Asset Storage.
    • StorefrontAPI - intended for the integration with your online store.
    • DesignAtoms 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 Hub. You may use its API if you are using the Design Editor directly (if it is not connected to Customer's Canvas Hub). Also, it includes some useful endpoints that are not available in Backend Services. See more in the About 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.
    • Packaging API - can be used to get details about packaging models, generate die-cut templates, preview 3D models and more.
    • Preflight API - can be used to check the PDF uploaded by the user against the printer's requirements.

Design Atoms SDK

If you are developing with C#, it is also possible to create your own service layer to work with designs. You can do so by using the Design Atoms SDK. It is available as a NuGet package.

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).

Note

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:

  • Design Editor IFrame API - a JavaScript library that embeds our main Design Editor application into your page and allows for configuring and saving it.
  • 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 About UI Framework article.

Design Atoms JavaScript library

In addition, you can also build your own editors using the Design Atoms JavaScript library. You can find it in npm.

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 task, you may still find this SDK useful for certain tasks.

Was this page helpful?
Back to top Copyright © 2001–2024 Aurigma, Inc. All rights reserved.