Documentation - DressUp Virtual Try-On Platform

Getting Started

Welcome to DressUp! This guide will walk you through setting up virtual try-on functionality on your e-commerce website in just a few simple steps.

1

Create Your Account

Register as an assistant and verify your email

2

Generate API Key

Create and secure your API key for authentication

3

Configure Widget

Customize appearance and messaging

4

Integrate & Test

Add code to your website and test functionality

Account Setup Process

1. Registration

Fill out the registration form with your details and company information

2. Email Verification

Check your email and click the verification link to activate your account

3. Dashboard Access

Access your assistant dashboard with full management capabilities

Integration Guide

JavaScript Code Generation

Generate ready-to-use JavaScript code for your widget integration.

Step 1: Create Widget Configuration

1. Go to Assistant Dashboard → Widget Configurations
2. Click "Create New Configuration"
3. Customize all settings (colors, messages, etc.)
4. Save your configuration

Step 2: Generate JavaScript Code

1. Go to your widget configuration
2. Click "View Integration Code"
3. Copy the generated JavaScript
4. Paste into your website's HTML

Generated JavaScript Code Example

<!-- DressUp Virtual Try-On Widget -->
<script src="https://vdressup.com/js/dressup-widget.min.js"></script>
<script>
  new DressUpWidget({
    apiKey: 'dressup_abc123def456...',
    apiUrl: 'https://vdressup.com/api',
    config: {
      primary_color: '#6366f1',
      secondary_color: '#8b5cf6',
      text_color: '#ffffff',
      background_color: '#1a1a1a',
      font_family: 'Inter, sans-serif',
      font_size: '16px',
      border_radius: '12px',
      welcome_message: 'Try this on virtually!',
      upload_message: 'Upload your photo to see how this looks on you.',
      processing_message: 'Creating your virtual try-on experience...',
      success_message: 'Perfect! Here\'s how this looks on you.',
      error_message: 'Oops! Something went wrong. Please try again.',
      show_branding: true,
      branding_text: 'Powered by DressUp',
      widget_bottom: '10px',
      widget_right: '2%',
      max_visits_per_product: 5
    }
  });
</script>

Pro Tip

The generated code includes all your custom settings. Just replace the API key with your actual key and you're ready to go!

Basic Integration

Add this code to your website's HTML before the closing </body> tag:

<!-- DressUp Virtual Try-On Widget -->
<script src="https://vdressup.com/js/dressup-widget.min.js"></script>
<script>
  new DressUpWidget({
    apiKey: 'YOUR_API_KEY_HERE',
    apiUrl: 'https://vdressup.com/api',
    primaryColor: '#6366f1',
    secondaryColor: '#8b5cf6',
    textColor: '#ffffff',
    backgroundColor: '#1a1a1a',
    welcomeMessage: 'Try this on virtually!',
    showBranding: true,
    brandingText: 'Powered by DressUp'
  });
</script>

Important

Replace 'YOUR_API_KEY_HERE' with your actual API key from the dashboard.

Product Detection Setup

The widget automatically detects product images using two methods:

Method 1: Data Attribute (Recommended)

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

Add the data-elsy-tag attribute to your product images for automatic detection.

Method 2: Alt Text Detection

<img src="product.jpg" 
     alt="VDressUp Summer Dress">

Include "VDressUp" in the alt text (case-insensitive) as a fallback method.

Integration Examples

Fashion Store

Complete e-commerce integration with product gallery and virtual try-on functionality.

Furniture Store

Room visualization for furniture and home decor with virtual placement.

Widget Configuration & Management

Creating Widget Configurations

Create and customize widget configurations to match your brand and requirements.

Step 1: Create New Configuration

1. Go to Assistant Dashboard → Widget Configurations
2. Click "Create New Configuration"
3. Fill in basic information (name, description)
4. Set status to "Active"

Step 2: Customize Appearance

• Color scheme customization
• Typography settings
• Border radius and positioning
• Live preview functionality

Step 3: Configure Messages

• Welcome and upload messages
• Processing and success messages
• Error handling messages
• Branding text options

Step 4: Generate Integration Code

// Generated Widget Configuration Code
new DressUpWidget({
  apiKey: 'your_api_key_here',
  apiUrl: 'https://vdressup.com/api',
  config: {
    primary_color: '#6366f1',
    secondary_color: '#8b5cf6',
    text_color: '#ffffff',
    background_color: '#1a1a1a',
    font_family: 'Inter, sans-serif',
    font_size: '16px',
    welcome_message: 'Try this on virtually!',
    branding_text: 'Powered by DressUp'
  }
});

Copy the generated code and paste it into your website's HTML.

API Key Management

Generate and manage API keys for authenticating your widget requests.

Creating API Keys

1. Go to Assistant Dashboard → API Keys
2. Click "Create New API Key"
3. Enter name and description
4. Set status to "Active"
5. Click "Generate API Key"

API Key Security

Important Security Tips

• Copy your API key immediately
• Store it securely (password manager)
• Never share it publicly
• Regenerate if compromised

Using API Keys in Widget Code

<script src="https://vdressup.com/js/dressup-widget.min.js"></script>
<script>
  new DressUpWidget({
    apiKey: 'dressup_abc123def456...', // Your generated API key
    apiUrl: 'https://vdressup.com/api',
    // ... other configuration options
  });
</script>

Credit Management System

Manage your virtual try-on credits for processing customer photos.

Understanding Credits

Credit System

• $0.07 per credit
• 1 credit = 1 virtual try-on
• Minimum purchase: $5 (71 credits)
• Free credits with larger purchases

Free Credit Bonuses

$25+ Purchase +75 Free Credits

$50+ Purchase +150 Free Credits

$100+ Purchase +150 Free Credits

Purchasing Credits

1. Go to Assistant Dashboard → Credits
2. Click "Purchase Credits"
3. Select amount ($5, $25, $50, $100+)
4. Complete Stripe payment
5. Credits added instantly

Credit Usage Tracking

• Real-time credit balance
• Usage history and analytics
• Cost breakdown per widget
• Low balance notifications

Advanced Configuration Options

Visit Limits

Set maximum visits per product to control API usage and costs

Positioning

Control widget placement and positioning on your website

Security

API key authentication and secure data handling

API Reference

Available Endpoints

POST /api/widget/detect-product

POST

Detects if a product is suitable for virtual try-on using AI analysis

{
  "meta_title": "Product Title",
  "meta_description": "Product Description",
  "page_url": "https://example.com/product",
  "product_image_url": "https://example.com/image.jpg",
  "domain": "example.com"
}

POST /api/widget/process-image