open-index/open-npm huggingface dataset:
npm package: @queuezero/embed
Description: Embeddable vanilla JS widget for QueueZero viral waitlists
Author: QueueZero Team
Latest version: 0.1.12

# @queuezero/embed

Embeddable vanilla JS widget for QueueZero viral waitlists. No build step required.

## Installation

### Via CDN (Recommended)

```html
<div id="queuezero-waitlist"></div>
<script src="https://cdn.jsdelivr.net/npm/@queuezero/embed@latest/dist/index.global.js"></script>
<script>
  QueueZero.init('queuezero-waitlist', 'your-campaign-slug', {
    apiUrl: 'https://api.queuezero.io'
  });
</script>
```

### Via NPM

```bash
npm install @queuezero/embed
```

```js
import * as QueueZero from '@queuezero/embed';

QueueZero.init('queuezero-waitlist', 'your-campaign-slug', {
  apiUrl: 'https://api.queuezero.io'
});
```

## API

### `QueueZero.init(elementId, campaignSlug, options)`

Mounts a complete waitlist widget (form + status + referral share) to the specified element.

| Parameter | Type | Description |
|-----------|------|-------------|
| `elementId` | `string \| null` | ID of the container element, or `null` for headless mode |
| `campaignSlug` | `string` | Your campaign identifier |
| `options.apiUrl` | `string` | API endpoint URL |
| `options.displayMode` | `'inline' \| 'modal'` | Display as inline form or modal (default: `'inline'`) |
| `options.modalOptions` | `object` | Modal configuration (only when `displayMode: 'modal'`) |
| `options.modalOptions.triggerText` | `string` | Button text (default: `'Join Waitlist'`) |
| `options.modalOptions.triggerText` | `string` | Button text (default: `'Join Waitlist'`) |
| `options.modalOptions.attachToText` | `string` | Automatically attach modal to buttons with this text |
| `options.modalOptions.size` | `'sm' \| 'md' \| 'lg'` | Modal width (default: `'md'`) |

### Modal Mode Example

```html
<script src="https://cdn.jsdelivr.net/npm/@queuezero/embed@latest/dist/index.global.js"></script>
<script>
  // Headless mode: Pass null as container ID and use attachToText
  QueueZero.init(null, 'your-campaign-slug', {
    apiUrl: 'https://api.queuezero.io',
    displayMode: 'modal',
    modalOptions: {
      attachToText: 'Join Waitlist', // Will attach to any button with this text
      size: 'md'
    }
  });
</script>
```

The modal automatically uses your campaign's branding (logo, cover image, theme color) from the API.

## Styling

The widget uses `qz-*` class names for styling:

```css
.qz-embed-container { }
.qz-form { }
.qz-form-input { }
.qz-form-button { }
.qz-status { }
.qz-share { }
```

## License

MIT