(() => { "use strict"; const ROOT_ID = "everdog-quiz-app"; const STORAGE_KEY = "everdog_longevity_quiz_v2"; const PROFILE_STORAGE_KEY = "everdog_longevity_profile_v1"; /* * Paste the published or preview URL of the personalised sample page here. * Example: https://everdog.vercel.app/preview/your-sample-page * Leave the placeholder unchanged while visually testing the quiz. */ const RESULTS_PAGE_URL = "https://everdog.vercel.app/trial-daily-longevity"; const EMAIL_PRODUCT_IMAGE_URL = "https://cdn.shopify.com/s/files/1/0976/3146/9911/files/sample-product-image-1.png?v=1785893079"; const KLAVIYO_PUBLIC_API_KEY = "WXA8mZ"; const KLAVIYO_API_REVISION = "2026-07-15"; const KLAVIYO_EVENT_NAME = "Completed Longevity Quiz"; const KLAVIYO_QUIZ_NAME = "EverDog Longevity Profile"; const KLAVIYO_QUIZ_VERSION = "3.0"; const KLAVIYO_PROFILE_ENDPOINT = `https://a.klaviyo.com/client/profiles?company_id=${encodeURIComponent(KLAVIYO_PUBLIC_API_KEY)}`; const KLAVIYO_EVENT_ENDPOINT = `https://a.klaviyo.com/client/events?company_id=${encodeURIComponent(KLAVIYO_PUBLIC_API_KEY)}`; const KLAVIYO_PENDING_STORAGE_KEY = "everdog_klaviyo_pending_requests_v3"; const KLAVIYO_SUBMISSION_ID_KEY = "everdog_klaviyo_submission_id_v3"; const AUTO_ADVANCE_DELAY_MS = 280; const KLAVIYO_HANDOFF_WAIT_MS = 850; const BENEFITS = [ { value: "healthy_ageing", label: "Healthy ageing", icon: "heart" }, { value: "joints_mobility", label: "Joints & mobility", icon: "paw" }, { value: "digestion_microbiome", label: "Digestion & gut", icon: "gut" }, { value: "brain_cognition", label: "Brain & cognition", icon: "brain" }, { value: "immune_support", label: "Immune support", icon: "shield" }, { value: "overall_wellness", label: "Overall wellness", icon: "spark" } ]; const SIZES = [ { value: "small", label: "Small", detail: "Under 10kg" }, { value: "medium", label: "Medium", detail: "10–25kg" }, { value: "large", label: "Large", detail: "Over 25kg" } ]; const DEFAULT_STATE = { step: "names", dogNames: [""], primaryDog: "", dogSize: "", benefit: "", email: "", marketingOptOut: false, completed: false }; let state = loadState(); let isSubmitting = false; const root = document.getElementById(ROOT_ID); if (!root) return; const stage = root.querySelector("#edq-stage"); const backButton = root.querySelector("#edq-back"); const nextButton = root.querySelector("#edq-next"); const actions = root.querySelector("#edq-actions"); const progressFill = root.querySelector("#edq-progress-fill"); const progressText = root.querySelector("#edq-progress-text"); function loadState() { try { const saved = sessionStorage.getItem(STORAGE_KEY); if (!saved) return { ...DEFAULT_STATE, dogNames: [""] }; const parsed = JSON.parse(saved); return { ...DEFAULT_STATE, ...parsed, dogNames: Array.isArray(parsed.dogNames) ? parsed.dogNames : [""] }; } catch (error) { console.warn("[EverDog Quiz] Could not restore quiz state.", error); return { ...DEFAULT_STATE, dogNames: [""] }; } } function saveState() { try { sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (error) { console.warn("[EverDog Quiz] Could not save quiz state.", error); } } function cleanName(value) { return String(value || "").replace(/\s+/g, " ").trim().slice(0, 30); } function validDogNames() { return state.dogNames.map(cleanName).filter(Boolean); } function dogName() { return cleanName(state.primaryDog) || validDogNames()[0] || "your dog"; } function escapeHtml(value) { return String(value ?? "") .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } function icon(name) { const common = 'width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"'; const icons = { heart: ``, paw: ``, gut: ``, brain: ``, shield: ``, spark: ``, clock: `` }; return icons[name] || icons.spark; } function stepSequence() { const steps = ["names"]; if (validDogNames().length > 1) steps.push("primary"); steps.push("size", "benefit", "email"); return steps; } function setProgress() { if (state.step === "complete") { progressFill.style.width = "100%"; progressText.textContent = "Complete"; return; } const stageMap = { names: { number: 1, fill: 25 }, primary: { number: 1, fill: 37.5 }, size: { number: 2, fill: 50 }, benefit: { number: 3, fill: 75 }, email: { number: 4, fill: 100 } }; const current = stageMap[state.step] || stageMap.names; progressFill.style.width = `${current.fill}%`; progressText.textContent = `Step ${current.number} of 4`; } function goTo(step) { state.step = step; saveState(); render(); root.scrollIntoView({ behavior: "smooth", block: "start" }); } function nextStep() { const steps = stepSequence(); const currentIndex = steps.indexOf(state.step); const next = steps[currentIndex + 1]; if (next) goTo(next); } function previousStep() { const steps = stepSequence(); const currentIndex = steps.indexOf(state.step); goTo(steps[Math.max(0, currentIndex - 1)] || "names"); } function emailIsValid(value) { return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(String(value || "").trim()); } function hasResultsPageUrl() { return Boolean(RESULTS_PAGE_URL && !RESULTS_PAGE_URL.includes("PASTE_SAMPLE_PAGE_URL_HERE")); } function getLabel(items, value, fallback = "") { return items.find(item => item.value === value)?.label || fallback; } function getSubmissionId() { try { const existing = sessionStorage.getItem(KLAVIYO_SUBMISSION_ID_KEY); if (existing) return existing; const generated = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `everdog-${Date.now()}-${Math.random().toString(36).slice(2, 12)}`; sessionStorage.setItem(KLAVIYO_SUBMISSION_ID_KEY, generated); return generated; } catch (error) { return `everdog-${Date.now()}-${Math.random().toString(36).slice(2, 12)}`; } } function buildResultsUrl(payload) { if (!hasResultsPageUrl()) return ""; const url = new URL(RESULTS_PAGE_URL, window.location.origin); url.searchParams.set("dog_name", payload.dog_name); url.searchParams.set("dog_size", payload.dog_size); url.searchParams.set("benefit", payload.benefit); if (payload.multiple_dogs) url.searchParams.set("multiple_dogs", "1"); url.searchParams.set("source", "quiz"); return url.toString(); } function buildKlaviyoProfile(payload) { const completedAt = new Date().toISOString(); const sizeLabel = getLabel(SIZES, payload.dog_size, payload.dog_size); const benefitLabel = getLabel(BENEFITS, payload.benefit, payload.benefit); return { data: { type: "profile", attributes: { email: payload.email, properties: { "Primary Dog Name": payload.dog_name, "Dog Size": sizeLabel, "Dog Size Key": payload.dog_size, "Primary Benefit": benefitLabel, "Primary Benefit Key": payload.benefit, "Multiple Dog Household": payload.multiple_dogs, "Other Dog Names": payload.other_dog_names, "EverDog Quiz Completed": true, "EverDog Quiz Completed At": completedAt, "EverDog Quiz Funnel": "Longevity Profile", "EverDog Quiz Version": KLAVIYO_QUIZ_VERSION, "EverDog Quiz Email Allowed": payload.email_marketing_allowed, "EverDog Quiz Marketing Opt-Out": payload.marketing_opt_out, "EverDog Quiz Source Page": window.location.href } } } }; } function buildKlaviyoEvent(payload, resultsUrl) { const completedAt = new Date().toISOString(); const submissionId = getSubmissionId(); const sizeLabel = getLabel(SIZES, payload.dog_size, payload.dog_size); const benefitLabel = getLabel(BENEFITS, payload.benefit, payload.benefit); return { data: { type: "event", attributes: { properties: { "Quiz Name": KLAVIYO_QUIZ_NAME, "Quiz Version": KLAVIYO_QUIZ_VERSION, "Dog Name": payload.dog_name, "Dog Size": sizeLabel, "Primary Benefit": benefitLabel, "Multiple Dog Household": payload.multiple_dogs, "Other Dog Names": payload.other_dog_names.join(", "), "Marketing Opt-Out": payload.marketing_opt_out, "Email Marketing Allowed": payload.email_marketing_allowed, "Results Page URL": resultsUrl, "Source": "EverDog Longevity Quiz" }, time: completedAt, unique_id: `everdog-longevity-quiz-${submissionId}`, metric: { data: { type: "metric", attributes: { name: KLAVIYO_EVENT_NAME } } }, profile: { data: { type: "profile", attributes: { email: payload.email } } } } } }; } function buildKlaviyoRequests(payload, resultsUrl) { return [ { id: "profile", endpoint: KLAVIYO_PROFILE_ENDPOINT, payload: buildKlaviyoProfile(payload) }, { id: "event", endpoint: KLAVIYO_EVENT_ENDPOINT, payload: buildKlaviyoEvent(payload, resultsUrl) } ]; } function savePendingRequests(requests) { try { localStorage.setItem( KLAVIYO_PENDING_STORAGE_KEY, JSON.stringify({ revision: KLAVIYO_API_REVISION, requests, saved_at: new Date().toISOString() }) ); } catch (error) { console.warn("[EverDog Quiz] Could not save pending Klaviyo requests.", error); } } function clearPendingRequests() { try { localStorage.removeItem(KLAVIYO_PENDING_STORAGE_KEY); } catch (error) { console.warn("[EverDog Quiz] Could not clear pending Klaviyo requests.", error); } } async function postKlaviyoRequest(request) { const response = await fetch(request.endpoint, { method: "POST", mode: "cors", credentials: "omit", cache: "no-store", keepalive: true, headers: { "accept": "application/vnd.api+json", "content-type": "application/vnd.api+json", "revision": KLAVIYO_API_REVISION }, body: JSON.stringify(request.payload) }); if (!response.ok) { throw new Error(`${request.id} returned HTTP ${response.status}`); } return request.id; } async function flushKlaviyoRequests(requests) { const results = await Promise.allSettled( requests.map(request => postKlaviyoRequest(request)) ); const remaining = requests.filter((request, index) => results[index].status === "rejected"); if (remaining.length) { savePendingRequests(remaining); remaining.forEach((request, index) => { const result = results[requests.indexOf(request)]; console.warn(`[EverDog Quiz] Klaviyo ${request.id} request will retry on the sample page.`, result?.reason); }); return false; } clearPendingRequests(); return true; } function delay(ms) { return new Promise(resolve => window.setTimeout(resolve, ms)); } function selectAndAdvance(stepName, selectedButton, applySelection) { if (state.step !== stepName || !selectedButton) return; applySelection(); saveState(); const optionGroup = selectedButton.closest(".edq-options"); if (optionGroup) { optionGroup.querySelectorAll(".edq-option").forEach(button => { const isSelected = button === selectedButton; button.classList.toggle("is-selected", isSelected); button.setAttribute("aria-pressed", String(isSelected)); button.disabled = true; }); } nextButton.disabled = true; window.setTimeout(() => { if (state.step === stepName) { nextStep(); } }, AUTO_ADVANCE_DELAY_MS); } function updateButtons() { backButton.style.visibility = state.step === "names" ? "hidden" : "visible"; actions.style.display = state.step === "complete" ? "none" : "grid"; let enabled = false; let label = "Continue"; if (state.step === "names") enabled = validDogNames().length >= 1; if (state.step === "primary") enabled = Boolean(cleanName(state.primaryDog)); if (state.step === "size") enabled = Boolean(state.dogSize); if (state.step === "benefit") enabled = Boolean(state.benefit); if (state.step === "email") { enabled = emailIsValid(state.email); label = `Continue to ${dogName()}’s sample`; } nextButton.disabled = !enabled; nextButton.textContent = label; } function renderNames() { const fields = state.dogNames.map((name, index) => `

${index > 0 ? `` : ""}

`).join(""); stage.innerHTML = `

What’s your dog’s name?

Personalise their free 7-day sample in less than 30 seconds.

${fields}

${state.dogNames.length < 3 ? `` : ""}

${icon("clock")}

Quick to complete Takes less than 30 seconds

Tell us their name, size and the area you’d most like to support. We’ll personalise their free sample from there.

`; stage.querySelectorAll("[data-dog-index]").forEach(input => { input.addEventListener("input", event => { const index = Number(event.currentTarget.dataset.dogIndex); state.dogNames[index] = event.currentTarget.value; if (index === 0 && !state.primaryDog) state.primaryDog = event.currentTarget.value; saveState(); updateButtons(); }); }); stage.querySelector("#edq-add-dog")?.addEventListener("click", () => { state.dogNames.push(""); saveState(); render(); stage.querySelector(`[data-dog-index="${state.dogNames.length - 1}"]`)?.focus(); }); stage.querySelectorAll("[data-remove-dog]").forEach(button => { button.addEventListener("click", event => { const index = Number(event.currentTarget.dataset.removeDog); const removed = cleanName(state.dogNames[index]); state.dogNames.splice(index, 1); if (cleanName(state.primaryDog) === removed) state.primaryDog = cleanName(state.dogNames[0]); saveState(); render(); }); }); } function renderPrimary() { const names = validDogNames(); if (names.length <= 1) { state.primaryDog = names[0] || ""; nextStep(); return; } stage.innerHTML = `

Who should we personalise the free sample for?

Your free sample contains a 7-day serving matched to one dog per household. Choose who you’d like us to personalise it for:

${names.map(name => ``).join("")}

`; stage.querySelectorAll("[data-primary-dog]").forEach(button => { button.addEventListener("click", event => { const selectedButton = event.currentTarget; const selected = selectedButton.dataset.primaryDog; selectAndAdvance("primary", selectedButton, () => { state.primaryDog = selected; }); }); }); } function renderSize() { const name = escapeHtml(dogName()); stage.innerHTML = `

How much does ${name} weigh?

This helps us match the correct 7-day sample quantity for ${name}.

${SIZES.map(size => ` `).join("")}

“

From a sample customer

I was worried Bertie wouldn’t eat it because he’s so fussy. The sample helped get him used to Daily Longevity, and he loved it.

Michelle, Bertie’s owner

`; stage.querySelectorAll("[data-size]").forEach(button => { button.addEventListener("click", event => { const selectedButton = event.currentTarget; const selected = selectedButton.dataset.size; selectAndAdvance("size", selectedButton, () => { state.dogSize = selected; }); }); }); } function renderBenefit() { const name = escapeHtml(dogName()); stage.innerHTML = `

What would you most like to support for ${name}?

Choose the area that matters most to you right now.

${BENEFITS.map(benefit => ` `).join("")}

${icon("heart")}

Why Daily Longevity Human-grade nutrition for more good years

Daily Longevity combines 20+ vitamins, minerals and bioactive ingredients to support healthy ageing, joints, digestion, brain health and immunity in one simple daily powder.

`; stage.querySelectorAll("[data-benefit]").forEach(button => { button.addEventListener("click", event => { const selectedButton = event.currentTarget; const selected = selectedButton.dataset.benefit; selectAndAdvance("benefit", selectedButton, () => { state.benefit = selected; }); }); }); } function renderEmail() { const name = escapeHtml(dogName()); stage.innerHTML = `

${name}’s Free Sample Is Ready To Claim.

Enter your email to continue to ${name}’s personalised 7-day sample.

EverDog Daily Longevity free 7-day sample

Free sample · £2.99 delivery · No subscription

`; const emailInput = stage.querySelector("#edq-email"); const marketingOptOutInput = stage.querySelector("#edq-marketing-opt-out"); emailInput.addEventListener("input", event => { state.email = event.currentTarget.value.trim(); event.currentTarget.setAttribute( "aria-invalid", String(Boolean(state.email) && !emailIsValid(state.email)) ); saveState(); updateButtons(); }); marketingOptOutInput.addEventListener("change", event => { state.marketingOptOut = event.currentTarget.checked; saveState(); }); emailInput.addEventListener("keydown", event => { if (event.key !== "Enter") return; event.preventDefault(); if (!emailIsValid(state.email)) { const error = stage.querySelector("#edq-error"); emailInput.setAttribute("aria-invalid", "true"); if (error) { error.textContent = "Please enter a valid email address."; } return; } completeQuiz(); }); } function renderComplete() { const name = escapeHtml(dogName()); const size = SIZES.find(item => item.value === state.dogSize)?.label || "Not selected"; const benefit = BENEFITS.find(item => item.value === state.benefit)?.label || "Not selected"; stage.innerHTML = `

${name}’s free sample is ready.

The quiz is complete and ready to continue to the personalised sample page.

Primary dog${name}

Size${escapeHtml(size)}

Support priority${escapeHtml(benefit)}

Email entered${state.email ? "Yes" : "No"}

Marketing opt-out${state.marketingOptOut ? "Yes" : "No"}

`; stage.querySelector("#edq-restart").addEventListener("click", () => { sessionStorage.removeItem(STORAGE_KEY); sessionStorage.removeItem(PROFILE_STORAGE_KEY); state = { ...DEFAULT_STATE, dogNames: [""] }; render(); }); } async function completeQuiz() { if (isSubmitting) return; isSubmitting = true; const error = stage.querySelector("#edq-error"); if (error) error.textContent = ""; nextButton.disabled = true; nextButton.textContent = `Preparing ${dogName()}’s sample…`; const payload = { dog_name: dogName(), dog_size: state.dogSize, benefit: state.benefit, multiple_dogs: validDogNames().length > 1, other_dog_names: validDogNames().filter(name => name !== dogName()), email: state.email, marketing_opt_out: state.marketingOptOut, email_marketing_allowed: !state.marketingOptOut, quiz_funnel: "longevity_profile" }; try { sessionStorage.setItem(PROFILE_STORAGE_KEY, JSON.stringify({ dog_name: payload.dog_name, dog_size: payload.dog_size, benefit: payload.benefit, multiple_dogs: payload.multiple_dogs })); } catch (storageError) { console.warn("[EverDog Quiz] Could not store profile handoff.", storageError); } const resultsUrl = buildResultsUrl(payload); const requests = buildKlaviyoRequests(payload, resultsUrl); /* * Save first, then try immediately. If Klaviyo is slow or unavailable, * the customer still reaches the sample page and the sample page retries. */ savePendingRequests(requests); const sendPromise = flushKlaviyoRequests(requests).catch(error => { console.warn("[EverDog Quiz] Klaviyo handoff will retry after redirect.", error); return false; }); await Promise.race([sendPromise, delay(KLAVIYO_HANDOFF_WAIT_MS)]); state.completed = true; saveState(); nextButton.textContent = "Opening their sample…"; if (resultsUrl) { window.location.assign(resultsUrl); return; } state.step = "complete"; isSubmitting = false; render(); } async function handleNext() { const error = stage.querySelector("#edq-error"); if (error) error.textContent = ""; if (state.step === "names") { const names = validDogNames(); if (!names.length) { if (error) error.textContent = "Please enter at least one dog’s name."; return; } state.dogNames = names; if (names.length === 1) state.primaryDog = names[0]; saveState(); nextStep(); return; } if (state.step === "email") { if (!emailIsValid(state.email)) { if (error) error.textContent = "Please enter a valid email address."; return; } await completeQuiz(); return; } nextStep(); } function render() { setProgress(); root.classList.toggle("edq-contact-step", state.step === "email"); switch (state.step) { case "names": renderNames(); break; case "primary": renderPrimary(); break; case "size": renderSize(); break; case "benefit": renderBenefit(); break; case "email": renderEmail(); break; case "complete": renderComplete(); break; default: state.step = "names"; renderNames(); } updateButtons(); } backButton.addEventListener("click", previousStep); nextButton.addEventListener("click", handleNext); render(); })();