Widget Configuration Parameters

Complete reference guide for all configurable parameters in the DressUp widget

⚙ī¸ Configuration 🎨 Customization 📖 Reference

Quick Navigation

Basic Config
API & Setup
Appearance
Styling & Design
Features
Functionality
Examples
Code Samples

🔧 Basic Configuration

apiUrl

The base URL for the DressUp API endpoint. All API requests will be made to this URL.

string
Default: 'https://vdressup.com/api'

apiKey Required

Your DressUp API key for authenticating requests. Get this from your assistant/admin panel.

string
Default: ''

widgetId

The DOM ID for the floating widget container. Change this if you need multiple widgets or to avoid conflicts.

string
Default: 'shopify-ai-widget'

🎨 Widget Appearance

width

Width of the widget in pixels (idle state)

Default: 150

height

Height of the widget in pixels (idle state)

Default: 150

backgroundColor

Background color of the widget (hex, rgb, or named color)

Default: '#ffffff'

borderColor

Border color of the widget

Default: '#e5e7eb'

textColor

Text color inside the widget

Default: '#374151'

borderRadius

Border radius in pixels (rounded corners)

Default: 8

📍 Widget Position

position

Position of the floating widget on the screen

Default: 'bottom-right'
Options: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'center'

offsetX

Horizontal offset in pixels (positive = right, negative = left)

Default: 0

offsetY

Vertical offset in pixels (positive = down, negative = up)

Default: 0

✨ Features & Options

Comparison Slider

showComparisonSlider

Enable before/after comparison slider

Default: true
comparisonSliderMode

Interaction mode: 'drag' or 'hover'

Default: 'drag'

Size Finder

sizeFinderEnabled

Enable size finder feature

Default: true
sizeFinderButtonText

Text on size finder button

Default: 'Find Your Size'
sizeChartId

Override size chart ID (optional)

Default: null (uses widget config)

Social Sharing

shareControlsPosition

Position of share buttons on images

Default: 'top-right' | Options: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'center'

AI Detection

enableAIDetection

Use AI to detect product pages

Default: true
enableInappropriate

Enable stricter image validation

Default: false

đŸ’ģ Usage Examples

Basic Configuration

new ShopifyAIWidget({
    apiUrl: 'https://vdressup.com/api',
    apiKey: 'your-api-key-here',
    position: 'bottom-right'
});

Custom Styling

new ShopifyAIWidget({
    apiUrl: 'https://vdressup.com/api',
    apiKey: 'your-api-key-here',
    backgroundColor: '#f3f4f6',
    borderColor: '#6366f1',
    textColor: '#1f2937',
    borderRadius: 12,
    fontSize: 16
});

Custom Position with Offsets

new ShopifyAIWidget({
    apiUrl: 'https://vdressup.com/api',
    apiKey: 'your-api-key-here',
    position: 'bottom-right',
    offsetX: -20,  // Move 20px left from right edge
    offsetY: 20    // Move 20px down from bottom edge
});

Custom Share Button Position

new ShopifyAIWidget({
    apiUrl: 'https://vdressup.com/api',
    apiKey: 'your-api-key-here',
    shareControlsPosition: 'bottom-left'  // Share buttons on bottom-left
});

ℹī¸ Important Notes

  • â€ĸ All parameters are optional except apiKey
  • â€ĸ Parameters not specified will use their default values
  • â€ĸ Boolean parameters default to true unless explicitly set to false
  • â€ĸ Color values accept any valid CSS color format (hex, rgb, rgba, named colors)
  • â€ĸ Position values are case-sensitive and must match exactly