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. API Overview
- Provides a quick summary of available Artifi integration methods.
- Includes method signatures, parameters, events, and implementation of examples.
- Organized for fast lookup during integration and troubleshooting.
# | Method | Parameters | Description |
1 | Artifi.changeSKU(sku) | sku: string | Change the product variant without re-initializing. |
2 | Artifi.setAddToCartJsonVersion(jsonVersion) | jsonVersion: string | Sets payload version before calling addToCart |
3 | Artifi.changeDecorationMethod(decorationCode, isDesignPersist?) | decorationCode: string, isDesignPersist?: boolean | Switches decoration method (embroidery, screen print, etc.) |
4 | Artifi.addToCart() | None | Triggers the Add to Cart flow; listen for artifi-add-to-cart-data event to receive the payload |
5 | Artifi.openPreviewInPopup(integrationValues) | websiteId, webApiClientKey, designId, userId, sku, optional: width, height | Opens a design preview in a popup window |
6 | Artifi.startOver() | None | Resets all customizations on the canvas. |
7 | Artifi.removeWidgetSelection() | None | Deselects the active canvas widget |
2. Method Reference
2.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
JavaScript
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 | Yes | Additional metadata (e.g., JSON string) |
appMode | string | Yes | Mode such as "edit" or "view" |
decorationCode | string | ❌ | Pre-selected decoration method |
languageCode | string | ❌ | UI language (e.g., "en", "fr") |
viewCode | string | ❌ | Specific product view |
enableNewRelic | boolean | ❌ | Enables telemetry monitoring |
Events Fired
Event | Description |
artifi-initialized | Initialization completed successfully |
ArtifiCriticalError | Initialization failed (event.detail contains error) |
artifi-launching-error | Config API call failure |
Example
JavaScript
window.Artifi.initialize({
websiteId: "site_001",
webApiClientKey: "your-api-key",
userId: "user_123",
sku: "PROD-SKU-001",
isGuest: false,
designId: 0,
extraDetails: "",
appMode: "",
languageCode: "en"
});
2.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 |
Events Fired
Event | Description |
artifi-sku-changed | SKU updated successfully |
Example
window.Artifi.changeSKU("PROD-SKU-002");
2.3 Artifi.changeDecorationMethod (decorationCode, isDesignPersist?)
Switches the decoration method applied to the product.
2.3.1 Signature
JavaScript
window.Artifi.changeDecorationMethod(decorationCode: string, isDesignPersist?: boolean): void
Parameters
Parameter | Type | Required | Description |
decorationCode | string | Yes | Decoration method code |
isDesignPersist | boolean | No | Preserve existing design (true / false) |
2.3.3 Events Fired
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);
2.4 Artifi.addToCart()
Triggers the Add to Cart flow and returns customization data.
Signature
window.Artifi.addToCart()
Events Fired
Event | Description |
artifi-add-to-cart-initialize | Processing started |
artifi-add-to-cart-data | Contains cart payload (event.detail) |
artifi-add-to-cart-success | Completed successfully |
artifi-add-to-cart-error | Error occurred |
Example
window.Artifi.addToCart();
window.addEventListener("artifi-add-to-cart-data", function(event) {
const cartData = event.detail;
// Integrate with cart service
});
2.5 Artifi.openPreviewInPopup(integrationValues)
Open the product preview in a new popup window.
Signature
JavaScript
window.Artifi.openPreviewInPopup(integrationValues: IProductPreview & { width?: number, height?: number }): void
Parameters
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
JavaScript
window.Artifi.openPreviewInPopup({
websiteId: "site_001",
webApiClientKey: "your-api-key",
designId: 987,
userId: "user_123",
sku: "PROD-SKU-001",
width: 800,
height: 600
});
2.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();
2.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();