Artifi JS Events Integration

Artifi provides a set of custom browser events that allow the host application to respond to user interactions within the personalization interface. These events enable real-time communication between the Artifi application and eCommerce platform. 
 
Developers can listen to these events using the standard window.addEventListener method and perform necessary actions such as updating UI, capturing data, or triggering backend APIs. 
 
These events help you build a fully interactive and responsive integration between Artifi and eCommerce platform.

Notes

  • Ensure event listeners are registered after Artifi initialization.
  • Avoid duplicate event registrations to prevent multiple triggers.

Events from Artifi

1. Event: "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 

}); 

 

2. Event: "artifi-launching-error" 

Description: This event is triggered when an error occurs during the launch of the Artifi application. 

Event Handler: 

window.addEventListener("artifi-launching-error"function (e) { 

      //Your code will go here 

});  

Sample Data:     

artifi-launching-error 
{ 

"message":"Invalid website id." 

} 

Note: In event response message will be different for different errors

3. Event: "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":"DIARY-BLK" 

} 


4. 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":221148, 

"cornerStyle":"circle", 

"text":"Sample text", 

"fill":"#000000", 

"fontSize":"50", 

"originalFontSize":26, 

"fontStyle":"normal", 

"fontWeight":"normal", 

"height":56, 

"width":250, 

"angle":0, 

"left":174, 

"top":420.1778, 

"stroke":"#ffffff", 

"strokeWidth":1, 

"textAlign":"center", 

"fontFamily":"Arimo", 

"originX":"center", 

"originY":"center", 

"libProp":{ 

 

}, 

"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, 

"viewId":102506, 

"borderScaleFactor":2, 

"visible":true, 

"custom_key":"", 

"price_key":"", 

"group_key":"", 

"opacity":1, 

"hasControls":true, 

"hasBorders":true, 

"applyOneColorImprint":true, 

"isAutoFontSizeAllow":false, 

"widget_key":"", 

"textSrc":"https://designerimages.artifi.net/UserPhoto/0e8a78b2-eea3-475e-b38c-b3ea2b606926/Photos/Output/SVG/2b24a06b-af2e-4b77-8736-c708c96ff1c4.svg", 

"scaleX":1, 

"scaleY":1, 

"flipX":false, 

"flipY":false, 

"textType":"NormalText", 

"circleText":"", 

"radius":0, 

"startAngle":0 

}, 

"viewId":102506, 

"effectSrc":"" 

} 

Add Image Widget event listener response 

User Uploaded Image JSON 

artifi-widget-added 

{ 

"widgetData":{ 

"id":"image_1", 

"ruleId":221153, 

"cornerStyle":"circle", 

"type":"image", 

"filters":[ 

], 

"height":78.84375, 

"width":174, 

"angle":0, 

"left":174, 

"top":420.1778, 

"src":"https://designerimages.artifi.net/UserPhoto/0e8a78b2-eea3-475e-b38c-b3ea2b606926/Photos/Standard/2026/6/2026_6_8cc14c7f-285a-4148-ade0-1fc82de522af.png", 

"originX":"center", 

"originY":"center", 

"libProp":{ 

"photoId":7212715, 

"ClipartId":null, 

"ClipartFamilyId":null 

}, 

"scaleX":1, 

"scaleY":1, 

"originalUrl":"https://designerimages.artifi.net/UserPhoto/0e8a78b2-eea3-475e-b38c-b3ea2b606926/Photos/Original/2026/6/2026_6_8cc14c7f-285a-4148-ade0-1fc82de522af.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, 

"viewId":102506, 

"borderScaleFactor":2, 

"visible":true, 

"custom_key":"", 

"price_key":"", 

"group_key":"", 

"hasControls":true, 

"opacity":1, 

"customFilters":[ 

{ 

 

} 

], 

"applyOneColorImprint":true, 

"uniqueName":"2026_6_8cc14c7f-285a-4148-ade0-1fc82de522af.png", 

"originalWidth":1024, 

"originalHeight":464, 

"printImage":"", 

"allowAsAProductImage":false, 

"widget_key":"", 

"flipX":false, 

"flipY":false, 

"effectSrc":"", 

"crossOrigin":"anonymous", 

"PreserveImageAspectRatio":false, 

"PreserveWidgetAspectRatio":true 

}, 

"viewId":102506, 

"effectSrc":"" 

} 

Clipart added JSON 

{ 

"widgetData":{ 

"id":"image_2", 

"ruleId":221153, 

"cornerStyle":"circle", 

"type":"image", 

"filters":[ 

], 

"height":79.38017324350336, 

"width":174, 

"angle":0, 

"left":174, 

"top":420.1778, 

"src":"https://images.artifi.net/UserImages/0e8a78b2-eea3-475e-b38c-b3ea2b606926/37bab54a-03fa-4cc5-8cc1-fed78c27cfbe/Cliparts/Standard/ee4926ce-2434-42a2-88fe-2714800dc8e8.png", 

"originX":"center", 

"originY":"center", 

"libProp":{ 

"ClipartId":49907, 

"photoId":null, 

"ClipartFamilyId":2329 

}, 

"scaleX":1, 

"scaleY":1, 

"originalUrl":"https://images.artifi.net/UserImages/0e8a78b2-eea3-475e-b38c-b3ea2b606926/37bab54a-03fa-4cc5-8cc1-fed78c27cfbe/Cliparts/Original/ee4926ce-2434-42a2-88fe-2714800dc8e8.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, 

"viewId":102506, 

"borderScaleFactor":2, 

"visible":true, 

"custom_key":"", 

"price_key":"", 

"group_key":"", 

"hasControls":true, 

"opacity":1, 

"customFilters":[ 

{ 

 

} 

], 

"applyOneColorImprint":true, 

"uniqueName":"ee4926ce-2434-42a2-88fe-2714800dc8e8.png", 

"originalWidth":2078, 

"originalHeight":948, 

"printImage":"", 

"allowAsAProductImage":false, 

"widget_key":"", 

"flipX":false, 

"flipY":false, 

"effectSrc":"", 

"crossOrigin":"anonymous", 

"PreserveImageAspectRatio":false, 

"PreserveWidgetAspectRatio":true 

}, 

"viewId":102506, 

"effectSrc":"" 

} 

5. 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: 

Text 

artifi-widget-updated  

{ 

"id":"text_1", 

"type":"textbox", 

"ruleId":221148, 

"cornerStyle":"circle", 

"text":"Sample", 

"fill":"#000000", 

"fontSize":"50", 

"originalFontSize":26, 

"fontStyle":"normal", 

"fontWeight":"normal", 

"height":56, 

"width":163, 

"angle":0, 

"left":166.09, 

"top":69.99, 

"stroke":"#ffffff", 

"strokeWidth":1, 

"textAlign":"center", 

"fontFamily":"Arimo", 

"originX":"center", 

"originY":"center", 

"libProp":{ 

 

}, 

"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, 

"viewId":102506, 

"borderScaleFactor":2, 

"visible":true, 

"custom_key":"", 

"price_key":"", 

"group_key":"", 

"opacity":1, 

"hasControls":true, 

"hasBorders":true, 

"applyOneColorImprint":true, 

"isAutoFontSizeAllow":false, 

"widget_key":"", 

"textSrc":"https://designerimages.artifi.net/UserPhoto/0e8a78b2-eea3-475e-b38c-b3ea2b606926/Photos/Output/SVG/8361651c-d13a-4c59-9209-660be52a8fbe.svg", 

"scaleX":1, 

"scaleY":1, 

"flipX":false, 

"flipY":false, 

"textType":"NormalText", 

"circleText":"", 

"radius":0, 

"startAngle":0, 

"PreserveImageAspectRatio":false, 

"PreserveWidgetAspectRatio":false, 

"fontSizeMultiplier":1.13, 

"isTextValid":true, 

"dirty":true, 

"effectSrc":"" 

} 

Uploaded image 

artifi-widget-updated 

{ 

"id":"image_1", 

"ruleId":221153, 

"cornerStyle":"circle", 

"type":"image", 

"filters":[ 

], 

"height":78.84375, 

"width":174, 

"angle":0, 

"left":172.02, 

"top":193.35, 

"src":"https://designerimages.artifi.net/UserPhoto/0e8a78b2-eea3-475e-b38c-b3ea2b606926/Photos/Output/Standard/2026/6/2026_6_ccaec091-29e9-4107-b846-8153d97e52c7.png", 

"originX":"center", 

"originY":"center", 

"libProp":{ 

"photoId":7212715, 

"ClipartId":null, 

"ClipartFamilyId":null 

}, 

"scaleX":1, 

"scaleY":1, 

"originalUrl":"https://designerimages.artifi.net/UserPhoto/0e8a78b2-eea3-475e-b38c-b3ea2b606926/Photos/Original/2026/6/2026_6_8cc14c7f-285a-4148-ade0-1fc82de522af.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, 

"viewId":102506, 

"borderScaleFactor":2, 

"visible":true, 

"custom_key":"", 

"price_key":"", 

"group_key":"", 

"hasControls":true, 

"opacity":1, 

"customFilters":[ 

{ 

 

}, 

{ 

"subType":"RemoveAll", 

"type":"RemoveAll", 

"color":"#ffffff" 

} 

], 

"applyOneColorImprint":true, 

"uniqueName":"2026_6_8cc14c7f-285a-4148-ade0-1fc82de522af.png", 

"originalWidth":174, 

"originalHeight":78.84375, 

"printImage":"", 

"allowAsAProductImage":false, 

"widget_key":"", 

"flipX":false, 

"flipY":false, 

"effectSrc":"", 

"crossOrigin":"anonymous", 

"PreserveImageAspectRatio":false, 

"PreserveWidgetAspectRatio":true 

} 

 
Clipart 

artifi-widget-updated 

{ 

"widgetData":{ 

"id":"image_2", 

"ruleId":221153, 

"cornerStyle":"circle", 

"type":"image", 

"filters":[ 

], 

"height":79.38017324350336, 

"width":174, 

"angle":0, 

"left":174, 

"top":420.1778, 

"originX":"center", 

"originY":"center", 

"libProp":{ 

"ClipartId": 2563790, 

"photoId":null, 

"ClipartFamilyId":2329 

}, 

"scaleX":1, 

"scaleY":1, 

"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, 

"viewId":102506, 

"borderScaleFactor":2, 

"visible":true, 

"custom_key":"", 

"price_key":"", 

"group_key":"", 

"hasControls":true, 

"opacity":1, 

"customFilters":[ 

{ 

 

} 

], 

"applyOneColorImprint":true, 

"uniqueName":"ee4926ce-2434-42a2-88fe-2714800dc8e8.png", 

"originalWidth":2078, 

"originalHeight":948, 

"printImage":"", 

"allowAsAProductImage":false, 

"widget_key":"", 

"flipX":false, 

"flipY":false, 

"effectSrc":"", 

"crossOrigin":"anonymous", 

"PreserveImageAspectRatio":false, 

"PreserveWidgetAspectRatio":true 

}, 

"viewId":102506, 

"effectSrc":"" 

} 

6. Event: "artifi-view-changed" 

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 

  });  

 

Sample Data 

artifi-view-changed 

{ 

"Name":"Back", 

"ImageUniqueName":"a964ee66-5f0b-4c41-b06f-8c4bf473c8dd.jpg", 

"IsPublic":false, 

"CanvasWidth":"348", 

"CanvasHeight":"840.3556", 

"PrintWidth":"270", 

"PrintHeight":"652", 

"CanvasX":"200", 

"CanvasY":"80", 

"TemplateCode":"Print|Deboss|Emboss", 

"DisplayImageUniqueName":null, 

"DisplayImageUrl":null, 

"DisplayName":null, 

"Id":102507, 

"ConstraintsJson":{ 

"WidgetConstraints":[ 

{ 

"Type":"textbox", 

"RuleId":221148, 

"RuleName":"Diary Text", 

"IsPublic":true, 

"IsGlobalRuleUsed":false, 

"Properties":null 

}, 

{ 

"Type":"image", 

"RuleId":221153, 

"RuleName":"Diary Image", 

"IsPublic":true, 

"IsGlobalRuleUsed":false, 

"RuleLinkedData":{ 

 

} 

} 

], 

"AppConstraints":[ 

{ 

"Property":"AllowTextWidget", 

"DefaultValue":"", 

"UserDerived":true, 

"Value":[ 

], 

"_isValid":true, 

"_error":"" 

}, 

{ 

"Property":"AllowImageWidget", 

"DefaultValue":"", 

"UserDerived":true, 

"Value":[ 

], 

"_isValid":true, 

"_error":"" 

}, 

{ 

"Property":"AllowAudioWidget", 

"DefaultValue":"", 

"UserDerived":false, 

"Value":[ 

], 

"_isValid":true, 

"_error":"" 

}, 

{ 

"Property":"AllowCircleTextWidget", 

"DefaultValue":"", 

"UserDerived":false, 

"Value":[ 

], 

"_isValid":true, 

"_error":"" 

} 

], 

"WidgetOrder":[ 

], 

"DecelMapping":[ 

], 

"WidgetAlignment":[ 

], 

"LinkedGroupIds":[ 

], 

"customkeyWidgetsList":[ 

] 

}, 

"DesignJson":{ 

"objects":[ 

], 

"background":"" 

}, 

"ViewId":102507, 

"Code":"102507", 

"TemplateId":118070, 

"IsHidden":false, 

"IsInherited":true, 

"IsDesignNote":false, 

"DesignNote":null, 

"displayImageUrl":"https://images.artifi.net/UserImages/0e8a78b2-eea3-475e-b38c-b3ea2b606926/37bab54a-03fa-4cc5-8cc1-fed78c27cfbe/Products/Display/a964ee66-5f0b-4c41-b06f-8c4bf473c8dd.jpg", 

"standardImageUrl":"https://images.artifi.net/UserImages/0e8a78b2-eea3-475e-b38c-b3ea2b606926/37bab54a-03fa-4cc5-8cc1-fed78c27cfbe/Products/Standard/a964ee66-5f0b-4c41-b06f-8c4bf473c8dd.jpg", 

"thumbnailImageUrl":"https://images.artifi.net/UserImages/0e8a78b2-eea3-475e-b38c-b3ea2b606926/37bab54a-03fa-4cc5-8cc1-fed78c27cfbe/Products/Thumbnail/a964ee66-5f0b-4c41-b06f-8c4bf473c8dd.jpg", 

"Width":629, 

"Height":1000, 

"GroupId":0, 

"DecorationCode":"Default" 

} 

7. 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 

  }); 

8. 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":"" 

} 

} 


9. 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

  });

10. Event: "artifi-widget-selected" 

Description: This event is triggered when widget Text/Image is selected in Artifi application. 

Event Handler: 

window.addEventListener("artifi-widget-selected"function (e) { 

      //Your code will go here 

  });  

Sample Data: 

Image widget selected data 

artifi-widget-selected 

{ 

"id":"image_1", 

"ruleId":221153, 

"cornerStyle":"circle", 

"type":"image", 

"filters":[ 

], 

"height":79.38017324350336, 

"width":174, 

"angle":0, 

"left":174, 

"top":368.45, 

"src":"https://images.artifi.net/UserImages/0e8a78b2-eea3-475e-b38c-b3ea2b606926/37bab54a-03fa-4cc5-8cc1-fed78c27cfbe/Cliparts/Standard/ee4926ce-2434-42a2-88fe-2714800dc8e8.png", 

"originX":"center", 

"originY":"center", 

"libProp":{ 

"ClipartId":49907, 

"photoId":null, 

"ClipartFamilyId":null 

}, 

"scaleX":1, 

"scaleY":1, 

"originalUrl":"https://images.artifi.net/UserImages/0e8a78b2-eea3-475e-b38c-b3ea2b606926/37bab54a-03fa-4cc5-8cc1-fed78c27cfbe/Cliparts/Original/ee4926ce-2434-42a2-88fe-2714800dc8e8.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, 

"viewId":102506, 

"borderScaleFactor":2, 

"visible":true, 

"custom_key":"", 

"price_key":"", 

"group_key":"", 

"hasControls":true, 

"opacity":1, 

"customFilters":[ 

{ 

 

} 

], 

"applyOneColorImprint":true, 

"uniqueName":"ee4926ce-2434-42a2-88fe-2714800dc8e8.png", 

"originalWidth":2078, 

"originalHeight":948, 

"printImage":"", 

"allowAsAProductImage":false, 

"widget_key":"", 

"flipX":false, 

"flipY":false, 

"effectSrc":"", 

"crossOrigin":"anonymous", 

"PreserveImageAspectRatio":false, 

"PreserveWidgetAspectRatio":true 

} 

Text widget selected data 

{ 

"id":"text_1", 

"type":"textbox", 

"ruleId":221148, 

"cornerStyle":"circle", 

"text":"Sample text", 

"fill":"#000000", 

"fontSize":"50", 

"originalFontSize":26, 

"fontStyle":"normal", 

"fontWeight":"normal", 

"height":56, 

"width":250, 

"angle":0, 

"left":177.95, 

"top":203.3, 

"stroke":"#ffffff", 

"strokeWidth":1, 

"textAlign":"center", 

"fontFamily":"Arimo", 

"originX":"center", 

"originY":"center", 

"libProp":{ 

"FontId":4800 

}, 

"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, 

"viewId":102506, 

"borderScaleFactor":2, 

"visible":true, 

"custom_key":"", 

"price_key":"", 

"group_key":"", 

"opacity":1, 

"hasControls":true, 

"hasBorders":true, 

"applyOneColorImprint":true, 

"isAutoFontSizeAllow":false, 

"widget_key":"", 

"textSrc":"https://designerimages.artifi.net/UserPhoto/0e8a78b2-eea3-475e-b38c-b3ea2b606926/Photos/Output/SVG/a94b118a-dc4d-4dbc-b0c8-394e19f57509.svg", 

"scaleX":1, 

"scaleY":1, 

"flipX":false, 

"flipY":false, 

"textType":"NormalText", 

"circleText":"", 

"radius":0, 

"startAngle":0 

} 


11. Event: "artifi-design-updated" 

Description: This event is triggered when design is updated in the Artifi application. 

Event Handler: 

window.addEventListener("artifi-design-updated"function (e) { 

       //Your code will go here 

  }); 

Sample Data:  

artifi-design-updated 

{     

"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":"", 

"src":"https://images.artifi.net/UserImages/0e8a78b2-eea3-475e-b38c-b3ea2b606926/37bab54a-03fa-4cc5-8cc1-fed78c27cfbe/Cliparts/Standard/ee4926ce-2434-42a2-88fe-2714800dc8e8.png", 

"clipartId":49907, 

"clipartCode":"", 

"photoId":null, 

"color":"", 

"id":"image_1", 

"selectedColors":[ 

] 

} 

] 

}, 

{ 

"viewCode":"102507", 

"text":[ 

], 

"image":[ 

] 

} 

] 

}, 

"action":"artifi-design-updated" 

} 

12. Event: "artifi-exit" 

Description: This event is triggered when Artifi application is closed. 

Event Handler: 

window.addEventListener("artifi-exit"function (e) { 

     //Your code will go here 

  }); 

13. Event: "artifi-widget-deleted" 

Description: This event is triggered when a widget is removed/deleted from the design. 

window.addEventListener("artifi-widget-deleted"function (e{ 

   console.log("artifi-widget-deleted"e.detail.data); 

}); 

14. Event: artifi-widget-deselected 

Description: This event is triggered when a user clicks away from a selected widget on design. 

window.addEventListener("artifi-widget-deselected"function (e{             

console.log("artifi-widget-deselected"e.detail.data); 

}); 

15. Event: artifi-share-design-success 

Description: This event is triggered when Design sharing is successful from share design feature. 

window.addEventListener("artifi-share-design-success"function (e{ 

          console.log("artifi-share-design-success"e?.detail?.data); 

       }); 

16. Event: artifi-share-design-error 

Description: This event is triggered when Error occurred during design sharing 

window.addEventListener("artifi-share-design-error"function (e{ 

       console.log("artifi-share-design-error",e?.detail?.data?.message); 

       }); 

 

17. Event: artifi-change-decoration-method 

Description: This event is triggered when the Decoration method is changed in Artifi Application. 

window.addEventListener("artifi-change-decoration-method"function (e{ 

          console.log("artifi-change-decoration-method"e.detail.data); 

        }); 

 

18. Event: artifi-design-saved 

Description: This event is triggered when the customized design is getting saved in Artifi application. 

window.addEventListener("artifi-design-saved"function(e){ 

       console.log("artifi-design-saved",e.detail.data); 

}); 

Sample Json Data:  

{ 

"sku":"Diary", 

"designId":1367062, 

"designData":[ 

{ 

"viewName":"Front", 

"viewCode":"102506", 

"image":[ 

], 

"text":[ 

], 

"monogram":[ 

], 

"decorationCode":"Default" 

}, 

{ 

"viewName":"Back", 

"viewCode":"102507", 

"image":[ 

], 

"text":[ 

], 

"monogram":[ 

], 

"decorationCode":"Default" 

} 

], 

"previewThumbnailImages":[ 

], 

"previewStandardImages":[ 

], 

"previewUrl":"https://integrationdesigner.artifi.net//Preview?productCode=Diary&userId=71&websiteId=275&webApiClientKey=c961461a-b287-448c-b9ea-e1162bd80b8e&customizedProductId=1367062", 

"customAttributes":[ 

], 

"colorAttributes":[ 

], 

"noOfImprintColors":0, 

"customDataListDetails":[ 

] 

} 



19. Event : artifi-design-applied (ShopByDesign) 

Description: This event is triggered when the saved design is applied on designer 

window.addEventListener("artifi-design-applied"function (e{ 

       console.log("artifi-design-applied"); 

      }); 

 

20. Event: artifi-convert-to-single-color 

window.addEventListener("artifi-convert-to-single-color"function (e{ 

        console.log("artifi-convert-to-single-color"e.detail.data); 

      }); 

 



Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.