@queuezero/embed

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

Installation

Via CDN (Recommended)

<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

npm install @queuezero/embed

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

<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:

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

License

MIT