Online store integration

• 5 minutes to read

You can integrate Customer's Canvas with online stores to effectively organize sales of personalized products and delegate a wide range of tasks for managing personalization parameters, visualizing and editing product designs online, and storing and processing results.

Personalization workflow

To allow your users to personalize print products, you must first create product templates in Customer's Canvas (either product specifications or PIM products) and associate these templates with product IDs in the e-commerce system (by creating a product reference or passing SKU). This configuration stage is performed through the user interface and will be covered in the Associating products with designs topic.

To start working with the APIs, you need to register your app in your tenant and implement the authentication in your app, as explained in the Authentication in Customer's Canvas article.

You can implement the personalization through the following steps:

1. Your app backend is authorized in Customer's Canvas first, creates a new user session, and gets a token to access the private data storage with personalization results. For an anonymous session, you should create an anonymous user, save the temporary data, and merge this data with the old data by using special endpoint calls when the user logs in. If the user is already registered, Customer's Canvas just connects to the user's storage and can show previous orders to enable a reordering workflow. Anonymous users can become authorized at any time, even during checkout.
2. A customer opens the product page in the store and clicks the Personalize button. Your application passes the product ID or SKU defined in the e-commerce system to Customer's Canvas and loads the editor. Using this product data, Customer's Canvas finds the product design, variants, and links and manages the personalization workflow. You also need to specify the user ID from the e-commerce system that performs the personalization.
3. While the user works on the product design in the editor, a private personalized design is created in private storage associated with this user. "Private" means it has an owner and a special access policy. The Storefront API endpoints work with these private designs.
4. When editing is completed, the editor triggers the onFinish callback, where you need to add the product to the cart and save the personalization results with the private state ID, order info, and links to product previews. This raw data will be used to initiate the project creation at checkout.
5. Now, the customer may return to the second step and personalize another product. In this case, you must also add that product to the shopping cart and save the personalization results.
6. The customer navigates to the shopping cart and clicks Checkout.
7. For each personalized product in the shopping cart, you create a project with the following data:
   • productId - ID that Customer's Canvas uses to find the product.
   • ownerId - ID of the user who personalizes the product and owns the private state.
   • designIds - ID of private state files created during the personalization.

The following sequence diagram illustrates the process.

sequenceDiagram participant E as Your app frontend participant A as Your app backend participant C as Customer's Canvas participant D as Editor E ->> +A : Create user session A ->> C : Authorize app C -->> A : App token A ->> C : Create user A ->> C : Get user token C -->> A : User token A -->> -E : User token Note over E: User clicks Personalize E ->> E : Start personalization (for product ID or SKU) E ->> +C : Get product data C -->> E : Product data E->> C : Get workflow C -->> E : Workflow E -->> E : Process workflow E ->> C : Load product design C ->> -D : Load product design in the editor Note over D: User clicks Finish D ->> +C : Create private design C -->> -D : Design ID D ->> +E : Personalization results E ->> -A : Add product to cart Note over E: User clicks Checkout E ->> +A : Checkout A ->> +C : Create project C -->> -A : Project ID A ->> -C : Download artifacts C -->> A : Artifact binaries (e.g. PDFs)

Roadmap for the integration

To integrate your online store with Customer's Canvas as part of creating your own web-to-print solution, you will need to complete the following key tasks:

1. Register your store. First, you need to link your online store with your account in Customer's Canvas.
2. Associate products with designs. Connect the products available in your online store with the design templates stored in Customer's Canvas.
3. Launch product personalization. Before customers add a product to their shopping cart, they can customize it on your website.
   1. Register a customer. Every customer using your web-to-print service needs to be registered in your Customer's Canvas account.
   2. Process personalization results. For each item in the shopping cart that has been customized, you need to create a project.
4. Download print files. Once customization is complete, you can download the print files for the personalized products.

Some of these tasks can be managed directly within the admin panel of your Customer's Canvas instance, while others might require custom coding on your online store's side.

Customer's Canvas supports dedicated integration options with online stores built with popular e-commerce platforms. Depending on the capabilities and features of the e-commerce platform, you can achieve a certain degree of automation with this integration process. In some cases, there is no need to write any integration code on your part at all.

To solve these integration tasks on the online store side, you can use the Storefront API, Storefront API - Products, and StoreftontJS SDK.

C# example

You can find an example of integrations like this in our demo application.

https://github.com/aurigma/CCHSample-BackOfficeIntegration-aspnetmvc

Refer to Demo 2.