@queuezero/embed 0.1.9 → 0.1.10

package/README.md

@@ -38,25 +38,27 @@ 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
-<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', {
+  // Headless mode: Pass null as container ID and use attachToText
+  QueueZero.init(null, 'your-campaign-slug', {
     apiUrl: 'https://api.queuezero.io',
     displayMode: 'modal',
     modalOptions: {
-      triggerText: 'Join Our Waitlist',
+      attachToText: 'Join Waitlist', // Will attach to any button with this text
       size: 'md'
     }
   });

package/dist/index.global.js

@@ -1,4 +1,4 @@
-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=`
+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,7 +217,7 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
   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=`
+`,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>
@@ -227,21 +227,21 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
           <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=`
+    `;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">
           ${o}
         </div>
-        ${s}
+        ${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",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`
+    `,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">
               ${g}
-              <select class="qz-input qz-select" id="${m}" name="${i.key}" ${n}>
+              <select class="qz-input qz-select" id="${m}" name="${i.key}" ${s}>
               <option value="">Select an option</option>
                 ${p}
               </select>
@@ -249,7 +249,7 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
           `;case"checkbox":return`
             <div class="qz-form-group qz-checkbox-group">
               <label class="qz-checkbox-label">
-                <input type="checkbox" class="qz-checkbox" id="${m}" name="${i.key}" ${n} />
+                <input type="checkbox" class="qz-checkbox" id="${m}" name="${i.key}" ${s} />
                 <span>${i.label}${i.required?" *":""}</span>
               </label>
             </div>
@@ -260,9 +260,9 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
                 class="qz-input qz-textarea" 
                 id="${m}" 
                 name="${i.key}" 
-                placeholder="${l}"
+                placeholder="${c}"
                 rows="3"
-                ${n}
+                ${s}
               ></textarea>
             </div>
           `;case"number":return`
@@ -273,8 +273,8 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
                 id="${m}" 
                 name="${i.key}" 
                 type="number"
-                placeholder="${l}"
-                ${n}
+                placeholder="${c}"
+                ${s}
               />
             </div>
           `;default:return`
@@ -285,22 +285,22 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
                 id="${m}" 
                 name="${i.key}" 
                 type="${i.type==="email"?"email":"text"}"
-                placeholder="${l}"
-                ${n}
+                placeholder="${c}"
+                ${s}
               />
             </div>
-          `}},s=r.map(o).join("");e.innerHTML=`
+          `}},a=r.map(o).join("");e.innerHTML=`
       <form class="qz-form" id="qz-form-${this.campaign}">
-        ${s}
+        ${a}
         <button type="submit" class="qz-button">Join Waitlist</button>
       </form>
-    `,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=`
+    `,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>
-    `;if(o&&(s+=`
+    `;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="${o}" onclick="this.select()" style="text-align: center; cursor: pointer;">
             </div>
-        `),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);})();
+        `),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.9",
+  "version": "0.1.10",
   "description": "Embeddable vanilla JS widget for QueueZero viral waitlists",
   "main": "./dist/index.global.js",
   "browser": "./dist/index.global.js",