This document provides a structured reference for the public JavaScript methods exposed by the Artifi Designer. Use it as a knowledge base for initialization, product updates, preview workflows, cart integration, and canvas interactions.
1. Method Reference
1.1 Artifi.initialize(initializeConfig)
Initializes the Artifi Designer and loads the product configuration. This method must be called before invoking any other Artifi API.
Signature
window.Artifi.initialize(initializeConfig: InitializeConfigType)
Parameters
Parameter | Type | Required | Description |
websiteId | string | Yes | Unique identifier for the website/store |
webApiClientKey | string | Yes | API key for authenticating Artifi API requests |
userId | string | Yes | Current user ID (logged-in or guest) |
sku | string | Yes | Product SKU to load |
isGuest | boolean | Yes | true for guest users, false otherwise |
designId | number | Yes | Existing design ID (0 for new design) |
extraDetails | string | ❌ | Additional metadata (e.g., JSON string) |
appMode | string | ❌ | Mode such share design |
decorationCode | string | ❌ | Pre-selected decoration method |
Example
window.Artifi.initialize({
websiteId: "site_001",
webApiClientKey: "your-api-key",
userId: "user_123",
sku: "PROD-SKU-001",
isGuest: false,
designId: 0,
extraDetails: "",
appMode: ""
});
Events Fired after initialize method called
Event | Description |
artifi-initialized | Initialization completed successfully |
ArtifiCriticalError | Initialization failed (event.detail contains error) |
artifi-launching-error | Config API call failure |
Event Listener
artifi-initialized
Description: This event is triggered when the Artifi application is initialized successfully.
Event Handler:
window.addEventListener("artifi-initialized", function (e) {
//Your code will go here
});
artifi-launching-error
Description: This event is triggered when an error occurs during the launching of the Artifi application.
Event Handler:
window.addEventListener("artifi-launching-error", function (e) {
//Your code will go here
});
Sample Error Details:artifi-launching-error
{
"message":"Invalid website id."
}
1.2 Artifi.changeSKU(sku)
Updates the product SKU without reinitializing the designer.
Signature
window.Artifi.changeSKU(sku: string)
Parameters
Parameter | Type | Required | Description |
sku | string | ✅ | New product SKU |
Example
window.Artifi.changeSKU("PROD-SKU-002");
Events fired after SKU changed
Event | Description |
artifi-sku-changed | SKU updated successfully |
Event Listener
artifi-sku-changed
Description: This event is triggered when the SKU (stock keeping unit) of a product in the Artifi application is changed.
Event Handler:
window.addEventListener("artifi-sku-changed", function (e) {
//Your code will go here
});
Sample Data:
sku changed
{
"data":"TX7AW"
}
1.3 Artifi.changeDecorationMethod()
Switches the decoration method applied to the product.
Signature
window.Artifi.changeDecorationMethod(decorationCode: string, isDesignPersist?: boolean)
Parameters
Parameter | Type | Required | Description |
decorationCode | string | Yes | Decoration method code |
isDesignPersist | boolean | No | Preserve existing design (true / false) |
Events Fired After decoration method changed
Event | Description |
artifi-decoration-method-changed | Decoration method updated |
Example
// Without preserving design
window.Artifi.changeDecorationMethod("EMB");
// Preserve current design
window.Artifi.changeDecorationMethod("SCREEN", true);
1.4 Artifi.addToCart()
Triggers the Add to Cart flow and returns customization data.
Signature
window.Artifi.addToCart()
Events fired after Add to Cart method called
Event | Description |
artifi-add-to-cart-initialize | Processing started |
artifi-add-to-cart-success | Completed successfully |
artifi-add-to-cart-error | Error occurred |
Event Listener
Event: "artifi-add-to-cart-initialize"
Description: This event is triggered when the "Add to Cart" process is initialized in the Artifi application.
Event Handler:
window.addEventListener("artifi-add-to-cart-initialize", function (e) {
//Your code will go here
});
Event: "artifi-add-to-cart-success"
Description: This event is triggered when the "Add to Cart" process is successfully completed in the Artifi application.
Event Handler:
window.addEventListener("artifi-add-to-cart-success", function (e) {
//Your code will go here
});
Sample Data:
artifi-add-to-cart-success
{
"productDetails":{
"designId":43332248,
"userId":16789807,
"orderStatus":"InProgress",
"productName":"",
"productCode":"",
"sku":"DIARY-MRN",
"imprintColorLimit":0,
"productAttribute":[
{
"name":"Diary Attribute",
"code":"Diary Attribute",
"selectedValue":{
"value":"Maroon",
"valueCode":"Maroon",
"keyValue":"#663e3e"
}
}
],
"customAttribute":[
{
"name":"",
"code":"",
"selectedValue":{
"value":"",
"valueCode":"",
"keyValue":""
}
}
],
"colorAttribute":[
],
"previewUrl":"https://designer.artifi.net//Preview?productCode=DIARY-MRN&userId=847&websiteId=170&webApiClientKey=d94f671d-10f0-4e8b-bef2-2c70945d52e2&customizedProductId=43332248",
"isRequestProof":false
},
"designDetails":{
"views":[
{
"viewName":"Front",
"viewCode":"102506",
"decorationMethodCode":"Default",
"previewStandardUrl":"https://designer.artifi.net/Designer/Services/GetPreviewImage?websiteId=170&webApiClientKey=d94f671d-10f0-4e8b-bef2-2c70945d52e2&customizedProductId=43332248&viewId=102506&isThumbnail=False",
"previewThumbnailUrl":"https://designer.artifi.net/Designer/Services/GetPreviewImage?websiteId=170&webApiClientKey=d94f671d-10f0-4e8b-bef2-2c70945d52e2&customizedProductId=43332248&viewId=102506&isThumbnail=True",
"image":[
{
"imageType":"Clipart",
"id":49907,
"widgetKey":"",
"color":"",
"selectedColors":[
],
"embroideryData":{
"stitchCount":"",
"colorCount":"",
"threads":""
},
"clipartNote":"",
"clipartCode":"49907",
"clipartName":"Amla",
"originalUrl":"",
"standardUrl":"",
"thumbnailUrl":"",
"originalFileName":"",
"originalFileMimeType":""
}
],
"text":[
{
"id":"text_1",
"widgetKey":"",
"embroideryDatax":{
"stitchCount":0,
"colorCount":0,
"threads":""
},
"text":"Sample text",
"textSrc":"https://designerimages.artifi.net/UserPhoto/0e8a78b2-eea3-475e-b38c-b3ea2b606926/Photos/Output/SVG/a94b118a-dc4d-4dbc-b0c8-394e19f57509.svg",
"fontSize":"50",
"fontSizeInInches":"2.27",
"fontCode":"ACDF002",
"fontFamily":"Arimo",
"color":"#000000",
"colorCode":"BL",
"colorName":"Black",
"textAlign":"center",
"vAlign":"middle"
}
]
},
{
"viewName":"Back",
"viewCode":"102507",
"decorationMethodCode":"Default",
"previewStandardUrl":"https://designer.artifi.net/Designer/Services/GetPreviewImage?websiteId=170&webApiClientKey=d94f671d-10f0-4e8b-bef2-2c70945d52e2&customizedProductId=43332248&viewId=102507&isThumbnail=False",
"previewThumbnailUrl":"https://designer.artifi.net/Designer/Services/GetPreviewImage?websiteId=170&webApiClientKey=d94f671d-10f0-4e8b-bef2-2c70945d52e2&customizedProductId=43332248&viewId=102507&isThumbnail=True",
"image":[
],
"text":[
]
}
],
"groupViews":[
]
},
"outputDetails":{
"pdfUrl":""
}
}
Event: "artifi-add-to-cart-error"
Description: This event is triggered when an error occurs during the "Add to Cart" process in the Artifi application.
Event Handler:
window.addEventListener("artifi-add-to-cart-error", function (e) {
//Your code will go here
});
1.5 Artifi.openPreviewInPopup(integrationValues)
Open the product preview in a new popup window.
Signature
window.Artifi.openPreviewInPopup(integrationValues)
IntegrationValues
Parameter | Type | Required | Description |
websiteId | string | Yes | Website identifier |
webApiClientKey | string | Yes | API key |
designId | number | Yes | Design ID |
userId | string | Yes | User ID |
sku | string | Yes | Product SKU |
width | number | No | Popup width (default: 500) |
height | number | No | Popup height (default: 500) |
Example
window.Artifi.openPreviewInPopup({
websiteId: "site_001",
webApiClientKey: "your-api-key",
designId: 987,
userId: "user_123",
sku: "PROD-SKU-001",
width: 800,
height: 600
});
1.6 Artifi.startOver()
Resets the designer and removes all customizations.
Signature
window.Artifi.startOver()
Events Fired
Event | Description |
artifi-start-over-initialized | Reset operation started |
Example
window.Artifi.startOver();
1.7 Artifi.removeWidgetSelection()
Deselects the currently selected widget in the canvas.
Signature
window.Artifi.removeWidgetSelection()
Events Fired
Event | Description |
artifi-widget-deselected | Widget deselected |
Example
window.Artifi.removeWidgetSelection();
Event Listener
Event:"artifi-widget-deselected"
Description: This event is triggered when deselecting the currently selected widget in the canvas.
Event Handler:
window.addEventListener("artifi-widget-deselected", function (e) {
//Your code will go here
});
2. Event Listener
Events the need to be listener on ecommerce applications based on the interaction with Artifi.
2.1 Event: "artifi-widget-added"
Description: This event is triggered when a widget is added to the Artifi application.
Event Handler:
window.addEventListener("artifi-widget-added", function (e) {
//Your code will go here
});
Sample Data:
Add Text Widget event listener response
artifi-widget-added
{
"widgetData":{
"id":"text_1",
"type":"textbox",
"ruleId":410221,
"cornerStyle":"circle",
"text":"demo",
"fill":"#000000",
"fontSize":26,
"originalFontSize":26,
"fontStyle":"normal",
"fontWeight":"normal",
"height":32,
"width":76,
"angle":0,
"left":346.6666666666667,
"top":166.66666666666666,
"stroke":null,
"strokeWidth":1,
"textAlign":"center",
"fontFamily":"Chalet-NewYorkNineteenSixty",
"originX":"center",
"originY":"center",
"libProp":{
"FontId":3193
},
"vAlign":"middle",
"lineHeight":1,
"textDecoration":"none",
"lockRotation":false,
"hasRotatingPoint":true,
"selectable":true,
"lockScalingX":false,
"lockScalingY":false,
"lockMovementX":false,
"lockMovementY":false,
"borderColor":"white",
"cornerColor":"#8ce7f3",
"cornerSize":20,
"transparentCorners":false,
"visible":true,
"custom_key":"",
"price_key":"",
"group_key":"",
"opacity":1,
"hasControls":true,
"hasBorders":true,
"applyOneColorImprint":true,
"isAutoFontSizeAllow":false,
"widget_key":"",
"textSrc":"",
"scaleX":1,
"scaleY":1
}
"viewId":361209
}
Add Image Widget event listener response
artifi-widget-added
{
"widgetData":{
"id":"image_6",
"ruleId":410106,
"cornerStyle":"circle",
"type":"image",
"filters":[
],
"height":95.5,
"width":100,
"angle":0,
"left":280,
"top":170,
src":"https://integrationdesignerimages.artifi.net/UserPhoto/cbb42ec71c31-42da-b522-483a30fdb654/Photos/Standard/7076c725-654d-4d80-84d-1ea0db60522f.png"
"originX":"center",
"originY":"center",
"libProp":{
"photoId":332378,
"ClipartId":null
},
"scaleX":1,
"scaleY":1,
"originalUrl":"https://integrationdesignerimages.artifi.net/UserPhoto/cbb42ec7-1c31-42da-b522-483a30fdb654/Photos/Original/7076c725-654d-4d80-84d9-1ea0db60522f.png",
"lockRotation":false,
"hasRotatingPoint":true,
"selectable":true,
"lockScalingX":false,
"lockScalingY":false,
"lockMovementX":false,
"lockMovementY":false,
"borderColor":"white",
"cornerColor":"#8ce7f3",
"cornerSize":20,
"transparentCorners":false,
"canDelete":true,
"canRotate":true,
"canEdit":true,
"widgetBorder":false,
"visible":true,
"custom_key":"",
"price_key":"",
"group_key":"",
"hasControls":true,
"opacity":1,
"customFilters":[
],
"applyOneColorImprint":true,
"uniqueName":"7076c725-654d-4d80-84d9-1ea0db60522f.png",
"originalWidth":2400,
"originalHeight":2292,
"printImage":"",
"allowAsAProductImage":false,
"widget_key":"Graphic Widget",
"crossOrigin":"anonymous",
"PreserveImageAspectRatio":false,
"PreserveWidgetAspectRatio":true
},
"viewId":361209
}
2.2 Event: "artifi-widget-updated"
Description: This event is triggered when a widget in the Artifi application is updated.
Event Handler:
window.addEventListener("artifi-widget-updated", function (e) {
//Your code will go here
});
Sample Data:
artifi-widget-updated
{
"id":"text_1",
"type":"textbox",
"ruleId":410221,
"cornerStyle":"circle",
"text":"demo 123",
"fill":"#000000",
"fontSize":26,
"originalFontSize":26,
"fontStyle":"normal",
"fontWeight":"normal",
"height":32,
"width":76,
"angle":0,
"left":346.6666666666667,
"top":166.66666666666666,
"stroke":null,
"strokeWidth":1,
"textAlign":"center",
"fontFamily":"Chalet-NewYorkNineteenSixty",
"originX":"center",
"originY":"center",
"libProp":{
"FontId":3193
},
"vAlign":"middle",
"lineHeight":1,
"textDecoration":"none",
"lockRotation":false,
"hasRotatingPoint":true,
"selectable":true,
"lockScalingX":false,
"lockScalingY":false,
"lockMovementX":false,
"lockMovementY":false,
"borderColor":"white",
"cornerColor":"#8ce7f3",
"cornerSize":20,
"transparentCorners":false,
"visible":true,
"custom_key":"",
"price_key":"",
"group_key":"",
"opacity":1,
"hasControls":true,
"hasBorders":true,
"applyOneColorImprint":true,
"isAutoFontSizeAllow":false,
"widget_key":"",
"textSrc":"",
"scaleX":1,
"scaleY":1,
"PreserveImageAspectRatio":false,
"PreserveWidgetAspectRatio":false,
"fontSizeMultiplier":1.1923076923076923
}
Description: This event is triggered when the view in the Artifi application is changed.
Event Handler:
window.addEventListener("artifi-view-changed", function (e) {
//Your code will go here
});
2.4 artifi-design-updated
Description: This event is triggered whenever the design on the canvas is modified. It indicates that one or more design elements have been added, updated or removed, allowing the ecommerce application to capture the latest design details and perform any required actions.
Event Handler:
window.addEventListener("artifi-design-updated", function (e) {
//Your code will go here
});
The event returns the latest design information in JSON format.
The JSON includes information such as:
{
"data": {
"sku": "DIARY-MRN",
"productAttribute": [
{
"name": "Diary Attribute",
"code": "Diary Attribute",
"displayName": "Color",
"selectedValue": {
"value": "Maroon",
"valueCode": "Maroon",
"keyValue": "#663e3e"
}
}
],
"colorAttribute": [],
"decorationMethodCode": "Default",
"views": [
{
"viewCode": "102506",
"text": [
{
"widgetKey": "",
"id": "text_1",
"text": "Sample text",
"fontFamily": "Arimo",
"fontSize": "50",
"fontCode": "ACDF002",
"color": "#bd343b",
"fontWeight": "normal",
"fontStyle": "normal",
"textAlign": "center",
"noOfTextLines": 1
}
],
"image": [
{
"widgetKey": "",
"clipartId": 49907,
"clipartCode": "",
"photoId": null,
"color": "",
"id": "image_1",
"selectedColors": []
}
]
},
{
"viewCode": "102507",
"text": [],
"image": []
}
]
},
"action": "artifi-design-updated"
}
2.5 artifi-share-design-success
Description: This event is triggered when the customized design has been successfully generated and the shareable design link is available. It indicates that the design is ready to be shared with the user
Event Handler:
window.addEventListener("artifi-share-design-success", function (e) {
// Your code will go here
});
2.6 artifi-share-design-error
Description: This event is triggered when an error occurs while generating the customized design details or creating the shareable design link. It indicates that the design could not be prepared for sharing, allowing the host application to handle the error
Event Handler:
window.addEventListener("artifi-share-design-error", function (e) {
// Your code will go here
});
2.7 artifi-change-decoration-method
Description: This event is triggered whenever the decoration method is changed within the customization experience. It indicates that the user has selected a different decoration method (such as embroidery, screen printing, or Laser), allowing the ecommerce application to update related business logic accordingly.
Event Handler:
window.addEventListener("artifi-change-decoration-method", function (e) {
// Your code will go here
});
2.8 artifi-design-saved
Description: This event is triggered when the current design is successfully saved. It indicates that the design has been for future retrieval.
Event Handler:
window.addEventListener("artifi-design-saved", function (e) {
// Your code will go here
});
2.9 artifi-design-applied
Description: This event is triggered when a previously saved design is applied to the product for customization. It indicates that the saved design has been successfully loaded onto the canvas.
Event Handler:
window.addEventListener("artifi-design-applied", function (e) {
// Your code will go here
});
2.10 artifi-convert-to-single-color
Description:
This event is triggered when the user converts a multi-color graphic to a single imprint color by selecting a color from the imprint color list. It indicates that the graphic has been updated to use a single color
Event Handler:
window.addEventListener("artifi-convert-to-single-color", function (e) {
// Your code will go here
});