Wearly
Wearly
Documentation
HomeDocumentationQuick Start

Quick Start Guide

Get up and running with Wearly in just a few minutes. This guide will walk you through the basic steps to integrate Wearly into your eCommerce platform.

1. Create a Wearly Account

Before you begin, you'll need to create a Wearly account and obtain your API keys.

  1. Go to the Wearly Dashboard and sign up for an account.
  2. Once logged in, navigate to the "API Keys" section.
  3. Generate a new API key and make note of it. You'll need this key for authentication.

Important

Keep your API key secure and never expose it in client-side code. Use environment variables to store your API key.

2. Choose Your Integration Method

Wearly offers several integration methods to fit your needs:

Platform Plugins

The easiest way to integrate Wearly is with our platform-specific plugins for popular eCommerce platforms.

JavaScript SDK

For custom implementations, our JavaScript SDK provides a simple way to integrate Wearly into your frontend.

Learn more about the JavaScript SDK

REST API

For complete control, you can use our REST API directly to implement Wearly's features.

View API Documentation

React Components

If you're using React, our pre-built components make it easy to add Wearly to your application.

View React Components

3. Basic Implementation Example

Here's a simple example of how to implement Wearly's search functionality using the JavaScript SDK:

// 1. Install the Wearly SDK
npm install @wearly/sdk

// 2. Initialize the SDK with your API key
import { Wearly } from '@wearly/sdk';

const wearly = new Wearly({
  apiKey: 'YOUR_API_KEY',
  storeId: 'YOUR_STORE_ID'
});

// 3. Implement search functionality
document.querySelector('#search-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const query = document.querySelector('#search-input').value;
  
  try {
    const results = await wearly.search(query);
    
    // Display results
    const resultsContainer = document.querySelector('#search-results');
    resultsContainer.innerHTML = '';
    
    results.forEach(product => {
      const productElement = document.createElement('div');
      productElement.className = 'product-item';
      productElement.innerHTML = `
        <img src="${product.imageUrl}" alt="${product.name}">
        <h3>${product.name}</h3>
        <p>${product.price}</p>
      `;
      
      resultsContainer.appendChild(productElement);
    });
  } catch (error) {
    console.error('Search error:', error);
  }
});

4. Configure Your Catalog

For Wearly to provide accurate search results and recommendations, you'll need to configure your product catalog.

Option 1: Automatic Sync

If you're using one of our platform plugins, your catalog will be automatically synced with Wearly.

Option 2: Manual Upload

You can manually upload your catalog through the Wearly Dashboard:

  1. Go to the "Catalog" section in your Wearly Dashboard.
  2. Click "Upload Catalog" and select your product feed file (CSV, JSON, or XML).
  3. Map your product attributes to Wearly's schema.
  4. Click "Upload" to start the indexing process.

Option 3: API Integration

For real-time catalog updates, you can use our Catalog API:

// Example: Adding a new product via the API
const response = await fetch('https://api.wearly.ai/v1/catalog/products', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY'
  },
  body: JSON.stringify({
    id: 'product-123',
    name: 'Summer Floral Dress',
    description: 'Light and airy floral dress perfect for summer.',
    price: 79.99,
    currency: 'USD',
    imageUrl: 'https://example.com/images/summer-dress.jpg',
    categories: ['dresses', 'summer', 'floral'],
    attributes: {
      color: 'blue',
      size: ['S', 'M', 'L'],
      material: 'cotton'
    }
  })
});

const result = await response.json();
console.log('Product added:', result);

5. Implement Frontend Components

Once your catalog is configured, you can implement Wearly's frontend components:

Search Bar

Add the Wearly search bar to your site:

<!-- HTML -->
<div id="wearly-search"></div>

<!-- JavaScript -->
<script>
  wearly.renderSearchBar({
    container: '#wearly-search',
    placeholder: 'Search for products...',
    options: {
      showSuggestions: true,
      instantSearch: true
    }
  });
</script>

Virtual Try-On

Add the Virtual Try-On widget to your product pages:

<!-- HTML -->
<div id="wearly-vton" data-product-id="product-123"></div>

<!-- JavaScript -->
<script>
  wearly.renderVTON({
    container: '#wearly-vton',
    options: {
      showSizeRecommendation: true,
      allowPhotoUpload: true
    }
  });
</script>

Personal Shopper

Add the Personal Shopper chat widget to your site:

<!-- HTML -->
<div id="wearly-personal-shopper"></div>

<!-- JavaScript -->
<script>
  wearly.renderPersonalShopper({
    container: '#wearly-personal-shopper',
    options: {
      position: 'bottom-right',
      welcomeMessage: 'Hi there! How can I help you find the perfect outfit today?'
    }
  });
</script>

Next Steps

Now that you have the basics set up, you can explore more advanced features: