1. Include JavaScript File in Ecommerce

Include Artifi JavaScript file
https://<artifi_instance_domain>/scripts/<version>/Artifi.headless.js into the Ecommerce PDP page.

2. Include Artifi Widget Component Container

Artifi provide components as listed below. These components are in the form of HTML div tag, which has unique IDs. Add these div containers wherever the component is required on the page. Editor component is mandatory to include in all the mentioned components below for rendering the other components.

2.1 Editor -

<div id="artifi-editor"></div>

Description: Editor includes the product image area along with the canvas area (decoration area) on the product image.  Editor component is mandatory to include in all the mentioned components below for rendering the other components.
The primary interactive canvas editor. Users add, select, move, resize, and style text and image widgets on this canvas. This is the core rendering surface of the designer

Editor includes the product image area along with the canvas area (decoration area) on the product image. 

<div id="artifi-360-editor"></div>

<div id="artifi-product-views"></div>

2.4 Text Open Widget List -

<div id="artifi-text-widget-open-List"></div>

This component allows the E-commerce PDP page to add the textbox for personalizing the product.
The text properties like textbox captions, bold, italics, horizontal alignment, number of textline, character limit for all lines, text validations (all caps, all small, auto uppercase, auto lowercase and only numbers), font size, auto font size, fonts family, and text color will be visible in the text open widget list. The text properties may vary depending on the rule properties enabled or disabled from Artifi admin.

2.5 Text Widget List - 

<div id="artifi-text-widget-list"></div> 

All the added widget list will be displayed on the PDP page to include the text widget list component. On adding any text on any of the text boxes will show the properties like textbox captions, bold, italics, horizontal alignment,  number of textline, character limit for all lines, text validations (all caps, all small, auto uppercase, auto lowercase and only numbers), font size, auto font size, fonts family, and  text color, only for the selected textbox. The text properties may vary depending on the rule properties enabled or disabled from Artifi admin.

Default First Screen without Text Properties

Selected Textbox with Text Properties

2.6 Add to Cart -

<div id="artifi-add-to-cart"></div>

The Add to Cart component will save the personalization data on the Artifi server and will return the unique order id that can be saved on the Ecommerce system.

2.7 Upload image -

<div id="artifi-upload-user-image"></div> 

Using this component, the user can upload an image from their computer location to personalize the product.  

2.8 My Art / Display User Images-

<div id="artifi-user-images"></div>

These are the images uploaded by the user through the upload image component mentioned in point number 2.5.

2.9 Display Cliparts -

<div id="artifi-clipart"></div>

These cliparts can be used for personalizing the product. These cliparts are the cliparts added in Artifi admin. Below are the 2 ways on which the cliparts will be displayed using  the following parameters.

2.7.1 Client Code - If the clipart family has a client code, the clipart will be displayed on the basis of client code. 

2.7.2 Rule Code - If the clipart family does not have a client code, the clipart will be displayed on the basis of rule code.

Note - If both the parameters client code and rule code are passed, the priority will be given to the client code.

API Parameters with Client Code: 

https://integrationdevapidesigner.artifi.net/api/v1/Cliparts/GetCliparts?clientCode={clientCode}&ruleCode={ruleCode}&folderCode=&pageIndex=1&pageSize=25&websiteId={websiteId}&webApiClientKey={webApiClientKey} 

API Parameters with Rule Code: 

https://integrationdevapidesigner.artifi.net/api/v1/Cliparts/GetCliparts?ruleCode={ruleCode}&folderCode=&pageIndex=1&pageSize=25&websiteId={websiteId}&webApiClientKey={webApiClientKey} 

2.10 artifi-crop - 

<div id="artifi-crop"></div>

Description: Provides image cropping controls for image widgets on the canvas. Supports free-form and aspect-ratio-locked cropping, with optional auto-crop on image placement.

2.11 artifi-canvas-zoom - 

<div id="artifi-canvas-zoom"></div>

Description: Renders zoom-in and zoom-out control buttons for the editor canvas, allowing users to adjust the canvas view scale without affecting the design.

2.12 artifi-email -

<div id="artifi-email"></div>

Description: Renders an email-sharing button that allows users to email the current design preview or a design link. Supports both popup modal and inline display modes. 

2.13 Product Attribute/List of Variants -

<div id="artifi-product-attribute" data-attr-style="circle"></div> 

These attributes are used to show the variants so that the user can change the variants. The attributes and variants are set up in Artifi admin.

2.14 Design Updated -

<div id="artifi-design-updated"></div> 

This component will enable the design updated event which includes all the customization done on the product. We can use this component when we need to update the price.

2.15 Imprint Color -

<div id="artifi-imprint-color" class="imprint-color"  data-shape-type="square" data-toggle-switch="false"></div>

This component includes a set of colors that can be used to colorize the image/logo and text within the editor.

2.16 Color Detection -

<div id="artifi-image-color-detector"></div>

This component shows the detected color in the used image on the product.

2.17 artifi-add-to-cart -

<!-- Mobile instance — inside .product-canvas --> 
<div id="artifi-add-to-cart" data-art-container="mobile-display" class="cart-btn"></div>

<!-- Desktop instance — inside .product-control --> 
<div id="artifi-add-to-cart" data-art-container="desktop-display" class="cart-btn"></div>

3. Initialize Artifi

When the document is ready, utilize the Artifi.Initialize method to initialize Artifi. Once this method is invoked, the component will become operational on the PDP page, enabling website users to personalize the product.

Following are the required parameters to initialize Artifi in Ecommerce.

 Artifi.initialize({
          webApiClientKey: "<Artifi WebAPIClientKey>",
          websiteId: "<Artifi WebsiteId>",
          userId: "<Ecommerce UserId>",
          isGuest: "<User Type Guest/Logged In >",
          sku: "<Artifi Product Sku>",
        });

4. Add to Cart

Once the product is customized, the website users can add it to cart. While adding the product to cart Artifi.AddtoCart method will be called to add the product to cart.

Artifi will respond to the method and Ecommerce will process the customized product to cart.

Artifi.AddToCart()

5. List of Artifi Events

Artifi events will be triggered and Ecommerce will actively listen to and monitor the events. Subsequently, Ecommerce will process the events and leverage them according to their specific requirements.

Following are the list of Artifi events that can be utilized by E-commerce as per the need.

 window.addEventListener("artifi-initialized", function (e) {
       //Your code will go here
});

window.addEventListener("artifi-launching-error", function (e) {
       //Your code will go here
});

window.addEventListener("artifi-sku-changed", function (e) {
       //Your code will go here
});

window.addEventListener("artifi-widget-added", function (e) {
       //Your code will go here
  });

window.addEventListener("artifi-widget-updated", function (e) {
       //Your code will go here
  });

window.addEventListener("artifi-view-changed", function (e) {
       //Your code will go here
  });

window.addEventListener("artifi-add-to-cart-initialize", function (e) {
       //Your code will go here
  });

window.addEventListener("artifi-add-to-cart-success", function (e) {
       //Your code will go here
  });

window.addEventListener("artifi-add-to-cart-error", function (e) {
       //Your code will go here
  });

Artifi.StartOver()

Artifi.changeSKU(‘SKU’)

window.addEventListener("artifi-design-updated", function (e) {
       //Your code will go here
  });