# Vanilla JavaScript Integration

Use the CDN build for the fastest setup, or use NPM if you have a build step.

## Option A: CDN (Declarative)

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Vanilla JS Product Page</title>

  <script
    defer
    data-liquid-commerce-elements
    data-token="YOUR_API_KEY"
    data-env="production"
    data-container-1="product"
    data-product-1="00619947000020"
    data-cart-badge-button="header-cart"
    type="text/javascript"
    src="https://elements.reservebar-worker.workers.dev/all/elements.js"
  ></script>
</head>
<body>
  <header>
    <h1>Premium Spirits</h1>
    <div id="header-cart"></div>
  </header>

  <main>
    <div id="product"></div>
  </main>
</body>
</html>
```

## Option B: CDN (Programmatic)

```html
<script
  defer
  data-liquid-commerce-elements
  data-token="YOUR_API_KEY"
  data-env="production"
  type="text/javascript"
  src="https://elements.reservebar-worker.workers.dev/all/elements.js"
></script>

<script>
window.addEventListener('lce:actions.client_ready', async () => {
  const client = window.LiquidCommerce.elements;
  await client.injectProductElement([
    { containerId: 'product', identifier: '00619947000020' }
  ]);
});
</script>

<div id="product"></div>
```

## Option C: NPM

```bash
npm install @liquidcommerce/elements-sdk
```

```javascript
import { Elements } from '@liquidcommerce/elements-sdk';

const client = await Elements('YOUR_API_KEY', { env: 'production' });

await client.injectProductElement([
  { containerId: 'product', identifier: '00619947000020' }
]);
```

## Related Docs

- [Product Component](../guides/product-component.md)
- [Cart Component](../guides/cart-component.md)
- [Client API](../api/client.md)
