> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wearo.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Configuration reference
> All TryOnWidget.init() configuration options.
# Configuration reference
Full reference for all `TryOnWidget.init()` options.
## Base options
| Option | Type | Default | Description |
| ----------------- | ---------------- | ------------- | ---------------------------------------------------------------------------- |
| `apiKey` | string | **required** | Your Wearo API key (starts with `wearo_`) |
| `productSelector` | string | See below | CSS selector targeting the product image |
| `brandColor` | string | `#000000` | Brand hex color. Applied to the overlay button and iframe. |
| `triggerText` | string | Auto-detected | Button label. Auto-detects from ``, URL, or `navigator.language`. |
| `triggerSelector` | string | `''` | Container override for the overlay button placement |
| `locale` | `'en'` \| `'fr'` | Auto-detected | Force language instead of auto-detecting |
## Product identification
| Option | Type | Description |
| ----------- | ------ | --------------------------------------------------- |
| `productId` | string | Product ID for analytics and conversion attribution |
| `variantId` | string | Shopify variant ID |
## Injection mode
| Option | Type | Default | Description |
| ---------------- | ---------------------------------------------------- | ----------- | ------------------------------------------------------------ |
| `injectionMode` | `'overlay'` \| `'buybox'` \| `'both'` | `'overlay'` | Where the button is rendered |
| `buyboxSelector` | string | `''` | Anchor element near the Add to Cart button |
| `buyboxPosition` | `'before'` \| `'after'` \| `'prepend'` \| `'append'` | `'after'` | Position relative to `buyboxSelector` |
| `buyboxBadge` | `BuyboxBadgeConfig` | `null` | Optional badge on the buybox button (e.g. `{ text: 'NEW' }`) |
## Overlay button options
| Option | Type | Default | Description |
| ----------------------- | ---------------------------------------- | ----------------- | --------------------------------------------- |
| `overlayTheme` | `'glassmorphism'` \| `ButtonThemeConfig` | `'glassmorphism'` | Visual theme for the overlay button |
| `overlayAlignment` | `'center'` \| `'left'` \| `'right'` | `'center'` | Horizontal alignment on the image |
| `overlayAnchorSelector` | string | `''` | Custom anchor element for overlay positioning |
| `overlayAutoHide` | boolean | `false` | Hide overlay until hover (desktop) |
| `overlayBottom` | string | `'16px'` | Distance from the bottom of the image |
## Buybox button theme
| Option | Type | Default |
| ------------- | ---------------------------------------- | ----------------- |
| `buttonTheme` | `'glassmorphism'` \| `ButtonThemeConfig` | `'glassmorphism'` |
## ButtonThemeConfig
Full control over button appearance:
```typescript theme={"dark"}
{
fontFamily?: string,
fontSize?: string,
fontWeight?: string,
letterSpacing?: string,
textTransform?: string,
backgroundColor?: string,
textColor?: string,
borderRadius?: string,
height?: string,
width?: string,
padding?: string,
border?: string,
boxShadow?: string,
hoverBackgroundColor?: string,
hoverTextColor?: string,
backdropFilter?: string, // e.g. 'blur(11px)' — frosted glass effect
backdropOpacity?: number,
backdropHoverOpacity?: number
}
```
## Default productSelector
When no `productSelector` is provided, the widget tries these in order:
```
img[data-product-image],
img.product-image,
.product-image img,
.product__image img,
.product__media img,
.woocommerce-product-gallery__image img
```
## Minimal snippet
```html theme={"dark"}
```
## Full example (overlay + buybox)
```html theme={"dark"}
```