Getting Started with Camweara API

Integrate the Camweara Virtual Try-On experience seamlessly into your e-commerce platform. Embed the camweara_api.js script and invoke the loadTryOnButton function as shown below to render Virtual Try On product pages, the try on button appears only if sku is present on the Camweara Dashboard.

Example Integration

<script onload="loadTryOnButton({
    psku: 'earring6',
    company: 'Teststore',
    buynow: { enable: 'true' },
    regionId: '2',
    prependButton: { class: 'product-form' },
    MBprependButton: { class: 'product-main_div' },
    styles: {
        tryonbutton: { backgroundColor: 'white', color: 'black', border: '1px solid black', borderRadius: '25px' },
        tryonbuttonHover: { backgroundColor: 'black', color: 'white', border: 'none', borderRadius: '25px' },
        MBtryonbutton: { width: '100%', borderRadius: '25px' }
    },
    tryonButtonData: { text: 'Virtual Try-On', faIcon: 'fa fa-camera' }
});" src="https://cdn.camweara.com/integrations/camweara_api.js"></script>

Configuration Arguments

The loadTryOnButton function accepts a rich configuration object. Below is the detailed breakdown of every supported property.

Core Setup

psku

string | object

The SKU identifier for the product to be loaded into the virtual try-on.

As an Object

Loads main SKU with recommendations.

psku: {
  main: 'sku_name',
  // array or string
  recommendedSkus: ['rec1', 'rec2']
}

As a String

Loads only the specified SKU.

psku: 'sku_name'

Note: The psku will accept string and object. Passing string (sku name) will get only the passed sku and passing the object (main: sku name, recommendedSkus: array or string) will load the sku with passed recommended skus.

company

string

Your registered company name.

company: 'your_company_name'

Note: Find your company name from the dashboard. Go to Camweara Dashboard > Profile and copy the company name from there, as it must match exactly as it is in the dashboard.

regionId

number

Specifies the server storage region for optimized loading.

0 - Mumbai (Default)
1 - CDN (Global)
2 - USA (Virginia)

regionId: 2

Behavior & Rules

prodRecommendation

boolean

Displays product recommendations sourced directly from the Camweara dashboard.

prodRecommendation: 'true'

Buy Now Integration

buynow

object

Configures the "Buy Now" button inside the AR experience.

Property	Type	Description
enable	'true' \| 'false'	Toggles the Buy Now feature on or off.
productIdShopify	string	Required to add item to cart directly (Shopify only). Do not pass alongside `searchProduct`.
searchProduct	'true' \| 'false'	Enables search functionality (Shopify only). Default is 'false'.
closeTryOnPopup	'true' \| 'false'	Controls if virtual tryon closes on click. Default is 'true'.

Direct Buy (Shopify)

buynow: {
  enable: 'true',
  productIdShopify: '{{ pid1 }}',
  closeTryOnPopup: 'false'
}

Search Products (Shopify)

buynow: {
  enable: 'true',
  searchProduct: 'true',
  closeTryOnPopup: 'false'
}

Note: Pass true or false to enable or disable.

buynow button, searchProduct: true for enable search, false for no search, default is false.
pass either searchProduct or productIdShopify don't pass both.
when passing searchProduct no need to pass buynowCallback as it serves no use.

buynowCallback

function name

Custom function triggered upon clicking Buy Now. Only needed if searchProduct is false.

buynowCallback: 'myCustomCartFunction'

Button Placement

Inject the button dynamically into your DOM by targeting a CSS class or an ID.

appendButton & MBappendButton

object

Places the try-on button after the targeted element.

// Target by class
appendButton: { class: 'product-form' }

// For Mobile specifically
MBappendButton: { class: 'mobile-product-form' }

prependButton & MBprependButton

object

Places the try-on button before the targeted element.

// Target by class
prependButton: { class: 'product-form' }

// For Mobile specifically
MBprependButton: { class: 'mobile-product-form' }

Cosmetics & Styling

tryonButtonData

object

Configures the actual inner content (icon and text) of the Try-On button.

tryonButtonData: {
  text: 'Virtual Try-On',
  faIcon: 'fa fa-camera' // Font Awesome 4 class
}

styles

object

Fully customize the button's CSS logic across states (idle, hover) and screen sizes (desktop, mobile).

styles: {
  // Desktop defaults
  tryonbutton: { 
    width: '100%', 
    borderRadius: '25px', 
    backgroundColor: 'white', 
    color: 'black' 
  },
  // Desktop hover state
  tryonbuttonHover: { 
    backgroundColor: 'black', 
    color: 'white' 
  },
  // Mobile overrides
  MBtryonbutton: { 
    width: '100%', 
    borderRadius: '25px' 
  },
  // Mobile hover state
  MBtryonbuttonHover: { 
    backgroundColor: 'black', 
    borderRadius: '15px' 
  }
}

Utility: Fetch SKU List

Retrieve a complete list of SKUs enabled for Try-On within your company namespace. This is an asynchronous function provided natively by the Camweara script.

Important Dependency

Ensure the core API script <script src="https://camweara.com/integrations/camweara_api.js"></script> is loaded into your DOM before calling this function.

getSkusListWithTryOn

// Call function passing companyName object
getSkusListWithTryOn({ companyName: 'your company name' })
    .then((skulist) => {
        // Returns an array of SKUs
        console.log("Try-On Enabled SKUs:", skulist);
    })
    .catch((error) => {
        console.error("Failed to fetch SKUs", error);
    });