npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

artlabs-experience

v2.0.3

Published

artlabs experience SDK for VTO & AR

Downloads

1,316

Readme

artlabs Experience SDK

artlabs Experience is the SDK for artlabs platform to enhance web applications with Augmented Reality (AR) and Virtual Try-On (VTO) capabilities. This library integrates various modules to provide a seamless experience in product visualization and interaction.

Installation

Via NPM

Install the ES module using npm:

npm install artlabs-experience

Via Script Tag

You can directly UMD build to your HTML page:

<script src="https://unpkg.com/artlabs-experience/dist/artlabs-experience.umd.js"></script>

You'll need to paste script code before closing </body> tag of your web page.

Usage

To start using the library, you must import the ArtlabsExperience module in your JavaScript file:

import ArtlabsExperience from 'artlabs-experience';

Or, if you're using named exports:

import { init, startAR } from 'artlabs-experience';

If you're using the UMD build, you can access the library via the global ArtlabsExperience object:

Then initialize the library with your token. It's a zero-config by default, but you can pass your configuration options as well. You can join the platform and get your API key at artlabs.ai.

ArtlabsExperience.init({
  token: 'YOUR_TOKEN_HERE',
});

Config

To initialize the ArtlabsExperience library with custom settings for the Augmented Reality (AR) and Virtual Try-On (VTO) experiences, pass the configuration options as shown in the example below. Modify the options to suit your application's requirements:

Common Config

| Option | Default Value | Description | | ------ | ------------- | ------------------------------------------------------------------------------------------------ | | locale | en | Sets SDK language. Accepts ISO language codes. Available locales are; en, de, fr, es, it, nl, no |

AR Configuration Options

| Option | Default Value | Description | | ---------------- | --------------- | --------------------------------------------------------- | | debugMode | false | Enables additional logging for debugging purposes. | | showBanner | false | Controls the visibility of a banner in the AR experience. | | bannerType | 'default' | The type of banner displayed in the AR experience. | | bannerButtonText | 'Add to Cart' | The type of banner displayed in the AR experience. |

VTO Configuration Options

| Option | Default Value | Description | | ------------ | ------------- | ------------------------------------------------------------------ | | debugMode | false | Enables additional logging for debugging purposes. | | fontFamily | 'inherit' | The font family used in the VTO experience interface. | | disableUI | false | If true, the default user interface for VTO will be disabled. | | showAction | false | Controls the visibility of action buttons in the VTO experience. | | logoUrl | false | URL of the logo to be displayed in the VTO experience. | | useWatermark | false | Determines whether a watermark is displayed in the VTO screenshot. |

Example Config

ArtlabsExperience.init({
  token: 'YOUR_TOKEN_HERE',
  config: {
    locale: 'en',
    vto: {
      debugMode: false, // Set to true to enable debugging
      fontFamily: 'inherit', // Customize the font for the UI
      disableUI: false, // Set to true to disable the default UI
      showBanner: true, // Set to true to display a banner in VTO
      bannerButtonText: 'Add to Cart', // Customize the text for the banner button
      logoUrl: 'https://example.com/path/to/logo.png', // Provide a URL for your custom logo
      useWatermark: true, // Set to true to include a watermark in screenshots
    },
    ar: {
      debugMode: false, // Set to true to enable debugging
      showBanner: true, // Set to true to display a banner in the AR experience
      bannerType: 'default', // Specify a custom banner type
      bannerButtonText: 'Buy Now',
    },
  },
});

Starting AR and VTO Experiences

Invoke AR or VTO experiences with product SKUs and configuration:

// Start AR Experience
await ArtlabsExperience.startAR('PRODUCT_SKU', {
  // Optional product metadata to show in AR banner
  product: {
    title: 'Product Title',
    subtitle: 'Product Subtitle',
    price: '100$',
  },
});

// Start VTO Experience.
// You can pass multiple SKUs as comma separated string or a single SKU
await ArtlabsExperience.startVTO('PRODUCT_SKU1,PRODUCT_SKU2,PRODUCT_SKU3');

// Stop VTO Experience
await ArtlabsExperience.stopVTO();

// Change product in experience
await ArtlabsExperience.changeProduct('PRODUCT_SKU4');

Events

There are multiple events that can be listened to. You can register an event listener via invoking the addEventListener method.

ArtlabsExperience.addEventListener('event-name', callbackFunction);
ArtlabsExperience.removeEventListener('event-name', callbackFunction);

AR Events

  • ar-banner-click Triggered when a user clicks on the AR banner. This event is dispatched with an object containing the sku of the product and the productConfig.

VTO Events

  • vto-banner-click Triggered when a user clicks on the VTO banner. This event is dispatched with an object containing the sku of the product and the productConfig.
  • vto-load Emitted when the VTO experience begins loading. It signifies that the resources and assets for the VTO are being fetched and initialized.
  • vto-change-product Dispatched when there is a change in the product displayed during the VTO experience, allowing for dynamic updating of the product being tried on.
  • vto-error Fired when an error occurs within the VTO experience. It sends a message detailing the error, which can be used for debugging or user feedback.
  • stop-vto Sent out when the VTO experience is terminated, either by user action or programmatically.

Checking for AR and VTO Availability

Sometimes you may want to check if the current product has enabled AR or VTO experiences so you can show/hide relevant buttons. You can do that by invoking the checkAvailability method.

const availabilityResult = await ArtlabsExperience.checkAvailability('SKU1,SKU2,SKU3');

// availabilityResult will be an object with the following properties:
// {
//   SKU1: {
//     ar: true,
//     vto: true,
//   },
//   SKU2: {
//     ar: false,
//     vto: false,
//   },
//   SKU3: {
//     ar: true,
//     vto: false,
//   },
// }