Artifi provides flexible API-based integration capabilities that allow eCommerce platforms to generate customized product previews and final artwork without relying entirely on the standard Artifi UI components.

There are two primary approaches for integrating Artifi using APIs:

 
This document explains both integration methods, their workflows, required APIs, and implementation considerations.

Use Case 1: Integration with Artifi Component

In this approach, the eCommerce application utilizes the Artifi customization component. Users perform personalization actions such as adding text, selecting clipart, or uploading images directly within the Artifi component.

Whenever a customization is added or modified, Artifi emits events/methods containing the updated widget information. The eCommerce application captures these events and uses the provided data to generate an updated product preview by calling the GetImage API.

Workflow

Step 1: Initialize the Artifi

Include the Artifi Headless JavaScript file in your eCommerce page to enable access to Artifi components and APIs.

<script src="https://example.com/artifi-headless-releases/3.0/Artifi.headless.js"></script>

Notes

Sample Code for Initialize Artifi

 
  // Configuration 
  var integrationValues = {}; 
  integrationValues.sku= ""; 
  integrationValues.websiteId = ""; 
  integrationValues.webApiclientKey = ""; 
  integrationValues.userId = ""; 
  integrationValues.isGuest = true/false; 
  integrationValues.decoMethodCodes = "default"; 
  // Launch Artifi 
  Artifi.initialize(integrationValues); 

Parameter Details

Step 2:  Integrate the component

<div id="artifi-user-image-component"  data-view-code="" data-add-widget=""

data-onsuccess="onSuccessHandler" data-onerror="handleUploadError" > 

</div> 

<div id="artifi-clipart-component" data-view-code="" data-add-widget=""

data-onsuccess="onSuccessHandler" data-onerror="handleUploadError" >

</div>

Step 3: User Customizes the Product

The user performs one or more of the following actions:

Step 4: Methods to get widget details

Artifi provides a method that contains the widget details which is required to call the GetImage API. The eCommerce application reads the widget details received from the method and get previewImage from GetImage API.

Method details

function handleUploadSuccess(data) {

  console.log("Success",data);

}

function handleUploadError (data) {

  console.log("Error",data);

}

Step 6: Call GetImage API & get Customized Image

The application constructs the widget parameter payload and sends it to the GetImage API. Artifi generates and returns the customized product image based on the supplied widget parameters. For more information about GetImage integration, refer to the documentation here.

GetImage API Example

{DomainName}/Designer/Image/GetImage?websiteId={websiteId}&webApiClientKey={webApiClientKey}&sku={Artifi Product SKU}&parameters=[ 
  { 
    "type":"textbox", 
    "widget_key":"CL_Text", 
    "text":"DJP", 
    "fill":"#951357", 
    "fontFamily":"Impact", 
    "fontWeight":"normal", 
    "vAlign":"middle", 
    "left":200.29, 
    "top":200.44, 
    "width":200.96, 
    "height":164.48, 
    "dm_code":"DE" 
  }, 
  { 
    "type":"image", 
    "src":" Amla logo New Standard.png ", 
    "widget_key":"CR_Image", 
    "left":200.29, 
    "top":200.44, 
    "width":200.96, 
    "height":164.48, 
    "dm_code":"DE" 
  }] 

Widget Parameter Details

Text Widget

The following properties can be supplied for text personalization:

Image Widget

The following properties can be supplied for image personalization:

Important Notes

Clipart Images

When a user selects or changes a clipart/logo:

User Uploaded Images

When a user uploads an image:

Use Case 2: Integration without Artifi Component

In this approach, the eCommerce platform manages the entire customization experience using its own UI components instead of the Artifi customization component.

Since personalization is performed outside Artifi, uploaded images must first be migrated to the Artifi platform before they can be used in image generation.

Workflow

Step 1: User Personalizes Product

The user interacts with custom eCommerce UI components such as:

Step 2: Upload Image to Artifi

If the user uploads an image, the eCommerce application must call the Upload Image API to transfer the image to Artifi. For more information about Upload Image API, refer to the documentation here.    

The Upload Image API allows users to upload images into the Artifi system for use in product personalization workflows.

Typical use cases include:

After a successful upload:

Step 3: Receive Image Details

After the image is uploaded, the Upload Image API returns the unique image name along with file metadata and other image-related information. The application then uses the returned unique image name together with the user-entered text values to construct the GetImage API request, which is used to generate the personalized product preview.

Step 4: Call GetImage API

The unique image name returned from the Upload Image API must be passed as the src value of the image widget. For more information about GetImage API, refer to the documentation here.

Step 5: Customized Image Returned

Artifi generates and returns the final customized product image.

Updating Text Values

Unlike uploaded images, text values do not require a separate upload process.

Text entered by the user can be passed directly in the GetImage API parameters:

{ 
  "type":"textbox", 
  "widget_key":"CL_Text", 
  "text":"My Custom Text" 
} 

Artifi will render the supplied text directly in the generated product image.

Integration Comparison

Summary

Artifi's API-driven architecture supports both component-based and fully custom integration approaches. Organizations can choose the implementation strategy that best aligns with their business requirements, customization workflows, and user experience goals.