Skip to content
SAIZ: Integration guide
SAIZ Platforming
Share
Explore

SAIZ Extension

Step 1: Embed Required Resources

Include the SAIZ widget JavaScript and CSS dependencies inside the <head> tag of your HTML document on ALL routes (globally):
<head>
<script src="https://saiz-recommender-staging.com/static/js/saiz-widget.js"></script>
<link href="https://saiz-recommender-staging.com/static/css/saiz-widget.css" rel="stylesheet" />
</head>

These resources must be loaded before the product container is initialised.
⁠

Step 2: Insert Product Container in pages

Place the following div container element dynamically, in all the places you want the widget to be shown, for PDP, place it anywhere, whereas for Basket/Checkout, place it in the product card.
<div
data-lang="{{language}}"
data-brandcode="{{brandCode}}"
data-productcode="{{productCode}}"
data-pagename="{{pageName}}"
data-visitorid="{{username}}">
</div>


Copy of Replace the following dynamic values:
Attribute
Description
{{language}}
Language code (e.g., "en", "de", "fr")
{{brandCode}}
Store-specific brand identifier (e.g., "brandcode")
{{productCode}}
PLM Product code
{{pageName}}
checkout/basket|pdp
{{username}}
Unique identifier for the current user (visitor ID/user ID)
There are no rows in this table
⁠
These placeholders must be server-rendered or dynamically inserted before the widget loads.

Additional Considerations for SPA or Client-Side Rendered Systems

If the JavaScript widget is not reloaded on each route change (e.g., in Single Page Applications), and the widget fails to initialize on subsequent page transitions, you must trigger it manually using a custom DOM event.

JavaScript: Manual Widget Initialization via Custom Event on PDP visits

const event = new CustomEvent("saiz-widget-initializer", {
detail: {
lang: "en", // Replace with actual language code
productcode: "ABC123", // Replace with actual product code
brandcode: "BRANDX", // Replace with actual brand identifier
visitorid: "user5678" // Replace with actual visitor/user ID
}
});

window.dispatchEvent(event);
This ensures the widget is reinitialized when navigating between product pages or views in JavaScript-driven environments.

Important Note

Staging Environment URL:
https://saiz-recommender-staging.com/static/css/saiz-widget.css
https://saiz-recommender-staging.com/static/js/saiz-widget.js
Production Environment URL:
https://saiz-recommender.com/static/css/saiz-widget.css
https://saiz-recommender.com/static/js/saiz-widget.js

Whitelist URL: Staging and Production
https://transfer-saizone-ui-stage.s3.amazonaws.com
https://saiz-extensions.com
https://staging-saiz-extensions.com
https://transfer-saizone-ui-stage.s3.eu-central-1.amazonaws.com
https://transfer-saizone-ui-stage.s3.eu-central-1.amazonaws.com
https://transfer-saizone.staging-saiz-extensions.com
https://saiz-recommender-staging.com
https://saiz-recommender


Please also whitelist the above urls in the Content-Security-Policy as media-src
Content-Security-Policy:
default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval';
style-src 'self' 'unsafe-inline';
img-src 'self' data: blob:
https://transfer-saizone-ui-stage.s3.amazonaws.com
https://saiz-extensions.com
https://staging-saiz-extensions.com
https://transfer-saizone-ui-stage.s3.eu-central-1.amazonaws.com
https://transfer-saizone.staging-saiz-extensions.com
https://saiz-recommender-staging.com
https://saiz-recommender;
font-src 'self' data:;
connect-src 'self'
https://transfer-saizone-ui-stage.s3.amazonaws.com
https://saiz-extensions.com
https://staging-saiz-extensions.com
https://transfer-saizone-ui-stage.s3.eu-central-1.amazonaws.com
https://transfer-saizone.staging-saiz-extensions.com
https://saiz-recommender-staging.com
https://saiz-recommender;
media-src 'self' blob: data:
https://transfer-saizone-ui-stage.s3.amazonaws.com
https://saiz-extensions.com
https://staging-saiz-extensions.com
https://transfer-saizone-ui-stage.s3.eu-central-1.amazonaws.com
https://transfer-saizone.staging-saiz-extensions.com
https://saiz-recommender-staging.com
https://saiz-recommender;
object-src 'none';
frame-ancestors 'self';
base-uri 'self';
form-action 'self';
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.