Launching the personalization process

• 5-6 minutes to read

To create a web-to-print solution integrated with your online store, you must ensure that the personalization process can initialize before adding an item to the shopping cart.

Stages of the personalization process

The personalization process requires consistent implementation of the following actions:

1. Check for binding to specification in Customer's Canvas.

   • cURL
   • HTTP
   • C#
   • TS
   • PHP

   curl -X \
   GET "https://api.customerscanvashub.com/api/storefront/v1/product-specifications/1234" \
   -H  "accept: text/plain" \
   -H  "Authorization: Bearer <TOKEN>"
   

2. Get the personalization workflow for the UI Framework (list of personalization steps, editor configuration, a set of options, etc.) based on the specification.

   • cURL
   • HTTP
   • C#
   • TS
   • PHP

   curl -X \
   GET "https://api.customerscanvashub.com/api/storefront/v1/product-specifications/1234/config" \
   -H  "accept: text/plain" \
   -H  "Authorization: Bearer <TOKEN>"
   

3. Register the customer as a special user of your Customer's Canvas account to create private storage of personalized data (if the customer has already been registered, obtain the required identification information of their private storage).

   • cURL
   • HTTP
   • C#
   • TS
   • PHP

   curl -X \
   POST "https://api.customerscanvashub.com/api/storefront/v1/storefront-users?storefrontId=12" \
   -H  "accept: text/plain" \
   -H  "content-type: application/json-patch+json" \
   -H  "Authorization: Bearer <TOKEN>" \
   -d  "{'storefrontUserId': 'john@wood.com', 'isAnonymous': false}"
   

4. Get an access token for the personalization tool to work with the customer's private storage.

   • cURL
   • HTTP
   • C#
   • TS
   • PHP

   curl -X \
   GET "https://api.customerscanvashub.com/api/storefront/v1/storefront-users/token?john%40wood.com?storefrontId=12" \
   -H  "accept: text/plain" \
   -H  "Authorization: Bearer <TOKEN>"
   

5. Launch the personalization tool in the specified configuration of UI Framework using the access token.

6. Get the personalization results and create a project.

   • cURL
   • HTTP
   • C#
   • TS
   • PHP

   curl -X \
   POST "https://api.customerscanvashub.com/api/storefront/v1/projects?storefrontId=12" \
   -H  "accept: text/plain" \
   -H  "Content-Type: application/json" \
   -H  "Authorization: Bearer <TOKEN>" \
   -d  "{'productReference': 'invitation', 'items': [{ 'designIds': ['642e793dc46d098d64514607', '62da200abb25c5477797d9cb'] }]}"
   

   Here, the designIds array contains private design IDs saved after personalization.

StorefrontJS

For the convenient implementation of this process, you can use the JavaScript library storefront.main.js, which is a part of the Storefront SDK. This library accepts identifiers of the product and the customer of an online store, provides the configuration load, and manages all the necessary calls to the UI Framework to control the personalization process.

This is how you can initialize a storefront, get a product by reference, and load the editor.

// Initialization
const user = {
    // User ID in your application, replace it with yours
    id: "sam.wood", 
    // API access token
    userToken: "yourUserToken"
};

const storefront = new Aurigma.StorefrontJS({
    // Customer's Canvas tenant ID (your account > Settings > Tenant, copy from Tenant ID field)
    tenantId: 1234567,
    // Storefront ID in Customer's Canvas (your account > Settings > Integrations)
    storefrontId: 1392,
    // Customer's Canvas base URL. Depending on your instance region, it is either
    // https://customerscanvashub.com, https://eu.customerscanvashub.com, or https://au.customerscanvashub.com
    cchubUrl: "https://customerscanvashub.com/",
    user: user
});

// Getting an HTML element in which the editor will be inserted
const container = document.getElementById('editor-container');

// A reference to a product in your application that the integration is connected to,
// replace it with yours
const productReference = "invitation";
// Getting details about the product integration
const details = await storefront.getIntegrationDetails(productReference);

// Loading the editor
await storefront.loadEditor(container, details);

// Handling the editing completion event
storefront.onFinish.subscribe(async (storefront, personalizationResults) => {
    alert("Completed");
});

You can also load a product by SKU. In this case, you can get the product details as follows:

const details = await storefront.getIntegrationDetailsBySku(<your-SKU>);

Personalization results

Customer's Canvas launches the personalization process based on a product design. When the user finishes editing this design, Customer's Canvas creates a separate personalized design in this user's private storage that contains all the final edits made by this user. Information about this private design, additional product parameters, and the options selected by the user are the results of personalization.

To get the results of personalization, you can subscribe to the onFinish event. You can save them together with information about the product in the shopping cart in your online store until checkout is completed.

Until the personalization results are saved as a special entity in your Customer's Canvas account, the private design is considered temporary and will be deleted after a specified period.

Thus, if the customer has personalized the product and then abandoned the purchase, the personalization results will not be saved, and the temporary private design will be automatically deleted.

---

You can refer to the BackOffice Integration sample for more details.

Now, let's discuss how you can save and process the personalization results.