Skip to main content

Starting personalization session

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 -X \
GET "https://api.customerscanvashub.com/api/storefront/v1/product-specifications/1234" \
-H  "accept: text/plain" \
-H  "Authorization: Bearer <TOKEN>"
  1. Get the personalization workflow for the UI Framework (list of personalization steps, editor configuration, a set of options, etc.) based on the specification.
curl -X \
GET "https://api.customerscanvashub.com/api/storefront/v1/product-specifications/1234/config" \
-H  "accept: text/plain" \
-H  "Authorization: Bearer <TOKEN>"
  1. 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 -X \
POST "https://api.customerscanvashub.com/api/storefront/v1/storefront-users?storefrontId=12" \
-H  "accept: text/plain" \
-H  "Content-Type: application/json" \
-H  "Authorization: Bearer <TOKEN>" \
-d '{
    "storefrontUserId": "john@wood.com",
    "isAnonymous": false
}'
  1. Get an access token for the personalization tool to work with the customer's private storage.
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>"
  1. Launch the personalization tool in the specified configuration of UI Framework using the access token.
  2. Get the personalization results and create a project.
curl -X \
POST "https://api.customerscanvashub.com/api/storefront/v1/projects/with-single-item?storefrontId=12" \
-H  "accept: text/plain" \
-H  "Content-Type: application/json" \
-H  "Authorization: Bearer <TOKEN>" \
-d '{
    "productReference": "7846621020300",
    "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 = "7846621020300";
// 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.

note

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

Was this page helpful?