Configuration Reference¶
Required Parameters¶
| Parameter | Description | Example Values |
|---|---|---|
partnerId |
Your Glance AI Store ID | "store_12345" |
catalogId |
Your Glance AI Catalog ID | "catalog_67890" |
widgetType |
Type of widget to display | "chat", "try_on_banner", "try_on_button", "search" |
pageType |
Current page type | "PDP", "PLP", "HOME", "OTHER" |
pageIdentifier |
Unique identifier for current page | Product ID, Collection ID, or page ID |
storeHandle |
Your store's unique handle | "my-awesome-store" |
Optional Parameters¶
| Parameter | Description | Default Value | Example Values |
|---|---|---|---|
brandLogo |
URL to your brand logo | "" |
"https://example.com/logo.png" |
title |
Widget title (banner/chat only) | - | "Try this on!" |
subtitle |
Widget subtitle (banner/chat only) | - | "See how it looks on you" |
backgroundColor |
Widget background (banner/chat) | - | "#ff0000" or CSS gradient |
buttonPosition |
Button position type (button only) | "absolute" |
"absolute", "relative" |
buttonPlacement |
Button placement side (button only) | "right" |
"left", "right" |
buttonBottom |
Bottom offset in pixels | 20 |
20 |
buttonSide |
Side offset in pixels | 20 |
20 |
theme |
Widget color theme | "white" |
"purple", "white" |
cornerStyle |
Widget corner style | "square" |
"rounded", "square" |
fontStyle |
Widget font family | "ttcommons" |
"montserrat", "ttcommons" |
customCSS |
Custom CSS for container | "" |
"margin: 10px; border: 1px solid #ccc;" |
productIndex |
Product position in collection | 0 |
0, 1, 2, etc. |
animateTryOnButton |
Enable button animation | true |
true, false |
Theme Options¶
Color Themes:
purple: Purple gradient theme with vibrant colors and shadowswhite: Clean white theme with minimal styling (default)
Corner Styles:
rounded: Rounded corners for all UI elementssquare: Sharp, square corners for all UI elements (default)
Font Styles:
montserrat: Montserrat font familyttcommons: TT Commons Pro font family (default)
Button Placement¶
When using the try_on_button widget type, you can control the button's position:
- buttonPlacement: Determines which side (left or right) the button appears on
- buttonSide: The margin from the chosen side in pixels
- buttonBottom: The margin from the bottom in pixels
Example: buttonPlacement: "left", buttonSide: 20 will position the button 20px from the left edge.
Page Types¶
PDP: Product Detail PagePLP: Product Listing Page (Collections)HOME: Home PageOTHER: Any other page type
Widget Types¶
chat: Interactive chat widgettry_on_banner: Banner-style try-on widgettry_on_button: Floating button try-on widgetsearch: Search interface widget