In this post, we will discuss the technical aspects of Customer’s Canvas, dwell on different scenarios in which the web-to-print technology is implemented into 3rd party websites, and learn how this process works.
- E-commerce product definitions for specifying elements of every product configured in the system, including pre-designed templates, product options, attributes, etc.
- A database for storing order details.
- An admin panel on the website where print products are configured via the user interface.
- A product catalog (or online storefront), which enables users to browse print products configured in the system and order them with the help of the web-to-print editor.
- Stock templates, which are associated with print products created in the system (with the help of e-commerce product definitions).
- The web-to-print editor, which can load a print product from an e-commerce product definition and enable the user to personalize it.
As a vendor of a web-to-print system marketed as compatible with any 3rd party website, we soon realized that almost every customer contacting us has their own unique implementation scheme of all these components. They are on a mission to find the only missing part that will complete their custom W2P system – a web-to-print editor that can interact seamlessly with their own version of product definitions, admin panel, and product catalog. After weighing all the pros and cons, we designed Customer’s Canvas as a web-to-print editor for supporting design personalization workflows and nothing beyond it. This approach allows us to focus on what we do best – developing pre-press and image processing technologies – and leaving the business logic to the customer.
Where is the boundary between Customer’s Canvas and its host site?
As we have discussed in the previous section, Customer’s Canvas is one element out of six components that constitute a typical e-commerce site. Now, to better understand its concept, let’s see how it relates to a complete user interface for online storefronts.
Normally, when buying printed products from online stores, the process resembles a wizard-like user interface that takes the user step by step until they finally submit their order: you choose a product, you select its attributes (size, color, etc.), you design it online or upload your own pre-made design, you add it to the shopping cart, go through the checkout process, and finally you pay for it. The boundary between Customer’s Canvas and its host e-commerce site lies in that wizard. The part of the ordering workflow where the user loads a selected product into the web-to-print editor, personalizes it, and then attaches the result to the order is actually Customer’s Canvas’s part.
How does Customer’s Canvas integrate into websites?
Customer’s Canvas operates as a dedicated web application and doesn’t affect the host e-commerce site in any way. It doesn’t extend to its database, change any scripts, CSS styles, etc. The editor just exposes an open JavaScript API that enables the host site to communicate with Customer’s Canvas. When embedding the editor into a page where users personalize print products, you just add Customer’s Canvas in an <iframe> and manipulate it with the JavaScript API, which in turn supports the following tasks:
- Displaying the editor on the page, adding as many pages as configured in the product definition, and loading pre-designed templates into them.
- Displaying product pictures and overlays in the editor to help users visualize what completed products will look like.
- Associating specific stock image galleries with certain products.
- Configuring the editor’s look-and-feel to adapt it for a specific product or for a visual theme of the host site, as well as turning on/off user interface features such as gridlines, rulers, zoom, and others.
- Allowing users to manipulate product layers at the design time using JavaScript – changing their size, position, and color; replacing the content of text blocks and image layers; adding new layers and removing existing ones; etc.
- Allowing users to pre-populate products with data passed from the e-commerce site. For example, you may pre-fill a business card template with the user’s personal data from their profile to increase the chance of getting the order completed.
- Saving customers’ projects and allowing them to restore a project whenever they need it.
- Generating hi-res files and proof images for personalized designs.
- Many other tasks can also be supported depending on a business’s unique needs.
A typical personalization workflow implemented with Customer’s Canvas
Summarizing everything that we have learned about the Customer’s Canvas API above, it operates as simply as that – you just load a product along with its page templates into the editor, and the end-user personalizes it. After the user is done changing the product, Customer’s Canvas generates hi-res PDF files and returns them to the online storefront.
However, what is the print product from Customer’s Canvas’s perspective? It’s not just a pre-designed template; the configuration contains all necessary product properties, such as size, number of pages, backgrounds, templates defined for every page, a visual representation of the product displayed in the editor (e.g. a t-shirt picture when creating a t-shirt design), etc. All these properties define what is displayed in the editor at the design time and how the end-user personalizes the product.
Now, you may ask where all these product properties come from? You’ll find the answer in the form of the e-commerce product definitions – in other words, a database of your product catalog with the product data, attributes, and options. When integrating Customer’s Canvas, you typically add something like a “Personalize” button to the product page of your e-commerce system. This button grabs the product information for the product (e.g. the number of pages, standard template, or product dimensions), passes it to Customer’s Canvas, and displays it on the screen. Additionally, you can add a code that receives a link to a PDF file from Customer’s Canvas and submit it along with the order details.
Example - notecards
While integrating Customer’s Canvas, you would add a specification attribute to each card where the link to a design file is stored. Also, you would store a structure that defines a set of standard clipart, backgrounds, and back-side designs, most likely unique for each category. All cards may be complemented with envelopes of different colors. Also, the cards can have additional paid options such as rounded corners, paper texture, etc. All these details are stored in the e-commerce platform, and at the moment your site is about to load the editor on the page, it “knows” all selections that have been made by the user. JavaScript code on your site just translates them into product settings understood by Customer’s Canvas and passes them into the editor via the API.
How do I create print product templates?
Support for product templates is one of the most important features of web-to-print technology. End-users often prefer to personalize stock templates rather than creating products from scratch. It conserves time and allows them to have access to better designs created by professional designers.
Print design templates may have fairly sophisticated multi-layer layouts comprised of single-line text elements, text blocks, image layers, and vector graphics. Moreover, some products may require one to apply specific restrictions to certain layers. Some elements are supposed to be fixed so that users cannot change them, while in other layers customers can only set the content for the layers but cannot change their position, size, or other aspects. The important thing is to make it possible for designers to create templates without knowing anything about programming. Customer’s Canvas solves it in an elegant way – it simply allows designers to create templates in the software they already know very well: Adobe Photoshop. PSD files don’t require any additional pre-processing to be loaded by Customer’s Canvas. It even supports a special mark-up notation for layer restrictions in PSD files to keep designs consistent when being personalized.
Where should you install Customer’s Canvas?
As we have discussed above, Customer’s Canvas is a standalone web application that is hosted separately from the host site. The web-to-print editor is embedded as an <iframe>, which together with the Customer’s Canvas API encapsulating all cross-domain <iframe> communications, deployment and configuration is made easy and straightforward.
Customer’s Canvas should be hosted on a dedicated Windows server or VPS (virtual private server) instance. If you use a Windows platform for the host site, Customer’s Canvas can be deployed to the same server. System requirements for the server are quite modest – a single-CPU Xeon E3-1276 v3 machine with 16Gb of RAM would be enough. Disk storage capacity depends on your business application. The more stock templates you have published on the site and the more orders that are taken from customers, the more space is required to hold all the files.
For customers who are unfamiliar with the Microsoft server platform, Aurigma offers a hosted edition of Customer’s Canvas. Each customer gets a separate instance of the web-to-print editor that integrates into clients’ sites via the same JavaScript API. In this case, you don’t need to bother with server infrastructure and can simply integrate the editor in a way similar to Amazon S3, Google Analytics, or Facebook API.
Personalization workflows of any complexity – from basic user interfaces to multi-step advanced wizards
The requirements for personalization workflows may vary significantly across different products. Some of them may have very basic designers, while others may require very sophisticated user interfaces for online ordering. For example, bundled items fall under the second category when users go through a wizard “constructing” a final product from separate parts of a whole. Each part may require creating a dedicated design that matches a style theme chosen for the entire bundle. Also, some wizard steps may change based on user inputs at previous stages. A good illustration of advanced editor like this would be a solution for ordering wedding bundles comprised of invitations, envelopes, table signs, and more. Workflows for ordering them online may be very sophisticated as the user may choose optional items, change a theme and therefore cause changes to the designs of all products in the bundle, as well as other options depending on the user’s progress through the wizard.
Customer’s Canvas is designed to support personalized products of any complexity: from basic business cards to multi-step wizards with a plethora of choices. Sometimes in the latter case, we suggest adding an additional layer to encapsulate all sophisticated multi-step logic and to expose a higher-level API that the host site will be using to control the ordering process. Aurigma has extensive experience in building advanced editors like these for customers, which in most cases is the money-saving option while also reducing time to market.
If you wonder, what web-to-print solution will fit your business, take a chance to meet our team at Print17 in Chicago. Request a meeting and learn about opportunities that Customer’s Canvas opens for your business.
.png)
