Headless Component Integration allows you to use Artifi’s core capabilities while maintaining full control over the user interface and experience. In this approach, Artifi provides the embeddable components, while the frontend UI is managed entirely by the eCommerce application.
Integration Steps
Follow the steps below to integrate Artifi Headless components into eCommerce platform:
1. Configure Integration Details in eCommerce
Before initializing Artifi, you must configure the required integration credentials within your eCommerce application.
Required Details
- Website ID
- Web API Client Key
Purpose
- Authenticates requests between your application and Artifi services
- Ensures secure communication and data access
- Associates all interactions with the correct Artifi account
2. Include Artifi Headless Script
Include the Artifi Headless JavaScript file in your eCommerce page to enable access to Artifi components and APIs.
HTML Example
<script src="https://example.com/artifi-headless-releases/3.0/Artifi.headless.js"></script>
Notes
- Ensure the script is loaded before initializing any Artifi components
- It is recommended to load the script in the <head> section or before closing the <body> tag.
Initialize Artifi
Artifi is initialized using the Artifi.initialize() method with a configuration object. This object defines the required product, user, and UI settings used to launch the Artifi personalization application. Below is the sample example to call the Artifi Initialize method.
Code sample
Artifi.initialize({ webApiClientKey: webApiClientKey,
websiteId: websiteId,
userId: userId,
isGuest: isGuest,
sku: sku,
designId: designId,
extraDetails: extraDetails,
appMode:appMode,
decorationMethod: decorationMethod?decorationMethod:""
});
Notes
- All required parameters must be populated before initialization.
- Validate credentials (websiteId and webApiclientKey) these details will be provided by Artifi.
Add Artifi Component Container (PDP)
Define a container element on the Product Detail Page (PDP) where the Artifi component will be rendered. Below is the list of some Artifi component you can check teh full list of component here
HTML Example
<div id="artifi-editor"></div>
<div id="artifi-text-area"></div>
<div id="artifi-upload-user-image"></div>
Notes
- Artifi component will load on PDP after including component container div.
- Component UI can be managed/override by the eCommerce Application based on the PDP theme.
Whitelist Domains
- Before using Artifi components, all domains that will load or interact with Artifi must be whitelisted in Artifi admin.
- By restricting access to authorized sources, whitelisting helps prevent unauthorized usage and enhances the overall security of the integration.
- The following link provides detailed information on how to whitelist domains in Artifi.