Web SDK¶

The Aiuta Web SDK provides a virtual try-on solution for your fashion e-commerce platform using Aiuta Virtual Try On API.

Quick Start¶

<script src="https://static.aiuta.com/sdk/1.0.5/index.umd.js"></script>

<script>
  const aiuta = new Aiuta({
    auth: { // (1)!
      subscriptionId: 'your_subscription_id', // (2)!
      getJwt: async (params) => {
        return 'JWT_from_your_backend' // (3)!
      },
    },
    userInterface: {  // (4)!
      theme: {
        customCssUrl: 'https://your-domain.com/aiuta-custom.css', // (5)!
      },
    },
    analytics: {  // (6)!
      handler: {
        onAnalyticsEvent: (event) => {
          console.log('Aiuta Event:', event) // (7)!
        },
      },
    },
  })

  aiuta.tryOn('your_product_id') // (8)!
</script>

1. auth required to authenticate Aiuta SDK to use API with your credentials. Supported authentication methods are ApiKey or Jwt + subscriptionId.

2. Should be provided for the SDK to make unsecured requests related to your account.

   Please see Obtaining credentials for instructions on how to get your subscriptionId

3. The implementation of this method should securely generate the JWT on the server side and subsequently return it to the SDK.

   Please see getJwt section of JwtAuth for more information on how it works

4. userInterface optional customization of user interface.

5. Optional URL to the CSS file with styles configuration for the Web SDK App.

   CORS

   The CSS file provided by customCssUrl must be accessible for loading by a cross-origin iframe hosted on static.aiuta.com

   This means the server hosting your CSS must send appropriate CORS headers (e.g., Access-Control-Allow-Origin: https://static.aiuta.com) to allow the SDK iframe to fetch and apply your custom styles.

   Please see Custom CSS for styling options and Localization for text customization

6. Optional configuration to handle analytics events generated by the SDK.

7. Callback function that processes analytics events generated by the SDK, allowing integration with external analytics services or custom event handling.

8. Open SDK UI to start try on flow with selected product identifier.

   Please note that you should obtain information about the availability of the virtual try-on feature for each of your products from your backend, as the SDK does not receive information about product availability and will attempt to launch a virtual try-on with any product you provide, which may result in an error if that product has not been trained by Aiuta.

Sources and Demo¶