Start Your WhatsApp Campaign

', phone: '', mail: '', building: '', briefcase: '', globe: '', grid: '', rupee: '', edit: '', }; var CSS = "#bs-lead-root{all:initial;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}" + "#bs-lead-root *{box-sizing:border-box}" + "#bs-lead-root .bs-fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:2147483000;width:3.85rem;height:3.85rem;border-radius:50%;border:0;background:#25d366;color:#fff;cursor:pointer;box-shadow:0 14px 34px rgba(37,211,102,.45),0 4px 12px rgba(0,0,0,.2);display:grid;place-items:center;transition:background .2s ease}" + "#bs-lead-root .bs-fab:not(.is-open){animation:bs-fab-heartbeat 1.5s ease-in-out infinite}" + "#bs-lead-root .bs-fab:hover{background:#1ebe57;animation:none;transform:translateY(-2px) scale(1.04)}" + "#bs-lead-root .bs-fab.is-open{animation:none;transform:none}" + "#bs-lead-root .bs-fab-icon{width:1.8rem;height:1.8rem;position:absolute;transition:opacity .2s ease,transform .2s ease}" + "#bs-lead-root .bs-fab-close{opacity:0;transform:rotate(-45deg) scale(.7)}" + "#bs-lead-root .bs-fab.is-open .bs-fab-chat{opacity:0;transform:rotate(45deg) scale(.7)}" + "#bs-lead-root .bs-fab.is-open .bs-fab-close{opacity:1;transform:none}" + "@keyframes bs-fab-heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.14)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}" + "#bs-lead-root .bs-backdrop{position:fixed;inset:0;z-index:2147482990;background:rgba(0,0,0,.45);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}" + "#bs-lead-root .bs-panel{position:fixed;z-index:2147482995;right:1rem;bottom:5.5rem;width:min(460px,calc(100vw - 1.6rem));max-height:min(88vh,820px);display:flex;flex-direction:column;overflow:hidden;background:#ffffff;color:#111111;border:2px solid #E83A25;border-radius:20px;box-shadow:0 28px 70px rgba(0,0,0,.22);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}" + "#bs-lead-root .bs-panel-head{position:relative;padding:1.25rem 1.3rem 1.4rem;background:#E83A25;color:#ffffff;flex-shrink:0}" + "#bs-lead-root .bs-kicker{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffffff}" + "#bs-lead-root .bs-title{margin:.38rem 0 0;font-size:1.38rem;font-weight:800;line-height:1.2;color:#ffffff;letter-spacing:-.02em}" + "#bs-lead-root .bs-icon-btn{position:absolute;top:1.05rem;right:1.05rem;width:2.05rem;height:2.05rem;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#ffffff;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,border-color .15s ease,color .15s ease}" + "#bs-lead-root .bs-icon-btn:hover{background:#ffffff;border-color:#ffffff;color:#E83A25}" + "#bs-lead-root .bs-accent-bar{position:absolute;left:0;right:0;bottom:-1px;height:4px;background:#ffffff}" + "#bs-lead-root .bs-accent-bar:after{content:'';position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #ffffff}" + "#bs-lead-root .bs-form{display:flex;flex-direction:column;min-height:0;flex:1;margin:0;background:#ffffff}" + "#bs-lead-root .bs-body{padding:1.25rem 1.2rem .45rem;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;flex:1;min-height:0;background:#ffffff}" + "#bs-lead-root .bs-foot{padding:.95rem 1.2rem 1.25rem;background:#ffffff;border-top:1px solid #f0f0f0;flex-shrink:0}" + "#bs-lead-root .bs-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem .75rem}" + "#bs-lead-root .bs-field{display:flex;flex-direction:column;gap:0}" + "#bs-lead-root .bs-full{grid-column:1 / -1}" + "#bs-lead-root .bs-control{position:relative;display:flex;align-items:center}" + "#bs-lead-root .bs-control.is-top{align-items:flex-start}" + "#bs-lead-root .bs-control .bs-ico{position:absolute;left:.85rem;color:#E83A25;display:grid;place-items:center;pointer-events:none}" + "#bs-lead-root .bs-control.is-top .bs-ico{top:.95rem}" + "#bs-lead-root .bs-control input,#bs-lead-root .bs-control select,#bs-lead-root .bs-control textarea{width:100%;font-family:inherit;font-size:.92rem;font-weight:500;color:#111111;background:#ffffff;border:1px solid #e6e6e6;border-radius:12px;padding:.84rem .95rem .84rem 2.55rem;outline:none;transition:border-color .15s ease,box-shadow .15s ease}" + "#bs-lead-root .bs-control input:hover,#bs-lead-root .bs-control select:hover,#bs-lead-root .bs-control textarea:hover{border-color:#d0d0d0}" + "#bs-lead-root .bs-control textarea{min-height:96px;resize:vertical;line-height:1.45;padding-top:.95rem}" + "#bs-lead-root .bs-control input:focus,#bs-lead-root .bs-control select:focus,#bs-lead-root .bs-control textarea:focus{border-color:#E83A25;box-shadow:0 0 0 3px rgba(232,58,37,.16)}" + "#bs-lead-root .bs-control select{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E83A25' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem;cursor:pointer}" + "#bs-lead-root .bs-control select:invalid{color:#6B7280;font-weight:400}" + "#bs-lead-root .bs-ms{position:relative;width:100%}" + "#bs-lead-root .bs-ms-trigger{width:100%;min-height:48px;display:flex;align-items:flex-start;gap:.55rem;text-align:left;font-family:inherit;background:#fff;border:1px solid #e6e6e6;border-radius:12px;padding:.55rem 2.2rem .55rem 2.55rem;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}" + "#bs-lead-root .bs-ms-trigger:hover{border-color:#d0d0d0}" + "#bs-lead-root .bs-ms.is-open .bs-ms-trigger,#bs-lead-root .bs-ms-trigger:focus{border-color:#E83A25;box-shadow:0 0 0 3px rgba(232,58,37,.16);outline:none}" + "#bs-lead-root .bs-ms-trigger .bs-ico{position:absolute;left:.85rem;top:.95rem;color:#E83A25;display:grid;place-items:center;pointer-events:none}" + "#bs-lead-root .bs-ms-tags{display:flex;flex-wrap:wrap;gap:.4rem;flex:1;min-width:0;align-items:center}" + "#bs-lead-root .bs-ms-placeholder{color:#6B7280;font-size:.92rem;font-weight:400;padding:.28rem 0}" + "#bs-lead-root .bs-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .4rem .28rem .55rem;border-radius:6px;background:#E83A25;color:#fff;font-size:.74rem;font-weight:650;line-height:1.2}" + "#bs-lead-root .bs-chip button{width:1rem;height:1rem;border:0;border-radius:3px;background:rgba(255,255,255,.25);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;font-size:.7rem;line-height:1}" + "#bs-lead-root .bs-chip button:hover{background:rgba(255,255,255,.4)}" + "#bs-lead-root .bs-ms-chevron{position:absolute;right:.9rem;top:1.15rem;width:12px;height:8px;pointer-events:none;background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E83A25' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E\") center/contain no-repeat;transition:transform .15s ease}" + "#bs-lead-root .bs-ms.is-open .bs-ms-chevron{transform:rotate(180deg)}" + "#bs-lead-root .bs-ms-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.12);overflow:hidden}" + "#bs-lead-root .bs-ms-search{width:100%;border:0;border-bottom:1px solid #eee;padding:.75rem .9rem;font-family:inherit;font-size:.88rem;outline:none}" + "#bs-lead-root .bs-ms-list{max-height:200px;overflow-y:auto;padding:.35rem 0}" + "#bs-lead-root .bs-ms-option{display:flex;align-items:center;gap:.65rem;padding:.55rem .9rem;cursor:pointer;font-size:.88rem;font-weight:500;color:#111;user-select:none}" + "#bs-lead-root .bs-ms-option:hover{background:#f9fafb}" + "#bs-lead-root .bs-ms-option input{accent-color:#E83A25;width:1rem;height:1rem;margin:0;flex-shrink:0}" + "#bs-lead-root .bs-ms-option.is-disabled{opacity:.45;pointer-events:none}" + "#bs-lead-root .bs-ms-empty{padding:.8rem .9rem;font-size:.84rem;color:#888}" + "#bs-lead-root .bs-consent{display:flex;align-items:flex-start;gap:.55rem;margin:0 0 .85rem;font-size:.78rem;font-weight:500;color:#444444;cursor:pointer;line-height:1.45}" + "#bs-lead-root .bs-consent input{margin-top:.15rem;accent-color:#E83A25;flex-shrink:0}" + "#bs-lead-root .bs-consent a{color:#E83A25;font-weight:700;text-decoration:underline}" + "#bs-lead-root .bs-consent a:hover{color:#c92f1d}" + "#bs-lead-root .bs-note{min-height:1rem;margin:0 0 .65rem;font-size:.8rem;color:#666666}" + "#bs-lead-root .bs-note.is-error{color:#dc2626}" + "#bs-lead-root .bs-note.is-ok{color:#059669}" + "#bs-lead-root .bs-submit{width:100%;font-family:inherit;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:#E83A25;color:#ffffff;border-radius:12px;padding:1.02rem 1.2rem;box-shadow:0 10px 26px rgba(232,58,37,.28);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}" + "#bs-lead-root .bs-submit:hover:not(:disabled){background:#c92f1d;transform:translateY(-1px);box-shadow:0 12px 28px rgba(232,58,37,.34)}" + "#bs-lead-root .bs-submit:disabled{opacity:.7;cursor:wait}" + "#bs-lead-root [hidden]{display:none!important}" + "@media (max-width:560px){#bs-lead-root .bs-grid{grid-template-columns:1fr}#bs-lead-root .bs-panel{right:.55rem;left:.55rem;width:auto;bottom:4.9rem;max-height:calc(100vh - 6rem)}#bs-lead-root .bs-fab{right:.9rem;bottom:.9rem}}"; function todayISO() { return new Date().toISOString().slice(0, 10); } function sanitize(value, max) { if (value == null) return ""; return String(value).trim().slice(0, max || 2000); } function buildWhatsAppUrl(payload) { var services = (payload.services || []).join(", ") || "-"; var lines = [ "Hi Brandstory team,", "", "I'd like to enquire about your services. Here are my details:", "", "Name: " + payload.spocName, "Company: " + payload.companyName, "Email: " + payload.email, "Phone: " + payload.phone, "Designation: " + (payload.title || "Not shared"), "Services interested in: " + services, "Budget range: " + payload.budgetRange, "Website: " + (payload.website || "Not shared"), "", "Project brief:", payload.message || "Happy to discuss over a quick call.", "", "Looking forward to hearing from you.", ]; var text = encodeURIComponent(lines.join("\n")); var phone = String(BS_CONFIG.whatsappNumber || "").replace(/\D/g, ""); return phone ? "https://wa.me/" + phone + "?text=" + text : "https://wa.me/?text=" + text; } function createMondayLead(payload) { var phoneDigits = sanitize(payload.phone, 20).replace(/\D/g, ""); var email = sanitize(payload.email, 200); var services = (payload.services || []).slice(0, 5); var columnValues = { lead_company: sanitize(payload.spocName, 200), date_mkspj6x: { date: todayISO() }, lead_status: { label: "Unassigned" }, color_mksy4wnf: { label: "Test" }, dropdown_mksymde0: { labels: services }, long_text_mkspy9pz: { text: sanitize(payload.message, 5000) }, dropdown_mkt3d3zq: { labels: [sanitize(payload.budgetRange, 100)] }, lead_email: { email: email, text: email }, lead_phone: { phone: phoneDigits, countryShortName: "IN" }, long_text_mkt2d6j: { text: sanitize(payload.title, 500) }, long_text_mkssakn4: { text: sanitize(payload.website, 1000) }, long_text_mksp87pv: { text: sanitize(payload.leadPageLink, 1000) }, }; var mutation = "mutation ($boardId: ID!, $groupId: String!, $itemName: String!, $columnValues: JSON!) {" + " create_item(board_id: $boardId, group_id: $groupId, item_name: $itemName, column_values: $columnValues) { id name }" + "}"; return fetch("https://api.monday.com/v2", { method: "POST", headers: { "Content-Type": "application/json", Authorization: BS_CONFIG.mondayToken, "API-Version": "2024-10", }, keepalive: true, body: JSON.stringify({ query: mutation, variables: { boardId: String(BS_CONFIG.boardId), groupId: BS_CONFIG.groupId, itemName: sanitize(payload.companyName, 200), columnValues: JSON.stringify(columnValues), }, }), }) .then(function (res) { return res.json(); }) .then(function (json) { if (json.errors && json.errors.length) { throw new Error( json.errors .map(function (e) { return e.message; }) .join(" ") ); } if (!json.data || !json.data.create_item || !json.data.create_item.id) { throw new Error("Monday did not return an item id"); } return json.data.create_item; }); } function ready(fn) { if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", fn); } else { fn(); } } ready(function () { var style = document.createElement("style"); style.textContent = CSS; document.head.appendChild(style); var root = document.createElement("div"); root.id = "bs-lead-root"; root.innerHTML = '' + '' + '' + "" + '' + '"; document.body.appendChild(root); var fab = root.querySelector("#bsFab"); var panel = root.querySelector("#bsLeadPanel"); var backdrop = root.querySelector("#bsBackdrop"); var closeBtn = root.querySelector("#bsClose"); var form = root.querySelector("#bsLeadForm"); var submitBtn = root.querySelector("#bsSubmit"); var formStatus = root.querySelector("#bsFormStatus"); var budgetSelect = form.querySelector('[name="budgetRange"]'); var serviceMs = root.querySelector("#bsServiceMs"); var serviceTrigger = root.querySelector("#bsServiceTrigger"); var serviceMenu = root.querySelector("#bsServiceMenu"); var serviceSearch = root.querySelector("#bsServiceSearch"); var serviceList = root.querySelector("#bsServiceList"); var chipsWrap = root.querySelector("#bsServiceChips"); var consent = root.querySelector("#bsConsent"); var termsLink = root.querySelector(".bs-terms-link"); var btnLabel = submitBtn.querySelector(".bs-btn-label"); var btnLoading = submitBtn.querySelector(".bs-btn-loading"); var selectedServices = []; var prevBodyOverflow = ""; var MAX_SERVICES = SERVICES.length; if (termsLink) { termsLink.addEventListener("click", function (e) { e.stopPropagation(); }); } function isServiceSelected(value) { return selectedServices.indexOf(value) !== -1; } function setServiceMenuOpen(open) { serviceMs.classList.toggle("is-open", open); serviceMenu.hidden = !open; serviceTrigger.setAttribute("aria-expanded", String(open)); if (open) { serviceSearch.value = ""; renderServiceOptions(); window.setTimeout(function () { serviceSearch.focus(); }, 0); } } function toggleService(value) { if (isServiceSelected(value)) { selectedServices = selectedServices.filter(function (s) { return s !== value; }); } else { if (selectedServices.length >= MAX_SERVICES) return; selectedServices.push(value); } renderChips(); renderServiceOptions(); } function renderServiceOptions() { var q = (serviceSearch.value || "").trim().toLowerCase(); serviceList.innerHTML = ""; var shown = 0; SERVICES.forEach(function (value) { if (q && value.toLowerCase().indexOf(q) === -1) return; shown += 1; var checked = isServiceSelected(value); var atMax = !checked && selectedServices.length >= MAX_SERVICES; var label = document.createElement("label"); label.className = "bs-ms-option" + (atMax ? " is-disabled" : ""); var input = document.createElement("input"); input.type = "checkbox"; input.checked = checked; input.disabled = atMax; input.addEventListener("change", function () { toggleService(value); }); var text = document.createElement("span"); text.textContent = value; label.appendChild(input); label.appendChild(text); serviceList.appendChild(label); }); if (!shown) { var empty = document.createElement("div"); empty.className = "bs-ms-empty"; empty.textContent = "No services found"; serviceList.appendChild(empty); } } function renderChips() { chipsWrap.innerHTML = ""; if (!selectedServices.length) { var ph = document.createElement("span"); ph.className = "bs-ms-placeholder"; ph.textContent = "Services Required *"; chipsWrap.appendChild(ph); return; } selectedServices.forEach(function (value) { var chip = document.createElement("span"); chip.className = "bs-chip"; var text = document.createElement("span"); text.textContent = value; var remove = document.createElement("button"); remove.type = "button"; remove.setAttribute("aria-label", "Remove " + value); remove.innerHTML = "×"; remove.addEventListener("click", function (e) { e.stopPropagation(); toggleService(value); }); chip.appendChild(text); chip.appendChild(remove); chipsWrap.appendChild(chip); }); } BUDGETS.forEach(function (value) { var opt = document.createElement("option"); opt.value = value; opt.textContent = value; budgetSelect.appendChild(opt); }); renderChips(); renderServiceOptions(); serviceTrigger.addEventListener("click", function () { setServiceMenuOpen(serviceMenu.hidden); }); serviceSearch.addEventListener("input", renderServiceOptions); serviceSearch.addEventListener("click", function (e) { e.stopPropagation(); }); document.addEventListener("click", function (e) { if (!serviceMs.contains(e.target)) setServiceMenuOpen(false); }); function setOpen(open) { if (open) { prevBodyOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; } else { document.body.style.overflow = prevBodyOverflow; setServiceMenuOpen(false); } panel.hidden = !open; backdrop.hidden = !open; fab.classList.toggle("is-open", open); fab.setAttribute("aria-expanded", String(open)); if (open) { var first = form.querySelector("input, select, textarea"); if (first) first.focus(); } } fab.addEventListener("click", function () { setOpen(panel.hidden); }); closeBtn.addEventListener("click", function () { setOpen(false); }); backdrop.addEventListener("click", function () { setOpen(false); }); document.addEventListener("keydown", function (e) { if (e.key !== "Escape" || panel.hidden) return; if (!serviceMenu.hidden) { setServiceMenuOpen(false); return; } setOpen(false); }); function setStatus(message, type) { formStatus.textContent = message; formStatus.classList.remove("is-error", "is-ok"); if (type) formStatus.classList.add(type); } function setLoading(loading) { submitBtn.disabled = loading; btnLabel.hidden = loading; btnLoading.hidden = !loading; } form.addEventListener("submit", function (e) { e.preventDefault(); setStatus(""); if (!selectedServices.length) { setStatus("Please select at least one service", "is-error"); setServiceMenuOpen(true); return; } if (!consent.checked) { setStatus("Please agree to the Terms & Conditions to continue", "is-error"); return; } var fd = new FormData(form); var payload = { spocName: sanitize(fd.get("spocName"), 200), email: sanitize(fd.get("email"), 200), phone: sanitize(fd.get("phone"), 20), companyName: sanitize(fd.get("companyName"), 200), title: sanitize(fd.get("title"), 500), website: sanitize(fd.get("website"), 1000), services: selectedServices.slice(), budgetRange: sanitize(fd.get("budgetRange"), 100), message: sanitize(fd.get("message"), 5000), leadPageLink: window.location.href, }; if ( !payload.spocName || !payload.email || !payload.phone || !payload.companyName || !payload.budgetRange ) { setStatus("Please fill all required fields", "is-error"); return; } setLoading(true); var waUrl = buildWhatsAppUrl(payload); function goToWhatsApp() { window.location.href = waUrl; } createMondayLead(payload) .then(function () { setStatus("Lead captured. Opening WhatsApp�", "is-ok"); }) .catch(function (err) { setStatus( ((err && err.message) || "Could not save lead") + " � opening WhatsApp�", "is-error" ); }) .then(function () { form.reset(); consent.checked = true; selectedServices = []; renderChips(); renderServiceOptions(); setServiceMenuOpen(false); setOpen(false); setLoading(false); goToWhatsApp(); }); }); if (BS_CONFIG.autoOpenDelay >= 0) { window.setTimeout(function () { if (panel.hidden) setOpen(true); }, BS_CONFIG.autoOpenDelay); } }); })();