@queuezero/embed 0.1.7 → 0.1.9

package/README.md

@@ -41,6 +41,29 @@ Mounts a complete waitlist widget (form + status + referral share) to the specif
 | `elementId` | `string` | ID of the container element |
 | `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.size` | `'sm' \| 'md' \| 'lg'` | Modal width (default: `'md'`) |
+
+### Modal Mode Example
+
+```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',
+    displayMode: 'modal',
+    modalOptions: {
+      triggerText: 'Join Our Waitlist',
+      size: 'md'
+    }
+  });
+</script>
+```
+
+The modal automatically uses your campaign's branding (logo, cover image, theme color) from the API.
 
 ## Styling
 

package/dist/index.global.js

@@ -1,12 +1,29 @@
-var QueueZero=(()=>{var u=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var y=(n,e,t)=>e in n?u(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var z=(n,e)=>{for(var t in e)u(n,t,{get:e[t],enumerable:!0})},x=(n,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of f(e))!q.call(n,i)&&i!==t&&u(n,i,{get:()=>e[i],enumerable:!(o=b(e,i))||o.enumerable});return n};var v=n=>x(u({},"__esModule",{value:!0}),n);var p=(n,e,t)=>y(n,typeof e!="symbol"?e+"":e,t);var E={};z(E,{init:()=>w});var $=`
+var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var z=(a,e,t)=>e in a?h(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var q=(a,e)=>{for(var t in e)h(a,t,{get:e[t],enumerable:!0})},x=(a,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of b(e))!v.call(a,o)&&o!==t&&h(a,o,{get:()=>e[o],enumerable:!(r=y(e,o))||r.enumerable});return a};var $=a=>x(h({},"__esModule",{value:!0}),a);var d=(a,e,t)=>z(a,typeof e!="symbol"?e+"":e,t);var C={};q(C,{init:()=>k});var w=`
+/* Base Form Styles */
 .qz-form {
-  font-family: system-ui, -apple-system, sans-serif;
-  max-width: 400px;
-  margin: 0 auto;
+  font-family: var(--qz-font-family, system-ui, -apple-system, sans-serif);
+  max-width: 100%;
 }
 .qz-form-group {
   margin-bottom: 16px;
 }
+.qz-checkbox-group {
+  display: flex;
+  align-items: center;
+}
+.qz-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  color: #e0e0e0;
+  font-size: 14px;
+}
+.qz-checkbox {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--qz-theme-color, #10B981);
+}
 .qz-label {
   display: block;
   margin-bottom: 6px;
@@ -14,7 +31,7 @@ var QueueZero=(()=>{var u=Object.defineProperty;var b=Object.getOwnPropertyDescr
   font-weight: 500;
   color: #e0e0e0;
 }
-.qz-input {
+.qz-input, .qz-select, .qz-textarea {
   width: 100%;
   padding: 12px 16px;
   font-size: 16px;
@@ -25,11 +42,15 @@ var QueueZero=(()=>{var u=Object.defineProperty;var b=Object.getOwnPropertyDescr
   box-sizing: border-box;
   transition: border-color 0.15s;
 }
-.qz-input:focus {
+.qz-textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+.qz-input:focus, .qz-select:focus, .qz-textarea:focus {
   outline: none;
   border-color: var(--qz-theme-color, #10B981);
 }
-.qz-input::placeholder {
+.qz-input::placeholder, .qz-textarea::placeholder {
   color: #6c7086;
 }
 .qz-button {
@@ -42,11 +63,14 @@ var QueueZero=(()=>{var u=Object.defineProperty;var b=Object.getOwnPropertyDescr
   border: none;
   border-radius: 8px;
   cursor: pointer;
-  transition: opacity 0.15s;
+  transition: opacity 0.15s, transform 0.1s;
 }
 .qz-button:hover {
   opacity: 0.9;
 }
+.qz-button:active {
+  transform: scale(0.98);
+}
 .qz-button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -79,69 +103,204 @@ var QueueZero=(()=>{var u=Object.defineProperty;var b=Object.getOwnPropertyDescr
   padding: 24px;
   color: #6c7086;
 }
-`,h=class{constructor(e,t,o){p(this,"container");p(this,"campaign");p(this,"options");p(this,"configData",null);p(this,"submitted",!1);p(this,"submittedData",null);let i=document.getElementById(e);if(!i){console.error(`QueueZero: Element with ID "${e}" not found.`),this.container=document.createElement("div");return}this.container=i,this.campaign=t,this.options=o,this.injectStyles(),this.render(),this.loadCampaign()}injectStyles(){if(document.getElementById("qz-styles"))return;let e=document.createElement("style");e.id="qz-styles",e.textContent=$,document.head.appendChild(e)}render(){this.container.innerHTML='<div class="qz-loading">Loading waitlist...</div>'}async loadCampaign(){try{let e=await fetch(`${this.options.apiUrl}/v1/config/${this.campaign}`);if(!e.ok)throw new Error(`Waitlist not found (${e.status})`);this.configData=await e.json(),this.renderForm()}catch(e){this.container.innerHTML=`<div class="qz-error">Failed to load waitlist: ${e.message}</div>`}}renderForm(){if(!this.configData)return;let e=this.configData.branding?.themeColor||"#10B981";this.container.style.setProperty("--qz-theme-color",e);let t=(this.configData.formFields||[]).filter(r=>r.enabled);t.length===0&&t.push({key:"email",label:"Email Address",type:"email",enabled:!0,required:!0});let o=r=>{let c=`qz-${r.key}`,m=`<label class="qz-label" for="${c}">${r.label}${r.required?" *":""}</label>`,l=r.required?"required":"",a=r.placeholder||"";switch(r.type){case"select":let d=(r.options||[]).map(s=>`<option value="${s}">${s}</option>`).join("");return`
+
+/* Trigger Button */
+.qz-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 14px 28px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  background: var(--qz-theme-color, #10B981);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.1s;
+}
+.qz-trigger:hover {
+  opacity: 0.9;
+}
+.qz-trigger:active {
+  transform: scale(0.98);
+}
+
+/* Modal Overlay */
+.qz-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s, visibility 0.2s;
+}
+.qz-modal-overlay.qz-modal-open {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Modal Container */
+.qz-modal {
+  background: var(--qz-bg-color, #1e1e2e);
+  border-radius: 16px;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  transform: scale(0.95) translateY(10px);
+  transition: transform 0.2s;
+}
+.qz-modal-overlay.qz-modal-open .qz-modal {
+  transform: scale(1) translateY(0);
+}
+.qz-modal-sm { width: 360px; }
+.qz-modal-md { width: 440px; }
+.qz-modal-lg { width: 520px; }
+
+/* Modal Header */
+.qz-modal-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #3a3a4a;
+}
+.qz-modal-logo {
+  height: 32px;
+  width: auto;
+}
+.qz-modal-close {
+  background: none;
+  border: none;
+  color: #6c7086;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 8px;
+  transition: background 0.15s, color 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.qz-modal-close:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+.qz-modal-close svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Modal Cover Image */
+.qz-modal-cover {
+  width: 100%;
+  max-height: 160px;
+  object-fit: cover;
+}
+
+/* Modal Body */
+.qz-modal-body {
+  padding: 24px;
+  overflow-y: auto;
+}
+.qz-modal-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #fff;
+  margin: 0 0 20px 0;
+  text-align: center;
+}
+`,u=class{constructor(e,t,r){d(this,"container");d(this,"campaign","");d(this,"options",{apiUrl:""});d(this,"configData",null);d(this,"submitted",!1);d(this,"submittedData",null);d(this,"modalElement",null);d(this,"modalOverlay",null);let o=document.getElementById(e);if(!o){console.error(`QueueZero: Element with ID "${e}" not found.`),this.container=document.createElement("div");return}this.container=o,this.campaign=t,this.options=r,this.injectStyles(),this.render(),this.loadCampaign()}injectStyles(){if(document.getElementById("qz-styles"))return;let e=document.createElement("style");e.id="qz-styles",e.textContent=w,document.head.appendChild(e)}render(){this.container.innerHTML='<div class="qz-loading">Loading waitlist...</div>'}async loadCampaign(){try{let e=await fetch(`${this.options.apiUrl}/v1/config/${this.campaign}`);if(!e.ok)throw new Error(`Waitlist not found (${e.status})`);this.configData=await e.json(),this.applyBranding(),this.options.displayMode==="modal"?this.renderTrigger():this.renderInlineForm()}catch(e){this.container.innerHTML=`<div class="qz-error">Failed to load waitlist: ${e.message}</div>`}}applyBranding(){if(!this.configData)return;let e=this.configData.branding||{},t=document.documentElement;e.themeColor&&(t.style.setProperty("--qz-theme-color",e.themeColor),this.container.style.setProperty("--qz-theme-color",e.themeColor)),e.backgroundColor&&t.style.setProperty("--qz-bg-color",e.backgroundColor),e.fontFamily&&t.style.setProperty("--qz-font-family",e.fontFamily)}renderTrigger(){if(!this.configData)return;let e=this.options.modalOptions||{},t=e.triggerText||"Join Waitlist",r=e.triggerClass||"";this.container.innerHTML=`
+      <button class="qz-trigger ${r}" id="qz-trigger-${this.campaign}">
+        ${t}
+      </button>
+    `,this.container.querySelector(".qz-trigger")?.addEventListener("click",()=>this.openModal()),this.createModalDOM()}createModalDOM(){if(!this.configData)return;let e=this.configData.branding||{},r=`qz-modal-${(this.options.modalOptions||{}).size||"md"}`;this.modalOverlay=document.createElement("div"),this.modalOverlay.className="qz-modal-overlay",this.modalOverlay.id=`qz-modal-overlay-${this.campaign}`;let o="";e.logoUrl?o+=`<img src="${e.logoUrl}" alt="Logo" class="qz-modal-logo" />`:o+="<span></span>",o+=`
+      <button class="qz-modal-close" aria-label="Close">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    `;let s="";e.coverImageUrl&&(s=`<img src="${e.coverImageUrl}" alt="" class="qz-modal-cover" />`),this.modalOverlay.innerHTML=`
+      <div class="qz-modal ${r}">
+        <div class="qz-modal-header">
+          ${o}
+        </div>
+        ${s}
+        <div class="qz-modal-body">
+          <h2 class="qz-modal-title">${this.configData.name}</h2>
+          <div id="qz-modal-form-container-${this.campaign}"></div>
+        </div>
+      </div>
+    `,document.body.appendChild(this.modalOverlay),this.modalOverlay.querySelector(".qz-modal-close")?.addEventListener("click",()=>this.closeModal()),this.modalOverlay.addEventListener("click",i=>{i.target===this.modalOverlay&&this.closeModal()}),document.addEventListener("keydown",i=>{i.key==="Escape"&&this.modalOverlay?.classList.contains("qz-modal-open")&&this.closeModal()})}openModal(){if(!this.modalOverlay)return;let e=document.getElementById(`qz-modal-form-container-${this.campaign}`);e&&!e.hasChildNodes()&&this.renderFormInto(e),this.modalOverlay.classList.add("qz-modal-open"),document.body.style.overflow="hidden"}closeModal(){this.modalOverlay?.classList.remove("qz-modal-open"),document.body.style.overflow=""}renderInlineForm(){this.renderFormInto(this.container)}renderFormInto(e){if(!this.configData)return;let t=this.configData.branding?.themeColor||"#10B981";e.style.setProperty("--qz-theme-color",t);let r=(this.configData.formFields||[]).filter(i=>i.enabled);r.length===0&&r.push({key:"email",label:"Email Address",type:"email",enabled:!0,required:!0});let o=i=>{let m=`qz-${i.key}`,g=`<label class="qz-label" for="${m}">${i.label}${i.required?" *":""}</label>`,n=i.required?"required":"",l=i.placeholder||"";switch(i.type){case"select":let p=(i.options||[]).map(f=>`<option value="${f}">${f}</option>`).join("");return`
             <div class="qz-form-group">
-              ${m}
-              <select class="qz-input qz-select" id="${c}" name="${r.key}" ${l}>
-                <option value="">${a||`Select ${r.label}`}</option>
-                ${d}
+              ${g}
+              <select class="qz-input qz-select" id="${m}" name="${i.key}" ${n}>
+              <option value="">Select an option</option>
+                ${p}
               </select>
             </div>
           `;case"checkbox":return`
             <div class="qz-form-group qz-checkbox-group">
               <label class="qz-checkbox-label">
-                <input type="checkbox" class="qz-checkbox" id="${c}" name="${r.key}" ${l} />
-                <span>${r.label}${r.required?" *":""}</span>
+                <input type="checkbox" class="qz-checkbox" id="${m}" name="${i.key}" ${n} />
+                <span>${i.label}${i.required?" *":""}</span>
               </label>
             </div>
           `;case"textarea":return`
             <div class="qz-form-group">
-              ${m}
+              ${g}
               <textarea 
                 class="qz-input qz-textarea" 
-                id="${c}" 
-                name="${r.key}" 
-                placeholder="${a}"
+                id="${m}" 
+                name="${i.key}" 
+                placeholder="${l}"
                 rows="3"
-                ${l}
+                ${n}
               ></textarea>
             </div>
           `;case"number":return`
             <div class="qz-form-group">
-              ${m}
+              ${g}
               <input 
                 class="qz-input" 
-                id="${c}" 
-                name="${r.key}" 
+                id="${m}" 
+                name="${i.key}" 
                 type="number"
-                placeholder="${a}"
-                ${l}
+                placeholder="${l}"
+                ${n}
               />
             </div>
           `;default:return`
             <div class="qz-form-group">
-              ${m}
+              ${g}
               <input 
                 class="qz-input" 
-                id="${c}" 
-                name="${r.key}" 
-                type="${r.type==="email"?"email":"text"}"
-                placeholder="${a}"
-                ${l}
+                id="${m}" 
+                name="${i.key}" 
+                type="${i.type==="email"?"email":"text"}"
+                placeholder="${l}"
+                ${n}
               />
             </div>
-          `}},i=t.map(o).join("");this.container.innerHTML=`
+          `}},s=r.map(o).join("");e.innerHTML=`
       <form class="qz-form" id="qz-form-${this.campaign}">
-        ${i}
+        ${s}
         <button type="submit" class="qz-button">Join Waitlist</button>
       </form>
-    `,this.container.querySelector("form")?.addEventListener("submit",r=>this.handleSubmit(r))}async handleSubmit(e){e.preventDefault();let t=e.target,o=t.querySelector("button"),i=new FormData(t),g={},r="";if(i.forEach((a,d)=>{let s=a.toString();d==="email"&&(r=s),g[d]=s}),!r){this.showError(t,"Email is required");return}let m=new URLSearchParams(window.location.search).get("ref"),l={campaign:this.campaign,email:r,metadata:g,referrer_code:m||null};o&&(o.disabled=!0,o.textContent="Joining...");try{let a=await fetch(`${this.options.apiUrl}/v1/submit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(l)});if(!a.ok){let s=await a.json();throw new Error(s.message||s.error||"Failed to join")}let d=await a.json();this.submitted=!0,this.submittedData=d,this.renderSuccess(),this.options.onSuccess?.(d)}catch(a){this.showError(t,a.message||"Something went wrong"),o&&(o.disabled=!1,o.textContent="Join Waitlist"),this.options.onError?.(a)}}showError(e,t){let o=e.querySelector(".qz-error");o&&o.remove();let i=document.createElement("div");i.className="qz-error",i.textContent=t,e.insertBefore(i,e.firstChild)}renderSuccess(){let e=this.submittedData?.position||"?",t=this.submittedData?.referralLink,o=`
+    `,e.querySelector("form")?.addEventListener("submit",i=>this.handleSubmit(i))}async handleSubmit(e){e.preventDefault();let t=e.target,r=t.querySelector("button"),o=new FormData(t),s={},c="";if(o.forEach((n,l)=>{let p=n.toString();l==="email"&&(c=p),s[l]=p}),!c){this.showError(t,"Email is required");return}let m=new URLSearchParams(window.location.search).get("ref"),g={campaign:this.campaign,email:c,metadata:s,referrer_code:m||null};r&&(r.disabled=!0,r.textContent="Joining...");try{let n=await fetch(`${this.options.apiUrl}/v1/submit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(g)});if(!n.ok){let p=await n.json();throw new Error(p.message||p.error||"Failed to join")}let l=await n.json();this.submitted=!0,this.submittedData=l,this.renderSuccess(),this.options.onSuccess?.(l)}catch(n){this.showError(t,n.message||"Something went wrong"),r&&(r.disabled=!1,r.textContent="Join Waitlist"),this.options.onError?.(n)}}showError(e,t){let r=e.querySelector(".qz-error");r&&r.remove();let o=document.createElement("div");o.className="qz-error",o.textContent=t,e.insertBefore(o,e.firstChild)}renderSuccess(){let e=this.submittedData?.position||"?",t=this.submittedData?.referralCode,r=window.location.origin+window.location.pathname,o=t?`${r}?ref=${t}`:null,s=`
       <div class="qz-success">
         <h3>You're on the list!</h3>
         <p>You're #${e} in line.</p>
-    `;t&&(o+=`
+    `;if(o&&(s+=`
             <div style="margin-top: 20px;">
                 <p style="margin-bottom: 8px; color: #a6e3a1;">Refer friends to move up:</p>
-                <input class="qz-input" readonly value="${t}" onclick="this.select()" style="text-align: center; cursor: pointer;">
+                <input class="qz-input" readonly value="${o}" onclick="this.select()" style="text-align: center; cursor: pointer;">
             </div>
-        `),o+="</div>",this.container.innerHTML=o}};function w(n,e,t){return new h(n,e,t)}return v(E);})();
+        `),s+="</div>",this.options.displayMode==="modal"){let c=document.getElementById(`qz-modal-form-container-${this.campaign}`);if(c){c.innerHTML=s;return}}this.container.innerHTML=s}};function k(a,e,t){return new u(a,e,t)}return $(C);})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@queuezero/embed",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Embeddable vanilla JS widget for QueueZero viral waitlists",
   "main": "./dist/index.global.js",
   "browser": "./dist/index.global.js",