@queuezero/embed 0.1.8 → 0.1.10

package/README.md

@@ -38,9 +38,34 @@ Mounts a complete waitlist widget (form + status + referral share) to the specif
 
 | Parameter | Type | Description |
 |-----------|------|-------------|
-| `elementId` | `string` | ID of the container element |
+| `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
 

package/dist/index.global.js

@@ -1,4 +1,4 @@
-var QueueZero=(()=>{var h=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var y=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,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of y(e))!v.call(a,i)&&i!==t&&h(a,i,{get:()=>e[i],enumerable:!(o=b(e,i))||o.enumerable});return a};var $=a=>x(h({},"__esModule",{value:!0}),a);var l=(a,e,t)=>z(a,typeof e!="symbol"?e+"":e,t);var C={};q(C,{init:()=>k});var w=`
+var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var q=(n,e,t)=>e in n?h(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var z=(n,e)=>{for(var t in e)h(n,t,{get:e[t],enumerable:!0})},x=(n,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of b(e))!v.call(n,o)&&o!==t&&h(n,o,{get:()=>e[o],enumerable:!(r=y(e,o))||r.enumerable});return n};var $=n=>x(h({},"__esModule",{value:!0}),n);var d=(n,e,t)=>q(n,typeof e!="symbol"?e+"":e,t);var E={};z(E,{init:()=>k});var w=`
 /* Base Form Styles */
 .qz-form {
   font-family: var(--qz-font-family, system-ui, -apple-system, sans-serif);
@@ -217,90 +217,90 @@ var QueueZero=(()=>{var h=Object.defineProperty;var b=Object.getOwnPropertyDescr
   margin: 0 0 20px 0;
   text-align: center;
 }
-`,u=class{constructor(e,t,o){l(this,"container");l(this,"campaign","");l(this,"options",{apiUrl:""});l(this,"configData",null);l(this,"submitted",!1);l(this,"submittedData",null);l(this,"modalElement",null);l(this,"modalOverlay",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=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",o=e.triggerClass||"";this.container.innerHTML=`
-      <button class="qz-trigger ${o}" id="qz-trigger-${this.campaign}">
+`,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=e?document.getElementById(e):null;if(!o)if(r.displayMode==="modal")o=document.createElement("div");else{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})`);if(this.configData=await e.json(),this.applyBranding(),this.options.displayMode==="modal"){let{triggerSelector:t,attachToText:r}=this.options.modalOptions||{};if(t||r){if(this.createModalDOM(),t&&document.querySelectorAll(t).forEach(o=>{o.addEventListener("click",a=>{a.preventDefault(),this.openModal()})}),r){let o=r.toLowerCase();document.querySelectorAll("a, button").forEach(a=>{(a.textContent||"").toLowerCase().includes(o)&&a.addEventListener("click",i=>{i.preventDefault(),this.openModal()})})}}else this.renderTrigger()}else 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||{},o=`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 i="";e.logoUrl?i+=`<img src="${e.logoUrl}" alt="Logo" class="qz-modal-logo" />`:i+="<span></span>",i+=`
+    `,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 d="";e.coverImageUrl&&(d=`<img src="${e.coverImageUrl}" alt="" class="qz-modal-cover" />`),this.modalOverlay.innerHTML=`
-      <div class="qz-modal ${o}">
+    `;let a="";e.coverImageUrl&&(a=`<img src="${e.coverImageUrl}" alt="" class="qz-modal-cover" />`),this.modalOverlay.innerHTML=`
+      <div class="qz-modal ${r}">
         <div class="qz-modal-header">
-          ${i}
+          ${o}
         </div>
-        ${d}
+        ${a}
         <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",r=>{r.target===this.modalOverlay&&this.closeModal()}),document.addEventListener("keydown",r=>{r.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 o=(this.configData.formFields||[]).filter(r=>r.enabled);o.length===0&&o.push({key:"email",label:"Email Address",type:"email",enabled:!0,required:!0});let i=r=>{let c=`qz-${r.key}`,p=`<label class="qz-label" for="${c}">${r.label}${r.required?" *":""}</label>`,n=r.required?"required":"",s=r.placeholder||"";switch(r.type){case"select":let m=(r.options||[]).map(f=>`<option value="${f}">${f}</option>`).join("");return`
+    `,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>`,s=i.required?"required":"",c=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">
-              ${p}
-              <select class="qz-input qz-select" id="${c}" name="${r.key}" ${n}>
-                <option value="">${s||`Select ${r.label}`}</option>
-                ${m}
+              ${g}
+              <select class="qz-input qz-select" id="${m}" name="${i.key}" ${s}>
+              <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}" ${n} />
-                <span>${r.label}${r.required?" *":""}</span>
+                <input type="checkbox" class="qz-checkbox" id="${m}" name="${i.key}" ${s} />
+                <span>${i.label}${i.required?" *":""}</span>
               </label>
             </div>
           `;case"textarea":return`
             <div class="qz-form-group">
-              ${p}
+              ${g}
               <textarea 
                 class="qz-input qz-textarea" 
-                id="${c}" 
-                name="${r.key}" 
-                placeholder="${s}"
+                id="${m}" 
+                name="${i.key}" 
+                placeholder="${c}"
                 rows="3"
-                ${n}
+                ${s}
               ></textarea>
             </div>
           `;case"number":return`
             <div class="qz-form-group">
-              ${p}
+              ${g}
               <input 
                 class="qz-input" 
-                id="${c}" 
-                name="${r.key}" 
+                id="${m}" 
+                name="${i.key}" 
                 type="number"
-                placeholder="${s}"
-                ${n}
+                placeholder="${c}"
+                ${s}
               />
             </div>
           `;default:return`
             <div class="qz-form-group">
-              ${p}
+              ${g}
               <input 
                 class="qz-input" 
-                id="${c}" 
-                name="${r.key}" 
-                type="${r.type==="email"?"email":"text"}"
-                placeholder="${s}"
-                ${n}
+                id="${m}" 
+                name="${i.key}" 
+                type="${i.type==="email"?"email":"text"}"
+                placeholder="${c}"
+                ${s}
               />
             </div>
-          `}},d=o.map(i).join("");e.innerHTML=`
+          `}},a=r.map(o).join("");e.innerHTML=`
       <form class="qz-form" id="qz-form-${this.campaign}">
-        ${d}
+        ${a}
         <button type="submit" class="qz-button">Join Waitlist</button>
       </form>
-    `,e.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),d={},g="";if(i.forEach((n,s)=>{let m=n.toString();s==="email"&&(g=m),d[s]=m}),!g){this.showError(t,"Email is required");return}let c=new URLSearchParams(window.location.search).get("ref"),p={campaign:this.campaign,email:g,metadata:d,referrer_code:c||null};o&&(o.disabled=!0,o.textContent="Joining...");try{let n=await fetch(`${this.options.apiUrl}/v1/submit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(p)});if(!n.ok){let m=await n.json();throw new Error(m.message||m.error||"Failed to join")}let s=await n.json();this.submitted=!0,this.submittedData=s,this.renderSuccess(),this.options.onSuccess?.(s)}catch(n){this.showError(t,n.message||"Something went wrong"),o&&(o.disabled=!1,o.textContent="Join Waitlist"),this.options.onError?.(n)}}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),a={},l="";if(o.forEach((s,c)=>{let p=s.toString();c==="email"&&(l=p),a[c]=p}),!l){this.showError(t,"Email is required");return}let m=new URLSearchParams(window.location.search).get("ref"),g={campaign:this.campaign,email:l,metadata:a,referrer_code:m||null};r&&(r.disabled=!0,r.textContent="Joining...");try{let s=await fetch(`${this.options.apiUrl}/v1/submit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(g)});if(!s.ok){let p=await s.json();throw new Error(p.message||p.error||"Failed to join")}let c=await s.json();this.submitted=!0,this.submittedData=c,this.renderSuccess(),this.options.onSuccess?.(c)}catch(s){this.showError(t,s.message||"Something went wrong"),r&&(r.disabled=!1,r.textContent="Join Waitlist"),this.options.onError?.(s)}}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,a=`
       <div class="qz-success">
         <h3>You're on the list!</h3>
         <p>You're #${e} in line.</p>
-    `;t&&(o+=`
+    `;if(o&&(a+=`
             <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 k(a,e,t){return new u(a,e,t)}return $(C);})();
+        `),a+="</div>",this.options.displayMode==="modal"){let l=document.getElementById(`qz-modal-form-container-${this.campaign}`);if(l){l.innerHTML=a;return}}this.container.innerHTML=a}};function k(n,e,t){return new u(n,e,t)}return $(E);})();

package/package.json

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