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/v0.0.95/index.umd.js"></script>

<script>
  var aiuta = new Aiuta(
    auth: { // (1)!
      subscriptionId: "your_subscription_id", // (2)!
      getJwt: async (params) => {
        return "JWT_from_your_backend"; // (3)!
      }
    },
    userInterface: { // (4)!
      customCssUrl: "url_to_custom_css"; // (5)!
      iframeStyles: { // (6)!
        borderRadius: "12px",
        top: "120px",
        right: "18px"
      }
    },
    analytics: { // (7)!
      handler: {
        onAnalyticsEvent: (event) => {
          console.log('Aiuta Event:', event); // (8)!
        }
      }
    }
  );

  aiuta.tryOn("your_product_id"); // (9)!
</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. Limited customization of user interface.

   Please see details for more information on currently supported configurations

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 details for more information on currently supported styles

6. Optional iframeStyles allows you to customize the appearance and positioning of the SDK iframe.

   The following properties are supported (all are optional):

   • transition?: CSS transition property for show/hide effects
   • border?: CSS border property for the iframe
   • borderRadius?: CSS border-radius property for rounded corners
   • boxShadow?: CSS box-shadow property for drop shadows
   • top?: CSS top offset for positioning
   • right?: CSS right offset for positioning

   Example

   iframeStyles: {
     borderRadius: "12px",
     top: "120px",
     right: "18px",
     boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
   }
   

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

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

9. 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¶