DressUp Widget Integration Guide

1. Overview

The DressUp Widget is a JavaScript library that automatically detects products on your e-commerce pages and provides AI-powered virtual try-on functionality. It's designed to be easy to integrate and requires minimal code changes to your existing website.

🎯 Key Features

• Automatic product detection using AI
• Real-time virtual try-on processing
• Customizable appearance and messaging
• Mobile-responsive design
• Easy integration with any e-commerce platform

2. Prerequisites

Before integrating the DressUp Widget, ensure you have:

✅ DressUp Account

Sign up for a DressUp account and obtain your API key from the dashboard.

✅ E-commerce Website

Have an existing e-commerce website with product pages.

✅ Product Images

Ensure your product images are accessible via HTTPS URLs.

✅ Meta Tags

Your product pages should have proper Open Graph meta tags for title, description, and image.

3. Basic Integration

Follow these simple steps to add the DressUp Widget to your website:

Step 1: Add the Widget Script

Include the DressUp Widget script in your HTML pages. Add this code before the closing </body> tag:

<!-- DressUp Widget Integration -->
<script src="https://dressup.com/js/dressup-widget.min.js"
        data-api-key="YOUR_API_KEY"
        data-primary-color="#667eea"
        data-secondary-color="#764ba2"
        data-position="bottom-right"></script>
            

⚠️ Important

Replace "YOUR_API_KEY" with your actual API key from the DressUp dashboard.

Step 2: Mark Product Images

Add the data-elsy-tag="true" attribute to your product images:

<img src="product-image.jpg"
     alt="Product Name"
     data-elsy-tag="true">
            

Step 3: Add Meta Tags

Ensure your product pages have proper Open Graph meta tags:

<meta property="og:title" content="Product Title">
<meta property="og:description" content="Product Description">
<meta property="og:image" content="Product Image URL">
            

🎉 That's It!

The widget will automatically detect products and show the virtual try-on interface when appropriate.

4. Product Detection Setup

The widget uses AI to automatically detect if a page contains a suitable product for virtual try-on. Here's how it works:

Detection Process

Primary Detection: Looks for images with data-elsy-tag="true"
Alt Tag Detection: If no data-elsy-tag found, scans all images for alt text containing "VDressUp" (case-insensitive)
Meta Analysis: Extracts product information from Open Graph tags
AI Classification: Uses AI to determine if the product is suitable for virtual try-on
Widget Display: Shows the widget if the product is detected as suitable

Image Detection Methods

Method 1: Data Attribute (Recommended)

Add data-elsy-tag="true" to your product images:

                    <img src="product.jpg" 
                    alt="Product Image" 
                    data-elsy-tag="true">
                

Method 2: Alt Text Detection (Fallback)

If no data-elsy-tag is found, the widget will scan all images for alt text containing "VDressUp" (case-insensitive):

                    <img src="product.jpg" 
                    alt="VDressUp Summer Dress">
                    <!-- Will be detected -->
                    
                    <img src="product.jpg" 
                    alt="vdressup dress">
                    <!-- Will be detected (case-insensitive) -->
                    
                    <img src="product.jpg" 
                    alt="Beautiful VDressUp Collection">
                    <!-- Will be detected (contains VDressUp) -->
                

Supported Product Categories

👗 Fashion

Dresses, shirts, jackets, pants, and other clothing items

🪑 Furniture

Sofas, chairs, tables, and other furniture pieces

💍 Jewelry

Rings, necklaces, earrings, and other accessories

👟 Shoes

Sneakers, boots, heels, and other footwear

5. Widget Customization

Customize the widget appearance and behavior using data attributes:

Available Configuration Options

Attribute	Description	Default	Example
`data-api-key`	Your DressUp API key	Required	`"dressup_abc123..."`
`data-primary-color`	Primary color for buttons and highlights	`"#6366f1"`	`"#e91e63"`
`data-secondary-color`	Secondary color for accents	`"#8b5cf6"`	`"#ad1457"`
`data-position`	Widget position on screen	`"bottom-right"`	`"bottom-left"`
`data-debug`	Enable debug logging	`"false"`	`"true"`

Advanced Customization

For more advanced customization, you can initialize the widget manually:

<!-- Include the widget script -->
<script src="https://dressup.com/js/dressup-widget.min.js"></script>

<!-- Initialize manually -->
<script>
const widget = new DressUpWidget({
    apiKey: 'YOUR_API_KEY',
    primaryColor: '#e91e63',
    secondaryColor: '#ad1457',
    position: 'bottom-right',
    welcomeMessage: 'Try this on virtually!',
    uploadMessage: 'Upload your photo to see how this looks on you.',
    processingMessage: 'Creating your virtual try-on experience...',
    successMessage: 'Perfect! Here\'s how this looks on you.',
    errorMessage: 'Oops! Something went wrong. Please try again.',
    showBranding: true,
    brandingText: 'Powered by DressUp',
    debug: false
});
</script>
            

6. API Reference

The DressUp Widget provides several methods for programmatic control:

Widget Methods

Method	Description	Parameters	Example
`show()`	Manually show the widget	None	`widget.show()`
`hide()`	Hide the widget	None	`widget.hide()`
`destroy()`	Remove the widget completely	None	`widget.destroy()`

Widget Properties

Property	Description	Type
`isInitialized`	Whether the widget has been initialized	Boolean
`isVisible`	Whether the widget is currently visible	Boolean
`currentProduct`	Information about the detected product	Object

7. Live Examples

Explore these working examples to see the DressUp Widget in action:

👗 Fashion Store

Complete e-commerce integration with product gallery and reviews

View Example →

🪑 Furniture Store

Room visualization for furniture and home decor items

View Example →

📱 Simple Integration

Basic integration example with minimal code

View Example →

8. Troubleshooting

Common issues and their solutions:

Widget Not Appearing

❌ Problem

The widget doesn't show up on your product pages.

✅ Solutions

• Check that your API key is correct and active
• Ensure product images have data-elsy-tag="true"
• Verify that your page has proper Open Graph meta tags
• Check browser console for error messages
• Enable debug mode to see detailed logs

Product Not Detected

❌ Problem

The AI doesn't recognize your product as suitable for virtual try-on.

✅ Solutions

• Ensure your product title and description are clear and descriptive
• Use high-quality product images
• Check that your product falls into supported categories
• Contact support if you believe your product should be supported

Image Processing Fails

❌ Problem

Customer images fail to process or return errors.

✅ Solutions

• Ensure customer images are in supported formats (JPEG, PNG)
• Check that images are not too large (max 10MB)
• Verify that the customer image shows a person clearly
• Check your API key usage limits

9. Best Practices

Follow these best practices to get the most out of the DressUp Widget:

Product Page Optimization

High-Quality Images: Use clear, well-lit product photos
Descriptive Content: Write detailed product titles and descriptions
Multiple Angles: Provide multiple product images when possible
Mobile Optimization: Ensure your site works well on mobile devices

User Experience

Clear Call-to-Action: Add buttons to manually trigger the widget
Loading States: Show loading indicators during processing
Error Handling: Provide helpful error messages to users
Accessibility: Ensure the widget is accessible to all users

Performance

Lazy Loading: Load the widget script only when needed
Image Optimization: Compress product images for faster loading
CDN Usage: Use a CDN for faster script delivery
Monitoring: Track widget usage and performance metrics

🚀 Ready to Launch

You're now ready to integrate the DressUp Widget into your e-commerce website! Start with the basic integration and gradually add customizations as needed.

Table of Contents

1. Overview

🎯 Key Features

2. Prerequisites

✅ DressUp Account

✅ E-commerce Website

✅ Product Images

✅ Meta Tags

3. Basic Integration

Step 1: Add the Widget Script

⚠️ Important

Step 2: Mark Product Images

Step 3: Add Meta Tags

🎉 That's It!

4. Product Detection Setup

Detection Process

Image Detection Methods

Method 1: Data Attribute (Recommended)

Method 2: Alt Text Detection (Fallback)

Supported Product Categories

👗 Fashion

🪑 Furniture

💍 Jewelry

👟 Shoes

5. Widget Customization

Available Configuration Options

Advanced Customization

6. API Reference

Widget Methods

Widget Properties

7. Live Examples

👗 Fashion Store

🪑 Furniture Store

📱 Simple Integration

8. Troubleshooting

Widget Not Appearing

❌ Problem

✅ Solutions

Product Not Detected

❌ Problem

✅ Solutions

Image Processing Fails

❌ Problem

✅ Solutions

9. Best Practices

Product Page Optimization

User Experience

Performance

🚀 Ready to Launch