Continue by text?

' + '

No problem. We\'ll pick this up by text message instead.

' + 'Mobile number' + ' Yes, this number can receive texts' + '' + '' + '

'; f.elements.phone.value = contact.phone || ''; f.elements.canText.checked = contact.phoneCanText === true; f.querySelector('.gpsec-chat-linkbtn').addEventListener('click', function () { f.remove(); }); f.addEventListener('submit', function (e) { e.preventDefault(); var phone = f.elements.phone.value.trim(); var err = f.querySelector('.gpsec-chat-error'); var msg = phone.replace(/\D/g, '').length < 10 ? 'Please add a mobile number, including area code.' : !f.elements.canText.checked ? 'Please confirm this number can receive texts.' : ''; if (msg) { err.textContent = msg; err.hidden = false; return; } var btn = f.querySelector('.gpsec-chat-btn'); btn.disabled = true; btn.textContent = 'One moment...'; api('/api/chat/public/text', { conversationId: store.id, token: store.token, phone: phone, canText: true }) .then(function () { contact.phone = phone; contact.phoneCanText = true; save(CONTACT_KEY, contact); store.wantsText = true; persist(); track('text_requested'); f.innerHTML = '

Perfect. We\'ll text you

' + '

'; f.querySelector('p').textContent = 'Watch for a text from GPLANN at ' + phone + ' shortly. You can close this chat.'; renderTextOffer(); sync(); }) .catch(function (e2) { err.textContent = e2.message; err.hidden = false; btn.disabled = false; btn.textContent = 'Text me instead'; }); }); el.log.appendChild(f); scrollDown(true); if (!isPhone()) f.elements.phone.focus(); } function updateBanner() { var show = store.id && state.online === false; var phone = '(587) 200-5200'; if (!show) { el.banner.hidden = true; return; } el.banner.hidden = false; el.banner.textContent = store.kind === 'afterHours' ? "We've got your message and will get back to you as soon as we're in. Anything else, just add it here." : "We've stepped away for a moment. Keep typing, we have your details and will reply by " + (contact.email ? 'email' : 'phone') + ' soon. Urgent? Call ' + phone + '.'; } /** * "Before we start" card: full name, phone, email and whether that phone takes * texts, all required, shown before the message box. With `forChat` it fills in * the details for a chat a staff member started instead. */ function contactCard(forChat) { var f = make('form', 'gpsec-chat-form'); f.noValidate = true; f.innerHTML = '

' + (forChat ? 'Happy to help! Who are we chatting with?' : 'Before we start, who are we chatting with?') + '

' + '

Just in case we get disconnected, so we can call, text or email you back. No spam, ever.

' + 'Full name' + 'Phone number' + '

Can this number receive texts?' + ' Yes' + ' No' + '

' + 'Email' + '' + ''; f.elements.name.value = contact.name || ''; f.elements.phone.value = contact.phone || ''; f.elements.email.value = contact.email || ''; if (typeof contact.phoneCanText === 'boolean') f.querySelector('input[value="' + (contact.phoneCanText ? 'yes' : 'no') + '"]').checked = true; f.addEventListener('submit', function (e) { e.preventDefault(); var v = function (n) { return f.elements[n].value.trim(); }; var name = v('name'), phone = v('phone'), email = v('email'); var picked = f.querySelector('input[name="canText"]:checked'); var err = f.querySelector('.gpsec-chat-error'); var msg = !name ? 'Please add your full name.' : name.split(/\s+/).length < 2 ? 'Please add your first and last name.' : phone.replace(/\D/g, '').length < 10 ? 'Please add a phone number we can call, including area code.' : !picked ? 'Please let us know if that number can receive texts.' : !/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email) ? 'Please add a valid email address.' : ''; if (msg) { err.textContent = msg; err.hidden = false; return; } contact = { name: name, phone: phone, email: email, phoneCanText: picked.value === 'yes' }; save(CONTACT_KEY, contact); if (!forChat) { track('info_given'); state.view = null; showWelcome(); if (!isPhone()) el.text.focus(); return; } var btn = f.querySelector('.gpsec-chat-btn'); btn.disabled = true; btn.textContent = 'Saving...'; api('/api/chat/public/details', { conversationId: store.id, token: store.token, name: name, phone: phone, email: email, phoneCanText: contact.phoneCanText }) .then(function () { track('info_given'); track('started', { chat_source: 'staff_invite' }); store.needsDetails = false; persist(); showChat(); if (!isPhone()) el.text.focus(); }) .catch(function (e2) { err.textContent = e2.message; err.hidden = false; btn.disabled = false; btn.textContent = 'Start chatting'; }); }); return f; } function startChat() { var first = state.firstMessage; var text = first.body || (first.photos.some(function (x) { return x.kind === 'doc'; }) ? 'Sharing a file with you.' : 'Sharing a photo with you.'); return api('/api/chat/public/start', { name: contact.name, email: contact.email, phone: contact.phone, phoneCanText: contact.phoneCanText, message: text, page: pageInfo(), landing: store.landing || location.href, referrer: document.referrer, visitorId: visitor.id, visitorKey: visitor.key }).then(function (data) { if (!data.conversationId) throw new Error("We couldn't start the chat. Please try again, or call us at (587) 200-5200."); store = { id: data.conversationId, token: data.token, kind: 'live', msgs: [], lastSeq: 0, open: state.open, unread: 0 }; state.agents = data.agents || state.agents; state.online = state.agents.length > 0; state.pending = []; state.firstMessage = null; ingest(data.messages || []); persist(); track('started'); showChat(); renderHeader(); splitOutgoing('', first.photos).reduce(function (chain, p) { return chain.then(function () { return sendPending(p); }); }, Promise.resolve()); schedule(POLL_OPEN); }); } /** After-hours form: nobody is logged in, so this is emailed to the team. */ function showAfterHours() { resetLog(); el.composer.hidden = true; el.banner.hidden = true; var photos = []; var f = make('form', 'gpsec-chat-form'); f.noValidate = true; f.innerHTML = '

Leave us a message, we\'ll take it from here.

' + '

Our team is away right now. Tell us what you\'re planning and we\'ll get back to you first thing. No stress, nothing to work out on your own.

' + 'Your name' + 'Email' + '

' + 'Phone (optional)' + 'Event date (optional)' + '

' + '' + '

Best way to get back to you? (optional)' + ' Email' + ' Call' + ' Text' + '

' + 'How can we help?' + '' + '' + '' + '' + '

Prefer to talk? Call (587) 200-5200

'; f.elements.name.value = contact.name || ''; f.elements.email.value = contact.email || ''; f.elements.phone.value = contact.phone || ''; var canTextRow = f.querySelector('.gpsec-chat-ah-cantext'); var preferred = function () { var r = f.querySelector('input[name="preferred"]:checked'); return r ? r.value : ''; }; var syncCanText = function () { // Asking "can it take texts?" is pointless once they've picked Text as the way to reach them. canTextRow.hidden = f.elements.phone.value.replace(/\D/g, '').length < 7 || preferred() === 'text'; f.querySelector('.gpsec-chat-ah-phone small').textContent = preferred() === 'call' || preferred() === 'text' ? '' : '(optional)'; }; f.elements.canText.checked = contact.phoneCanText === true; f.elements.phone.addEventListener('input', syncCanText); Array.prototype.forEach.call(f.querySelectorAll('input[name="preferred"]'), function (r) { r.addEventListener('change', syncCanText); }); syncCanText(); var tray = f.querySelector('.gpsec-chat-ah-tray'); var err = f.querySelector('.gpsec-chat-error'); function drawTray() { drawTrayInto(tray, photos, drawTray); } f.querySelector('.gpsec-chat-addphoto').addEventListener('click', function () { pickPhotos(function (files) { addFiles(files, photos, 1280).then(function (problem) { drawTray(); err.textContent = problem; err.hidden = !problem; }); }); }); f.addEventListener('submit', function (e) { e.preventDefault(); var v = function (n) { return f.elements[n].value.trim(); }; var email = v('email'), phone = v('phone'); var msg = !v('name') ? 'Please add your name.' : !email && !phone ? 'Please add an email or phone number so we can get back to you.' : email && !/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email) ? "That email doesn't look quite right." : (preferred() === 'call' || preferred() === 'text') && phone.replace(/\D/g, '').length < 10 ? 'Please add a phone number we can ' + preferred() + ', including area code.' : preferred() === 'email' && !email ? 'Please add your email so we can write back.' : !v('message') && !photos.length ? 'Tell us a little about what you need.' : photos.reduce(function (sum, p) { return sum + p.blob.size; }, 0) > MAX_DOC_BYTES ? 'Those files add up to more than 4MB. Please send fewer, or email them to rentals@gplann.com.' : ''; if (msg) { err.textContent = msg; err.hidden = false; return; } err.hidden = true; var canText = preferred() === 'text' || f.elements.canText.checked; contact = { name: v('name'), email: email, phone: phone, phoneCanText: phone ? canText : contact.phoneCanText }; save(CONTACT_KEY, contact); var data = new FormData(); ['name', 'email', 'phone', 'eventDate', 'message'].forEach(function (n) { data.append(n, v(n)); }); if (phone && canText) data.append('phoneCanText', '1'); if (preferred()) data.append('preferred', preferred()); data.append('visitorId', visitor.id || ''); data.append('visitorKey', visitor.key || ''); data.append('page', JSON.stringify(pageInfo())); data.append('landing', store.landing || location.href); data.append('referrer', document.referrer); photos.forEach(function (p, i) { data.append('file', p.blob, p.kind === 'doc' ? p.name : 'photo-' + (i + 1) + '.jpg'); data.append('fileWidth', p.width || ''); data.append('fileHeight', p.height || ''); }); var btn = f.querySelector('.gpsec-chat-btn'); btn.disabled = true; btn.textContent = 'Sending...'; api('/api/chat/public/after-hours', data, true).then(function (res) { if (!res.conversationId) throw new Error("That didn't go through."); track('info_given'); track('afterhours_submitted', { chat_photos: photos.length }); store = { id: res.conversationId, token: res.token, kind: 'afterHours', msgs: [], lastSeq: 0, open: state.open, unread: 0, preferred: preferred(), wantsText: preferred() === 'text' }; persist(); sync().then(showSent); schedule(POLL_CLOSED); }).catch(function (e2) { err.textContent = e2.message + ' You can also call us at (587) 200-5200.'; err.hidden = false; btn.disabled = false; btn.textContent = 'Send message'; }); }); el.log.appendChild(f); el.body.scrollTop = 0; } /** After-hours form sent: their message, then a thank-you card. The composer stays, in case they think of something else. */ function showSent() { if (store.id) showChat(); else { resetLog(); el.composer.hidden = true; } var f = make('div', 'gpsec-chat-form'); f.appendChild(make('h3', 'gpsec-chat-form-title', 'Got it, ' + firstName(contact.name) + '. Thank you!')); f.appendChild(make('p', 'gpsec-chat-form-lede', "Your message is with our team. We'll reach out " + (store.preferred === 'text' ? 'by text' : store.preferred === 'call' ? 'with a call' : contact.email ? 'by email' : 'by phone') + " as soon as we're in, usually first thing in the morning. Anything to add? Type it below.")); el.log.appendChild(f); el.banner.hidden = true; renderHeader(); scrollDown(true); } function render() { var view = store.id ? 'chat' : state.online === null ? 'loading' : state.online || state.firstMessage ? 'welcome' : 'afterhours'; // Don't wipe a welcome screen the visitor is already typing into just because the status refreshed. if (view === 'welcome' && state.view === 'welcome') return; state.view = view; if (view === 'chat') return showChat(); if (view === 'welcome') return showWelcome(); if (view === 'afterhours') return showAfterHours(); resetLog(); el.composer.hidden = true; el.log.appendChild(make('p', 'gpsec-chat-system', 'One moment...')); } // ---------- Sending ---------- function autoGrow() { el.text.style.height = 'auto'; el.text.style.height = Math.min(el.text.scrollHeight, 140) + 'px'; } function updateSend() { el.send.disabled = !el.text.value.trim() && !state.photos.length; } function pickPhotos(cb) { el.file.onchange = function () { var files = Array.prototype.slice.call(el.file.files || []); el.file.value = ''; cb(files); }; el.file.click(); } // Attachments are { kind: 'photo', blob, width, height, url } (shrunk in the browser) // or { kind: 'doc', blob, name, size } (sent as-is, one per message, max 4MB). var DOC_EXT = /\.(pdf|docx?|xlsx?|pptx?|csv|txt)$/i; var MAX_DOC_BYTES = 4 * 1024 * 1024; function sizeLabel(bytes) { if (!bytes) return ''; return bytes < 1048576 ? Math.max(1, Math.round(bytes / 1024)) + ' KB' : (bytes / 1048576).toFixed(1) + ' MB'; } /** Adds files to `into`, returning a friendly message for any that can't be sent (or ''). */ function addFiles(files, into, maxSide) { var problems = []; var room = MAX_PHOTOS - into.length; if (files.length > room) problems.push('Up to ' + MAX_PHOTOS + ' at a time.'); return files.slice(0, Math.max(0, room)).reduce(function (chain, file) { return chain.then(function () { if (/^image\//.test(file.type)) { return preparePhoto(file, maxSide).then(function (p) { p.kind = 'photo'; into.push(p); }, function () { problems.push("Couldn't read " + file.name + '.'); }); } if (!DOC_EXT.test(file.name)) { problems.push(file.name + ": we can take photos, PDF, Word, Excel, PowerPoint, CSV or text files."); return; } if (file.size > MAX_DOC_BYTES) { problems.push(file.name + ' is over 4MB. Please email it to rentals@gplann.com.'); return; } into.push({ kind: 'doc', blob: file, name: file.name, size: file.size }); }); }, Promise.resolve()).then(function () { return problems.join(' '); }); } function docChip(name, size, onRemove) { var chip = make('span', 'gpsec-chat-docchip'); chip.innerHTML = ''; chip.appendChild(make('span', 'gpsec-chat-docchip-name', name)); if (size) chip.appendChild(make('small', null, sizeLabel(size))); if (onRemove) { var x = make('button', null, '×'); x.type = 'button'; x.setAttribute('aria-label', 'Remove ' + name); x.addEventListener('click', onRemove); chip.appendChild(x); } return chip; } function drawTrayInto(tray, items, onChange) { tray.textContent = ''; tray.hidden = !items.length; items.forEach(function (p, i) { var remove = function () { items.splice(i, 1); onChange(); }; if (p.kind === 'doc') { tray.appendChild(docChip(p.name, p.size, remove)); return; } var t = make('span', 'gpsec-chat-thumb'); var img = make('img'); img.src = p.url; img.alt = ''; img.width = 60; img.height = 60; var x = make('button', null, '×'); x.type = 'button'; x.setAttribute('aria-label', 'Remove photo'); x.addEventListener('click', remove); t.appendChild(img); t.appendChild(x); tray.appendChild(t); }); } function drawComposerTray() { drawTrayInto(el.tray, state.photos, function () { drawComposerTray(); updateSend(); }); } function attachFiles(files) { addFiles(files, state.photos, 1600).then(function (problem) { drawComposerTray(); updateSend(); if (problem) flashNote(problem); }); } /** A short-lived note above the message box (e.g. "that file is too big"). */ function flashNote(text) { el.banner.hidden = false; el.banner.textContent = text; clearTimeout(state.noteTimer); state.noteTimer = setTimeout(updateBanner, 6000); } /** Text + photos go as one message; each document as its own, so every upload stays small. */ function splitOutgoing(body, items) { var photos = items.filter(function (x) { return x.kind !== 'doc'; }); var docs = items.filter(function (x) { return x.kind === 'doc'; }); var out = []; if (body || photos.length) out.push({ clientId: String(Date.now()), body: body, photos: photos }); docs.forEach(function (d, i) { out.push({ clientId: String(Date.now()) + '-d' + i, body: '', photos: [d] }); }); return out; } function sendPending(p) { if (state.pending.indexOf(p) === -1) state.pending.push(p); renderPending(); var data = new FormData(); data.append('conversationId', store.id); data.append('token', store.token); data.append('body', p.body); data.append('after', store.lastSeq || 0); p.photos.forEach(function (ph, i) { data.append('file', ph.blob, ph.kind === 'doc' ? ph.name : 'photo-' + (i + 1) + '.jpg'); data.append('fileWidth', ph.width || ''); data.append('fileHeight', ph.height || ''); }); return api('/api/chat/public/messages', data, true).then(function (res) { state.pending.splice(state.pending.indexOf(p), 1); state.convStatus = 'open'; // a message to an ended chat reopens the same thread if (res.agents) { state.agents = res.agents; state.online = res.agents.length > 0; } ingest(res.messages || []); renderPending(); updateBanner(); renderHeader(); }).catch(function (e) { if (e.status === 404) return forget(); p.error = e.message; renderPending(); }); } function submitComposer() { var body = el.text.value.trim(); if (!body && !state.photos.length) return; var outgoing = splitOutgoing(body, state.photos.slice()); el.text.value = ''; state.photos = []; drawComposerTray(); autoGrow(); updateSend(); if (store.id) { // One after another, so they arrive in order. outgoing.reduce(function (chain, p) { return chain.then(function () { return sendPending(p); }); }, Promise.resolve()); scrollDown(true); return; } // First message: we already have their details (the card comes before the message box), so start the chat with it. var p = { clientId: String(Date.now()), body: body, photos: state.photos.concat(outgoing.reduce(function (all, o) { return all.concat(o.photos); }, [])) }; state.firstMessage = p; p.retry = function () { startChat().catch(function (e) { p.error = e.message; renderPending(); }); }; state.pending = [p]; renderPending(); scrollDown(true); p.retry(); } // ---------- Sync / polling ---------- function ingest(list) { if (!list.length) return []; store.msgs = store.msgs || []; var fresh = list.filter(function (m) { return m.seq > (store.lastSeq || 0); }); fresh.forEach(function (m) { store.msgs.push(m); }); if (fresh.length) store.lastSeq = fresh[fresh.length - 1].seq; if (state.open && !el.composer.hidden) appendMessages(fresh); return fresh; } function forget() { // The conversation is gone (deleted or token lost): start fresh, keep their contact details. store = { landing: store.landing }; persist(); state.pending = []; state.staffTyping = null; if (state.open) render(); renderLauncher(); } function sync() { if (!store.id || state.polling) return Promise.resolve(); state.polling = true; var visible = document.visibilityState === 'visible'; var body = { conversationId: store.id, token: store.token, after: store.lastSeq || 0, page: pageInfo(), visible: visible }; if (state.open && visible) body.read = store.lastSeq || 0; if (state.typingDirty) { body.typing = true; state.typingDirty = false; } return api('/api/chat/public/sync', body).then(function (data) { state.agents = data.agents || []; state.online = state.agents.length > 0; state.staffReadSeq = data.staffReadSeq || 0; state.convStatus = data.status; var detailsChanged = !!data.needsDetails !== !!store.needsDetails; store.needsDetails = !!data.needsDetails; store.wantsText = !!data.wantsText; if (detailsChanged && state.open) showChat(); renderTextOffer(); var typing = data.staffTyping || null; var fresh = ingest(data.messages || []); var fromStaff = fresh.filter(function (m) { return m.sender === 'staff'; }); if (fromStaff.length) playChime(); if (fromStaff.length && (!state.open || !visible)) { store.unread = (store.unread || 0) + fromStaff.length; showPeek(fromStaff[fromStaff.length - 1]); } if (typing !== state.staffTyping || fresh.length) { state.staffTyping = typing; if (state.open) renderPending(); } persist(); markSeen(); renderHeader(); renderLauncher(); updateBanner(); }).catch(function (e) { if (e.status === 404) forget(); }) .then(function () { state.polling = false; }); } function schedule(ms) { clearTimeout(state.timer); if (!store.id) return; state.timer = setTimeout(function () { sync().then(function () { var hidden = document.visibilityState !== 'visible'; schedule(hidden ? POLL_HIDDEN : state.open ? POLL_OPEN : POLL_CLOSED); }); }, ms); } function showPeek(m) { if (state.open) return; el.peek.textContent = ''; if (m.staff && m.staff.photo) { var av = make('img', 'gpsec-chat-avatar'); av.src = m.staff.photo; av.alt = ''; av.width = 28; av.height = 28; el.peek.appendChild(av); } var wrap = make('div'); wrap.appendChild(make('strong', null, 'Message from ' + (m.staff ? m.staff.name : 'GPLANN'))); wrap.appendChild(make('span', null, m.body || 'Sent a photo')); el.peek.appendChild(wrap); clearTimeout(state.peekTimer); state.peekTimer = setTimeout(function () { el.peek.hidden = true; }, 15000); el.peek.hidden = false; } // ---------- Open / close ---------- var vv = window.visualViewport; function fitViewport() { // iOS: keep the composer above the keyboard on the full-screen phone view. if (vv && isPhone()) root.style.setProperty('--gpsec-chat-vh', vv.height + 'px'); else root.style.removeProperty('--gpsec-chat-vh'); } function openPanel(fromClick, source) { if (state.open) return; state.open = true; store.open = true; store.unread = 0; if (!store.landing) store.landing = location.href; persist(); el.panel.hidden = false; el.peek.hidden = true; el.nudge.hidden = true; root.classList.add('gpsec-chat--open'); el.launcher.setAttribute('aria-expanded', 'true'); if (isPhone()) { document.documentElement.classList.add('gpsec-chat-lock'); el.panel.setAttribute('aria-modal', 'true'); fitViewport(); } if (fromClick) track('opened', source ? { chat_source: source } : undefined); renderLauncher(); render(); var refresh = store.id ? sync() : fetchStatus(); refresh.then(function () { if (!store.id) render(); }); if (store.id) schedule(POLL_OPEN); if (!isPhone()) setTimeout(function () { if (!el.composer.hidden) el.text.focus(); }, 60); } function closePanel() { if (!state.open) return; state.open = false; store.open = false; persist(); el.panel.hidden = true; root.classList.remove('gpsec-chat--open'); el.launcher.setAttribute('aria-expanded', 'false'); document.documentElement.classList.remove('gpsec-chat-lock'); el.panel.removeAttribute('aria-modal'); if (store.id) schedule(POLL_CLOSED); el.launcher.focus({ preventScroll: true }); } /** * Ends the chat but keeps the thread: the history stays on screen, and the next * message reopens the same conversation (one thread per visitor on the staff side). */ function endChat() { if (!store.id) return; if (!window.confirm('End this chat? Your messages stay here, and you can pick it up again anytime.')) return; state.convStatus = 'closed'; state.staffTyping = null; renderHeader(); renderPending(); api('/api/chat/public/end', { conversationId: store.id, token: store.token }) .catch(function () {}) .then(function () { return sync(); }); } // ---------- Visitor check-ins (the staff console's Visitors tab) ---------- // One check-in per page view, a ping every 15s while the tab is visible, and a last // one as the page closes, so staff can see who's on the site, where they came from // and how long they've spent on each page. Also how a staff-started chat arrives. var VISITOR_KEY = 'gpsec-chat-visitor'; var visitor = load(VISITOR_KEY) || {}; var activeMs = 0; var visibleSince = document.visibilityState === 'visible' ? Date.now() : null; var pageViewId = null, pingTimer = null; function activeSeconds() { return Math.round((activeMs + (visibleSince ? Date.now() - visibleSince : 0)) / 1000); } function checkIn(event) { var body = { event: event, visitorId: visitor.id, key: visitor.key, pageViewId: pageViewId, page: pageInfo(), referrer: document.referrer, seconds: activeSeconds() }; if (event === 'leave') { try { if (navigator.sendBeacon) navigator.sendBeacon(API + '/api/chat/public/visit', new Blob([JSON.stringify(body)], { type: 'text/plain' })); } catch (e) {} return Promise.resolve(); } return api('/api/chat/public/visit', body).then(function (res) { if (res.reset) { visitor = {}; save(VISITOR_KEY, visitor); pageViewId = null; return event === 'view' ? null : checkIn('view'); } if (res.visitorId) { visitor.id = res.visitorId; if (res.key) visitor.key = res.key; save(VISITOR_KEY, visitor); } if (res.pageViewId) pageViewId = res.pageViewId; if (res.invite) acceptInvite(res.invite); }).catch(function () {}); } function schedulePing() { clearTimeout(pingTimer); pingTimer = setTimeout(function () { if (document.visibilityState === 'visible') checkIn('ping'); schedulePing(); }, 15000); } /** A staff member started a chat (or wrote into this visitor's existing one). */ function acceptInvite(invite) { if (invite.token && invite.conversationId !== store.id) { store = { id: invite.conversationId, token: invite.token, kind: 'live', msgs: [], lastSeq: 0, open: state.open, unread: 0, needsDetails: true, landing: store.landing }; persist(); } else if (invite.conversationId !== store.id) { return; } // Pull the message in now: sync chimes, and shows the reply bubble if the chat is closed. sync().then(function () { // Someone we already know: fill their details in for them instead of asking again. if (store.needsDetails && hasFullContact()) { return api('/api/chat/public/details', { conversationId: store.id, token: store.token, name: contact.name, phone: contact.phone, email: contact.email, phoneCanText: contact.phoneCanText }) .then(function () { store.needsDetails = false; persist(); }, function () {}); } }).then(function () { if (state.open) showChat(); renderHeader(); renderLauncher(); schedule(state.open ? POLL_OPEN : POLL_CLOSED); }); } // ---------- 5-minute nudge ---------- // After 5 minutes on the site today (time actually looking, across pages), a small // bubble says we're here to help. Once a day, never over an open chat or for // someone who has already chatted. var NUDGE_KEY = 'gpsec-chat-nudge'; var NUDGE_AFTER_SECONDS = 300; var nudge = load(NUDGE_KEY) || {}; if (nudge.day !== new Date().toDateString()) nudge = { day: new Date().toDateString(), seconds: 0, shown: false }; var nudgeBase = nudge.seconds || 0; function nudgeTick() { nudge.seconds = nudgeBase + activeSeconds(); save(NUDGE_KEY, nudge); if (nudge.shown || nudge.seconds < NUDGE_AFTER_SECONDS || store.id || state.open) return; nudge.shown = true; save(NUDGE_KEY, nudge); fetchStatus().then(showNudge); } function showNudge() { if (state.open || store.id) return; var who = state.online ? state.agents[0] : null; el.nudgeOpen.textContent = ''; if (who && who.photo) { var av = make('img', 'gpsec-chat-avatar'); av.src = who.photo; av.alt = ''; av.width = 28; av.height = 28; el.nudgeOpen.appendChild(av); } var wrap = make('div'); wrap.appendChild(make('strong', null, 'Questions about your rentals?')); wrap.appendChild(make('span', null, state.online ? (who ? who.name + ' is online now.' : "We're online now.") + ' Get quick answers on availability, sizing and pricing.' : "Leave a quick message and we'll get back to you first thing.")); wrap.appendChild(make('em', 'gpsec-chat-nudge-cta', state.online ? 'Chat with ' + (who ? who.name : 'us') + ' →' : 'Leave a message →')); el.nudgeOpen.appendChild(wrap); el.nudge.hidden = false; track('nudge_shown'); } // ---------- Wiring ---------- el.launcher.addEventListener('click', function (e) { e.preventDefault(); window.gpsecChatQueued = 0; unlockSound(); openPanel(true); }); el.sound.addEventListener('click', function () { try { localStorage.setItem(SOUND_KEY, soundMuted() ? 'on' : 'off'); } catch (e) {} renderSoundButton(); if (!soundMuted()) { unlockSound(); playChime(); } }); // Any tap or key press on the page lets the chime play later, but only for visitors with a chat going. ['pointerdown', 'keydown'].forEach(function (type) { document.addEventListener(type, function () { if (store.id || state.open) unlockSound(); }, { passive: true, capture: true }); }); el.peek.addEventListener('click', function () { unlockSound(); openPanel(true, 'reply_bubble'); }); el.nudgeOpen.addEventListener('click', function () { unlockSound(); openPanel(true, 'nudge'); }); el.nudgeX.addEventListener('click', function () { el.nudge.hidden = true; }); el.textOffer.querySelector('button').addEventListener('click', showTextForm); document.addEventListener('visibilitychange', function () { if (document.visibilityState === 'visible') { visibleSince = Date.now(); checkIn('ping'); } else if (visibleSince) { activeMs += Date.now() - visibleSince; visibleSince = null; checkIn('ping'); } }); window.addEventListener('pagehide', function () { checkIn('leave'); }); el.close.addEventListener('click', closePanel); el.end.addEventListener('click', endChat); el.attach.addEventListener('click', function () { pickPhotos(attachFiles); }); el.composer.addEventListener('submit', function (e) { e.preventDefault(); submitComposer(); }); el.text.addEventListener('input', function () { autoGrow(); updateSend(); if (store.id && el.text.value) state.typingDirty = true; }); el.text.addEventListener('keydown', function (e) { // Enter sends on a keyboard; on phones Enter is a new line and the send button sends. if (e.key === 'Enter' && !e.shiftKey && !window.matchMedia('(pointer: coarse)').matches) { e.preventDefault(); submitComposer(); } }); el.text.addEventListener('paste', function (e) { var files = Array.prototype.slice.call((e.clipboardData && e.clipboardData.files) || []); if (files.length) { e.preventDefault(); attachFiles(files); } }); el.panel.addEventListener('dragover', function (e) { if (el.composer.hidden || !e.dataTransfer || Array.prototype.indexOf.call(e.dataTransfer.types, 'Files') < 0) return; e.preventDefault(); if (!el.panel.querySelector('.gpsec-chat-drop')) el.panel.appendChild(make('div', 'gpsec-chat-drop', 'Drop photos or files to send')); }); el.panel.addEventListener('dragleave', function (e) { if (e.target === el.panel || !el.panel.contains(e.relatedTarget)) { var d = el.panel.querySelector('.gpsec-chat-drop'); if (d) d.remove(); } }); el.panel.addEventListener('drop', function (e) { var d = el.panel.querySelector('.gpsec-chat-drop'); if (d) d.remove(); if (el.composer.hidden) return; e.preventDefault(); attachFiles(Array.prototype.slice.call(e.dataTransfer.files || [])); }); el.panel.addEventListener('keydown', function (e) { if (e.key === 'Escape') closePanel(); }); // A link to one of our own pages from inside the chat: on phones, fold the chat away so they see the page. el.panel.addEventListener('click', function (e) { var a = e.target.closest && e.target.closest('a[href]'); if (a && isPhone() && isOwnSite(a.href) && a.target !== '_blank') { store.open = false; persist(); } }); // Any "#chat" link on the site opens the chat. document.addEventListener('click', function (e) { var a = e.target.closest && e.target.closest('a[href$="#chat"]'); if (!a || root.contains(a)) return; e.preventDefault(); openPanel(true); }); document.addEventListener('visibilitychange', function () { if (document.visibilityState === 'visible' && store.id) schedule(0); }); if (vv) vv.addEventListener('resize', function () { if (state.open) { fitViewport(); scrollDown(false); } }); window.addEventListener('resize', renderLauncher); // Sit above the Booqable cart button when there is one, otherwise in the corner. function placeLauncher() { var cart = document.getElementById('booqable-launcher'); var r = cart && cart.getBoundingClientRect(); var visible = r && r.width > 0 && getComputedStyle(cart).display !== 'none' && getComputedStyle(cart).visibility !== 'hidden'; var bottom = visible ? Math.round(window.innerHeight - r.top + 12) : 16; root.style.setProperty('--gpsec-chat-bottom', bottom + 'px'); } placeLauncher(); setTimeout(placeLauncher, 2500); setTimeout(placeLauncher, 8000); // ---------- Start up ---------- renderSoundButton(); renderLauncher(); var idle = window.requestIdleCallback || function (fn) { return setTimeout(fn, 1500); }; idle(function () { fetchStatus(); }); if (store.id) schedule(1000); // A tap that landed before this script ran (10Web delays scripts until first interaction). if (window.gpsecChatQueued) { window.gpsecChatQueued = 0; openPanel(true); } // Keep a desktop chat open from page to page. On phones it comes back folded, with a badge. else if (store.open && store.id && !isPhone()) openPanel(false); else if (location.hash === '#chat') openPanel(true, 'link'); checkIn('view'); schedulePing(); setInterval(nudgeTick, 5000); })();

Popup Gutter

Let's plan your event in person.