JavaScript

Use a Package Manager

Install

pnpm add @neurodyn/ai-try-on

npm install @neurodyn/ai-try-on

yarn add @neurodyn/ai-try-on

bun add @neurodyn/ai-try-on

Create a Trigger

AI Try On reads configuration from data attributes on the element you bind. The same markup can be used with the package manager, global, and embed integrations.

<button
  type="button"
  data-neurodyn-ai-try-on-dialog
  data-neurodyn-ai-try-on-api-key="..."
  data-neurodyn-ai-try-on-product-type="eyewear"
  data-neurodyn-ai-try-on-product-name="Sample Glasses"
  data-neurodyn-ai-try-on-product-image-src="https://example.com/products/glasses.jpg"
>
  Try on
</button>

Initialize AiTryOnDialog:

import { AiTryOnDialog } from '@neurodyn/ai-try-on'

const viewer = new AiTryOnDialog('[data-neurodyn-ai-try-on-dialog]')

// Later, when the triggers are no longer needed:
// viewer.destroy()

You can use AI Try On directly from a CDN without installing a package. Use the global build when you want to initialize triggers yourself, or the embed build when the script should initialize matching triggers automatically.

Global Build

The global build exposes AiTryOnDialog, so you can choose exactly which elements should open the dialog.

<script src="https://cdn.neurodyn.ai/@neurodyn/ai-try-on/dist/ai-try-on.global.min.js"></script>

Full example:

<button
  type="button"
  data-neurodyn-ai-try-on-dialog
  data-neurodyn-ai-try-on-api-key="..."
  data-neurodyn-ai-try-on-product-type="eyewear"
  data-neurodyn-ai-try-on-product-name="Sample Glasses"
  data-neurodyn-ai-try-on-product-image-src="https://example.com/products/glasses.jpg"
>
  Try on
</button>

<script src="https://cdn.neurodyn.ai/@neurodyn/ai-try-on/dist/ai-try-on.global.min.js"></script>
<script>
  const viewer = new AiTryOnDialog('[data-neurodyn-ai-try-on-dialog]')

  // Later, when the trigger is no longer needed:
  // viewer.destroy()
</script>

Embed Build

The embed build initializes itself and listens for clicks on elements with data-neurodyn-ai-try-on-dialog.

<script defer src="https://cdn.neurodyn.ai/@neurodyn/ai-try-on/dist/ai-try-on.embed.min.js"></script>

<button
  type="button"
  data-neurodyn-ai-try-on-dialog
  data-neurodyn-ai-try-on-api-key="..."
  data-neurodyn-ai-try-on-product-type="eyewear"
  data-neurodyn-ai-try-on-product-name="Sample Glasses"
  data-neurodyn-ai-try-on-product-image-src="https://example.com/products/glasses.jpg"
>
  Try on
</button>

Next steps

Read the JavaScript API reference.