ADDING ARTIFI APPLICATION IN A WEBSITE
Artifi.Initialize(integrationValues) where, integrationValues is the collection of productCode, websiteId, userId, divId, webApiclientKey, isGuest, width, height, decoMethodCodes, designId, sku, extraQueryString, cartQueryString To call the Artifi engine in your ecommerce website, you have to make a call to the Artifi javascript method “Initialize”. This will open the Artifi editor in your website in the particular html div. In other words, this will open the Artifi customization screen in the html div element whose id will be specified in the parameter “divId” in the call.
Initialize method creates an iframe in the specified html div element which will contain the form (editor) with the submit button (ex: Add To Cart).
To add the Artifi application in your ecommerce website you have to write the JavaScript in your page. Following is the example to call the artifi application on an e-commerce website.
//Create a div element in your html page. This will be the div where Artifi editor will get launched.
<html>
<head>
</head>
<body>
<div id="artificontainer"></div>
</body>
</html>
//Include the latest version of jQuery or whichever version is used in your project.
//For Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
// Include the ArtifiIntegration.js file to enable Artifi script
// ArtifiIntegration.js contains all the method that are needed to integrate Artifi engine with // your ecommerce website.
<script src="https://example.com/script/SasIntegration/ArtifiIntegration.min.js"></script>
// Write the code to call the Artifi engine
<script language="javascript">
$(document).ready(function(){
// jQuery uses $ as a shortcut for jQuery, and as you have to use
// ArtifiIntegration.js file that uses the $ variable, you can run into conflicts with
// jQuery. In order to avoid these conflicts, you need to put jQuery in
// noconflict
// mode immediately after it is loaded onto the page and before you attempt to
// use jQuery in your page.
jQuery = jQuery.noConflict();
// jQuery is now an alias to the jQuery function.
// You can call the artifi editor on page load as well as on any specific event.
// Following example calls the Artifi editor on document ready in the div
// element that we have created earlier.
// syntax:
// Artifi.Initialize(integrationValues);
// Where, integrationValues is the collection of productCode, websiteId,
// userId, divId, isGuest, width, height, designId, sku, extraQueryString,
// and cartQueryString
// usage:
var integrationValues = {};
integrationValues.productCode = "ombrechevroncase" ;
integrationValues.websiteId = “26”;
integrationValues.webApiclientKey = “actualkeyhere”;
integrationValues.userId = ”123”;
integrationValues.divId = "artificontainer";
integrationValues.isGuest = true;
integrationValues.width = “100%”;
integrationValues.height = “100%”;
integrationValues.decoMethodCodes = "decorationMethodCode1, decorationMethodCode2";//Optional
Artifi.Initialize(integrationValues);
// parameter description:
// integrationValues is the object and will contain the data for
// productCode, websiteId, userId, divId, isGuest, width, height, designId,
// sku, extraQueryString, and cartQueryString
// "artificontainer" is the id of the div element in which we have to launch the
// artifi.
// 800 and 600 is the width and height of the div "artificontainer"
// “true” represent the user is guest user
// "ombrechevroncase" is the product’s code that we want to customize.
// we have omitted the optional parameters of the method.
// As we have not specified the sku of the product, user will be able to change
// the attributes (size, color, etc) of the product.
// Receive the message from Artifi (Add To Cart)
// On posting the iframe i.e., on adding product to cart or saving the
// customized design (on iframe post), Artifi will post message back to your
// ecommerce website. To receive that posted message from Artifi you have to
// add the event listener.
if (window.addEventListener){
addEventListener("message", receiveArtifiMessage, false)
}
else {
attachEvent("onmessage", receiveArtifiMessage)
}
// “receiveArtifiMessage” is the name of the event that we want to call on
//getting the response from Artifi.
//
});
</script>extraQueryString: Steps to pass "extraQueryString" parameter from the PDP page into the Artifi Initialization call.
Step1: Collect the value in key-value format. Multiple key values can be passed in extraQueryString and it is separated by '&'.
Example:
| Key | Value |
| ClientCode | SampleClientCode |
| DecoLocation | SampleDecoLocation |
Step 2: Convert this key-value in string format with Ampersand (&) Delimited/separated String
Example1: ClientCode=SampleClientCode.
Example2: ClientCode=SampleClientCode&DecoLocation=SampleDecoLocation.
Step 3: Convert this string into the following browser encoded format.
Example1: encodeURIComponent('ClientCode=SampleClientCode').
Example2: encodeURIComponent('ClientCode=SampleClientCode&DecoLocation=SampleDecoLocation').
Step 4: Pass this encoded value into the "extraQueryString" parameter.
Example1: extraQueryString=ClientCode%3DSampleClientCode.
Example2: extraQueryString=ClientCode%3DSampleClientCode%26DecoLocation%3DSampleDecoLocation.
Artifi engine will look like below image on launching the Artifi in the specific div element.
After launching the Artifi editor, end user will be able to customize the product. End user will get access to all customization functionalities present in the Artifi editor. The user will be able to change the attributes (color, size, etc.) of the products, add image and text widgets and customize the product before they buy.
You can pass the keys of the attribute, fonts or cliparts to calculate the price of the product when user add/remove any of them.