Skip to content
visitorId: Must match the ID passed to the widget under data-visitoridorderId: Must be provided by the store at checkoutbrandCode: Should match the widget’s data-brandcode value
3. Shopfront Integration
[Note: SAIZ can also be integrated into iOS, Android Apps via an SDK]
PDP, Gallery or Checkout:
One code snippet powers all SAIZ extensions - Recommender, Fit Nudge, and Size Chart. You integrate once; we configure which extensions appear on which pages.
Step 1 - Add script to <head>
html
<head>
<script src="https://[SAIZ_CDN_URL]/static/js/saiz-widget.js"></script>
<link href="https://[SAIZ_CDN_URL]/static/css/saiz-widget.css" rel="stylesheet"/>
</head>
Step 2 - Add container to <body>
Place this <div> wherever you want a SAIZ extension to appear - PDP, gallery, checkout, or any other page.
html
<div id="saiz-widget-container"
data-lang="{{language}}"
data-brandcode="{{brandCode}}"
data-productcode="{{productCode}}"
data-visitorid="{{visitorId}}"
data-pagename="{{pageName}}">
</div>
That's it. The same container works for all extensions. Which extension renders is controlled via your SAIZ configuration - no code changes needed to switch or add extensions.
Parameter reference
Parameter
Description
Example
data-lang
Language code
en, de, fr
data-brandcode
Your brand identifier (provided by SAIZ)
your-brand
data-productcode
Product ID from your shop (must match PLM data)
FW25-DR-1023
data-visitorid
Anonymous visitor/session ID
abc123
data-pagename
Page type where the widget is placed
pdp, gallery, basket, checkout
There are no rows in this table
Where to place it
Page
Use case
PDP (Product Detail Page)
Recommender, Fit Nudge, Size Chart - primary placement
Gallery / Category
Fit Nudge on product cards
Checkout / Cart
Size confidence nudge, duplicate-size warnings
There are no rows in this table
Tracking setup (mandatory):
Checkout session tracking
WEBHOOK Integration
Staging Environment URL:
https://staging-saiz-app.com/api/checkout
Header Key: saiz-api-key
Header Value: 1fabc8404abd4f60b619b57a3d1790a8
Production Environment URL:
https://saiz-app.com/api/checkout
Header Key: saiz-api-key
Header Value: 1fabc8404abd4f60b619b57a3d1790a8
SAIZ Checkout Webhook Integration
Step 1: Authentication and Endpoint
Base URL: https://staging-saiz-app.com
Header Key: saiz-api-key
Header Value: 1fabc8404abd4f60b619b57a3d1790a8
This API key must be included in the request headers.
Step 2: Endpoint and Payload
HTTP Method: POST
Endpoint: https://staging-saiz-app.com/api/checkout/
JSON Body Format:
{
"orderId": "string",
"visitorId": "string",
"brandCode": "shop - string"
}
Step 3: Expected Response
Successful calls return HTTP 204 No Content.
Code Example – Axios
axios.post('https://staging-saiz-app.com/api/checkout', {
orderId: 'order123',
visitorId: 'visitorXYZ',
brandCode: 'BRANDX'
}, {
headers: {
'Content-Type': 'application/json',
'saiz-api-key': '1fabc8404abd4f60b619b57a3d1790a8'
},
withCredentials: true
})
.then(() => {
// success handler
})
.catch((error) => {
// error handler
});
Code Example – cURL
curl --location 'https://saiz-app.com/api/checkout' \
--header 'Content-Type: application/json' \
--header 'saiz-api-key: 1fabc8404abd4f60b619b57a3d1790a8' \
--data '{
"orderId": "order123",
"visitorId": "visitorXYZ",
"brandCode": "BRANDX"
}'
Customization Notes
The webhook API can be extended with custom parameters or a different endpoint as needed. Customisation is supported per client requirements.
Frontend Configuration
All configuration is managed on the SAIZ side - your dev team does not need to make code changes for any of the following:
Let's design your look & feel together
Option
What you can control
Extension selection
Which extensions are active (Recommender, Nudge, Size Chart)
Placement
Where on the page the extension appears (e.g. below size selector, above ATC button)
Styling
Colors, fonts, and visual appearance to match your shop design
Language
Multilingual support - configure per-market
Behavior
When the extension triggers (on page load, on size selection, etc.)
There are no rows in this table
SAIZ prepares a UX/UI suggestion based on your shop layout. We recommend a joint brainstorming session before go-live to align on placement and styling.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.