Create New Journey
Branches
{(node.branches || ["OTA", "Direct", "Tour Op."]).map((b, i) => (
);
case "whatsapp":
return (
<>
{b}
equals "{b.toLowerCase()}"
))}
winback_offer_v3
en · marketing · approved
Hi {"{{first_name}}"}, we miss you in {"{{hotel_city}}"} 💛
As a returning guest, here's 10% off when you book direct: {"{{promo_code}}"}
Valid until {"{{expiry_date}}"}.
As a returning guest, here's 10% off when you book direct: {"{{promo_code}}"}
Valid until {"{{expiry_date}}"}.
{[["{{first_name}}", "contact.first_name"], ["{{hotel_city}}", "booking.hotel.city"], ["{{promo_code}}", "generated.promo"]].map(([k, v]) => (
))}
{k}
{v}
Win-Back · Editorial
Subject: A room is calling, {"{{first_name}}"}
Come back to where
the sea remembers you.
the sea remembers you.
Your last stay at {"{{hotel_name}}"} was a year ago this week. We saved a suite, and a small surprise, for your return.
Concierge AI · GPT-Hospitality
Multilingual · 23 languages
{["#a855f7", "#ED4D86", "#f59e0b", "#10b981", "#0ea5e9"].map((c, i) => (
))}
Configure this step.
;
}
};
return (
{open &&
);
};
window.Sidebar = Sidebar;
/* ===== wizard.jsx ===== */
// Wizard steps + Trigger picker
const WizardStepper = ({ active, onNavigate }) => {
const steps = [
{ n: 1, title: "Setup", sub: "Name your journey" },
{ n: 2, title: "Template", sub: "Choose a starting point" },
{ n: 3, title: "Trigger", sub: "Choose what starts it" },
{ n: 4, title: "Builder", sub: "Design your flow" },
];
return (
{children}
}
{steps.map((s, i) => {
const done = active > s.n;
const current = active === s.n;
return (
{i < steps.length - 1 && (
);
// ---- Wizard Step 2: Template picker ----
const TEMPLATES = [
{ id: "scratch", title: "Start from scratch", sub: "Build your journey step by step with a blank canvas.", icon: "sparkles", featured: true },
{ id: "prestay", title: "Pre-Stay", sub: "Engage guests from booking to arrival, confirmations, upsells, pre-arrival info.", icon: "calendarPlus", count: 12 },
{ id: "during", title: "During Stay", sub: "Enhance the on-property experience, welcome messages, check-in flows, concierge.", icon: "stack", count: 12 },
{ id: "post", title: "Post-Stay", sub: "Turn guests into advocates, feedback, reviews, thank you messages.", icon: "award", count: 12 },
{ id: "loyalty", title: "Loyalty & Retention", sub: "Build lasting relationships, enrollment, tier upgrades, points, birthday rewards.", icon: "heart", count: 12 },
{ id: "reengage", title: "Re-engagement", sub: "Win back dormant guests, reactivation campaigns, win-back sequences.", icon: "repeat", count: 12, recommended: true },
];
const TemplateStep = ({ onNext }) => {
const [selected, setSelected] = React.useState("scratch");
return (
);
};
// ---- Wizard Step 3: Trigger picker ----
const TRIGGER_COLORS = {
blue: { bg: "rgba(59,130,246,.10)", fg: "#3b82f6" },
red: { bg: "rgba(239,68,68,.10)", fg: "#ef4444" },
amber: { bg: "rgba(245,158,11,.12)", fg: "#d97706" },
green: { bg: "rgba(34,197,94,.10)", fg: "#16a34a" },
orange: { bg: "rgba(249,115,22,.10)", fg: "#ea580c" },
pink: { bg: "rgba(237,77,134,.10)", fg: "#db2777" },
purple: { bg: "rgba(168,85,247,.10)", fg: "#9333ea" },
slate: { bg: "rgba(100,116,139,.10)", fg: "#475569" },
neutral: { bg: "rgba(148,163,184,.12)", fg: "#475569" },
};
const TriggerStep = ({ onNext }) => {
const [selected, setSelected] = React.useState("booking_created");
return (
);
};
window.WizardStepper = WizardStepper;
window.SetupStep = SetupStep;
window.TemplateStep = TemplateStep;
window.TriggerStep = TriggerStep;
/* ===== builder.jsx ===== */
// Builder view, header + canvas + panels + node palette
const NODE_PALETTE = {
MESSAGES: [
{ type: "whatsapp", label: "WhatsApp", icon: "whatsapp" },
{ type: "ai", label: "AI Response",icon: "sparkles" },
{ type: "email", label: "Email", icon: "mail" },
{ type: "sms", label: "SMS", icon: "sms" },
],
DATA: [
{ type: "data", label: "Update Contact", icon: "user" },
{ type: "data", label: "Add Tag", icon: "tag" },
{ type: "data", label: "Webhook", icon: "code" },
],
LOGIC: [
{ type: "delay", label: "Time Delay", icon: "clock" },
{ type: "delay", label: "Delay Until", icon: "clock" },
{ type: "delay", label: "Send at Time", icon: "clock" },
{ type: "split", label: "Conditional Split",icon: "split" },
{ type: "abtest", label: "A/B Split", icon: "abtest" },
{ type: "end", label: "End", icon: "check" },
],
};
const PaletteSidebar = () => (
setSettings(true)} />
setSelected(n.id)}
onPaneClick={() => setSelected(null)}
/>
{selectedNode && setSelected(null)} onDelete={() => setSelected(null)} />}
{settings && setSettings(false)} />}
);
};
window.Builder = Builder;
/* ===== marketing.jsx ===== */
// Marketing sections: Triggers showcase + Journey Library
// Linework illustrations, pink + cream + dark palette only
const PINK = "#ED4D86";
const PINK_TINT = "#fbcfe8";
const PINK_SOFT = "#fdf2f8";
const CREAM = "#fef9f4";
const CREAM_BORDER = "#f1e9df";
const INK = "#0f172a";
const MUTE = "#94a3b8";
// ===================== TRIGGER ILLUSTRATIONS =====================
const BookingsArt = () => (
);
const ConvoArt = () => (
);
const ScheduledArt = () => (
);
const OnPropertyArt = () => (
);
const SegmentsArt = () => (
);
const ManualArt = () => (
);
// ===================== TRIGGER CARDS =====================
const TRIGGER_CARDS = [
{
n: "01", eyebrow: "PMS · CRS · CHANNEL MGR", title: "Reservations",
description: "Hotel-native triggers from your PMS, the moment they happen.",
bullets: [
"Created, updated, cancelled, no-show, folio paid.",
"Per-property and per-channel, OTA, direct, tour operator.",
],
quote: "\"A new direct booking just dropped. Fire the upgrade upsell.\"",
art: BookingsArt, span: 2,
},
{
n: "02", eyebrow: "WHATSAPP · WEB · SMS · EMAIL", title: "Conversations",
description: "Every reply, every chat, across every channel becomes a trigger.",
bullets: [
"Webchat started or finished, WhatsApp replied, SMS in, email opened.",
"Sentiment, intent and language extracted on the fly for routing.",
],
quote: "\"Guest replied on WhatsApp at 11pm. Handoff to the AI concierge.\"",
art: ConvoArt, span: 4,
},
{
n: "03", eyebrow: "FRONT DESK · OPERATIONS", title: "On-Property",
description: "What happens at the front desk and around the building.",
bullets: [
"Check-in, check-out, room assigned, room ready, late checkout.",
"Folio events, mini-bar, spa booking, restaurant reservation.",
],
quote: "\"Suite 412 just checked in. Send the welcome WhatsApp.\"",
art: OnPropertyArt, span: 2,
},
{
n: "04", eyebrow: "TIME · DATE · CADENCE", title: "Scheduled",
description: "Time itself becomes a trigger.",
bullets: [
"Birthday, anniversary, specific date, dormancy threshold.",
"Cron-style cadences: daily, weekly, monthly, quarterly.",
],
quote: "\"Every Monday at 9am, run the win-back over dormant guests.\"",
art: ScheduledArt, span: 2,
},
{
n: "05", eyebrow: "CRM · SEGMENTS · TAGS", title: "Profile changes",
description: "When a contact's profile changes, the journey reacts.",
bullets: [
"Segment entered, tag added, contact subscribed, journey completed.",
"Reacts to any custom field on the contact record.",
],
quote: "\"Tagged as VIP for the first time. Start the recognition flow.\"",
art: SegmentsArt, span: 2,
},
{
n: "06", eyebrow: "STAFF ACTIONS · INTEGRATIONS", title: "Manual & Custom",
description: "For everything else, staff actions and your own external systems.",
bullets: [
"Manual fire from any contact list, front desk and revenue managers.",
"Custom API events from your PMS, POS, loyalty platform or internal tools.",
],
quote: "\"Webhook from the spa: massage booked. Trigger the upsell sequence.\"",
art: ManualArt, span: 6, horizontal: true,
},
];
const TriggerCard = ({ data }) => {
const Art = data.art;
return (
);
// ===================== JOURNEY LIBRARY =====================
const LIBRARY_CATEGORIES = [
{
name: "Pre-Stay",
sub: "Engage guests from booking to arrival. Confirmations, upsells, pre-arrival info.",
count: 12,
samples: ["Booking confirmation", "Pre-arrival info", "Upgrade upsell", "Airport transfer", "Special requests"],
art: "presty",
},
{
name: "During Stay",
sub: "Enhance the on-property experience. Welcome messages, check-in flows, concierge.",
count: 12,
samples: ["Welcome WhatsApp", "Check-in flow", "Concierge handoff", "Mid-stay survey", "Late checkout offer"],
art: "during",
},
{
name: "Post-Stay",
sub: "Turn guests into advocates. Feedback, reviews, thank-you messages.",
count: 12,
samples: ["Thank-you note", "TripAdvisor ask", "NPS survey", "Lost & found", "Photo memories"],
art: "post",
},
{
name: "Loyalty & Retention",
sub: "Build lasting relationships. Enrollment, tier upgrades, points, birthday rewards.",
count: 12,
samples: ["Loyalty enrollment", "Tier upgrade", "Points expiring", "Birthday reward", "VIP recognition"],
art: "loyalty",
},
{
name: "Re-engagement",
sub: "Win back dormant guests. Reactivation campaigns, win-back sequences.",
count: 12,
samples: ["365-day win-back", "Dormant 90d", "Cancelled rebound", "Seasonal nudge", "Direct booking incentive"],
art: "winback",
},
];
const LibraryArt = ({ kind }) => {
const common = { width: 96, height: 96, viewBox: "0 0 96 96", style: { display: "block" } };
if (kind === "presty") {
return (
);
}
if (kind === "during") {
return (
);
}
if (kind === "post") {
return (
);
}
if (kind === "loyalty") {
return (
);
}
return (
);
};
const LibraryCard = ({ data }) => (
);
window.TriggersSection = TriggersSection;
window.LibrarySection = LibrarySection;
/* ===== email.jsx ===== */
// Email marketing sections: Gallery, AI Studio, Import, Campaign Audit
// Matches the pink/cream/dark aesthetic from marketing.jsx
const E_PINK = "#ED4D86";
const E_PINK_TINT = "#fbcfe8";
const E_PINK_SOFT = "#fdf2f8";
const E_CREAM = "#fef9f4";
const E_CREAM_BORDER = "#f1e9df";
const E_INK = "#0f172a";
const E_MUTE = "#94a3b8";
const { useState: eUseState, useEffect: eUseEffect, useRef: eUseRef } = React;
// ============== HOTEL IMAGES (real unsplash) ==============
const HOTEL_IMG = {
pool: "https://images.unsplash.com/photo-1571896349842-33c89424de2d?w=900&q=80&auto=format&fit=crop",
villa: "https://images.unsplash.com/photo-1582719508461-905c673771fd?w=900&q=80&auto=format&fit=crop",
beach: "https://images.unsplash.com/photo-1566073771259-6a8506099945?w=900&q=80&auto=format&fit=crop",
sunset: "https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?w=900&q=80&auto=format&fit=crop",
bungalow: "https://images.unsplash.com/photo-1519449556851-5720b33024e7?w=900&q=80&auto=format&fit=crop",
spa: "https://images.unsplash.com/photo-1540541338287-41700207dee6?w=900&q=80&auto=format&fit=crop",
};
// ============== USE IN VIEW HOOK ==============
const useInView = (threshold = 0.2) => {
const ref = eUseRef(null);
const [seen, setSeen] = eUseState(false);
eUseEffect(() => {
if (!ref.current) return;
const ob = new IntersectionObserver(
([e]) => { if (e.isIntersecting) { setSeen(true); ob.disconnect(); } },
{ threshold }
);
ob.observe(ref.current);
return () => ob.disconnect();
}, []);
return [ref, seen];
};
// ============== SCALE FRAME ==============
// Shrinks a fixed-canvas product mockup to fit any container width,
// preserving its exact desktop composition instead of restacking it into a
// mobile-native column. Restacking a product screenshot produces a different,
// worse-looking UI that no longer reads as "the real product"; scaling keeps
// it recognisable, just smaller — the same technique memory's hero diagram
// has always used. The wrapper is sized to the SCALED height because
// transform does not affect layout: without it the element would still
// reserve its full native height and leave a large gap below.
// NOTE: uses the plain useRef/useState/useEffect bindings from the top of
// this file, not the eUse* aliases below — the react-hooks lint rule only
// recognises a hook by NAME, so an aliased eUseEffect reads as an ordinary
// function call and every ref access inside it is flagged as render-phase.
const ScaleFrame = ({ nativeWidth, children, style }) => {
const wrapRef = useRef(null);
const innerRef = useRef(null);
const [scale, setScale] = useState(1);
const [nativeHeight, setNativeHeight] = useState(0);
useEffect(() => {
const wrap = wrapRef.current;
if (!wrap) return;
const ro = new ResizeObserver((entries) => {
const w = entries[0].contentRect.width;
if (w > 0) setScale(Math.min(1, w / nativeWidth));
});
ro.observe(wrap);
return () => ro.disconnect();
}, [nativeWidth]);
useEffect(() => {
const inner = innerRef.current;
if (!inner) return;
const ro = new ResizeObserver((entries) => {
const h = entries[0].contentRect.height;
if (h > 0) setNativeHeight(h);
});
ro.observe(inner);
return () => ro.disconnect();
}, []);
return (
);
};
// ============== EMAIL INTRO ==============
const EmailIntro = () => (
);
// ============== TEMPLATE THUMBNAIL ==============
const TemplateThumb = ({ kind, hotel, headline, accent }) => {
const c = accent || E_PINK;
if (kind === "image") {
return (
);
}
if (kind === "dark") {
return (
);
}
// light
return (
);
};
// ============== GALLERY ARTIFACT ==============
const GALLERY_TEMPLATES = [
{ name: "Birthday Greeting (colorful)", folder: "Post-Stay", tags: ["birthday", "anniversary"], kind: "light", headline: "Happy Birthday, {{first_name}}!", accent: "#dc2626" },
{ name: "Birthday Greeting (dark)", folder: "Post-Stay", tags: ["birthday"], kind: "dark", headline: "Happy Birthday, {{first_name}}!", accent: "#f59e0b" },
{ name: "Birthday Greeting (light)", folder: "Post-Stay", tags: ["birthday"], kind: "light", headline: "Happy Birthday, {{first_name}}!", accent: "#0ea5e9" },
{ name: "Loyalty Enrollment", folder: "Loyalty", tags: ["loyalty"], kind: "image", hotel: HOTEL_IMG.pool, headline: "Join {{hotel_name}} Rewards" },
{ name: "Loyalty Enrollment (dark)", folder: "Loyalty", tags: ["loyalty"], kind: "image", hotel: HOTEL_IMG.sunset, headline: "Join {{hotel_name}} Rewards" },
{ name: "Re-Booking Incentive", folder: "Re-engagement", tags: ["rebooking"], kind: "image", hotel: HOTEL_IMG.bungalow, headline: "Your Next Escape Awaits" },
{ name: "Re-Booking Incentive (dark)", folder: "Re-engagement", tags: ["rebooking"], kind: "image", hotel: HOTEL_IMG.beach, headline: "Your Next Escape Awaits" },
{ name: "Re-Booking Incentive (light)", folder: "Re-engagement", tags: ["rebooking"], kind: "image", hotel: HOTEL_IMG.villa, headline: "Your Next Escape Awaits" },
{ name: "Thank You & Review", folder: "Post-Stay", tags: ["thank-you"], kind: "image", hotel: HOTEL_IMG.pool, headline: "Thank You, {{first_name}}" },
{ name: "Thank You & Review (dark)", folder: "Post-Stay", tags: ["thank-you"], kind: "image", hotel: HOTEL_IMG.sunset, headline: "Thank You, {{first_name}}" },
{ name: "Thank You & Review (light)", folder: "Post-Stay", tags: ["thank-you"], kind: "image", hotel: HOTEL_IMG.spa, headline: "Thank You, {{first_name}}" },
{ name: "Pre-Arrival Welcome", folder: "Pre-Stay", tags: ["pre-stay"], kind: "image", hotel: HOTEL_IMG.villa, headline: "We can’t wait, {{first_name}}" },
];
const FOLDERS = [
{ name: "All Templates", count: 90, active: false },
{ name: "In-Stay", count: 12 },
{ name: "Loyalty", count: 15 },
{ name: "Newsletter", count: 9 },
{ name: "Post-Stay", count: 12, active: true },
{ name: "Pre-Stay", count: 15 },
{ name: "Promotional", count: 24 },
{ name: "Re-engagement", count: 3 },
];
const TRANSLATE_LANGS = [
{ code: "ES", name: "Spanish", headline: "Tu próxima escapada te espera" },
{ code: "FR", name: "French", headline: "Votre prochaine évasion" },
{ code: "DE", name: "German", headline: "Ihre nächste Auszeit wartet" },
{ code: "IT", name: "Italian", headline: "La tua prossima fuga" },
{ code: "PT", name: "Portuguese", headline: "A sua próxima escapada" },
{ code: "NL", name: "Dutch", headline: "Je volgende ontsnapping" },
{ code: "RU", name: "Russian", headline: "Ваш следующий отдых" },
];
// Phases: 0 idle, 1 modal open, 2 picking ES, 3 picking DE, 4 picking IT, 5 click translate, 6 translating, 7 done (variants visible), then loop
const GalleryArtifact = () => {
const [ref, seen] = useInView(0.15);
const [phase, setPhase] = eUseState(0);
eUseEffect(() => {
if (!seen) return;
let cancelled = false;
const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const run = async () => {
while (!cancelled) {
setPhase(0); await wait(1200); if (cancelled) return;
setPhase(1); await wait(1400); if (cancelled) return; // modal open
setPhase(2); await wait(1100); if (cancelled) return; // ES checked
setPhase(3); await wait(1100); if (cancelled) return; // DE checked
setPhase(4); await wait(1100); if (cancelled) return; // IT checked
setPhase(5); await wait(1300); if (cancelled) return; // hover translate btn
setPhase(6); await wait(1800); if (cancelled) return; // translating in modal
setPhase(7); await wait(4200); if (cancelled) return; // placeholder cards w/ progress
setPhase(8); await wait(5500); if (cancelled) return; // ready cards
}
};
run();
return () => { cancelled = true; };
}, [seen]);
const selected = phase >= 2 && phase <= 8
? ["ES", phase >= 3 ? "DE" : null, phase >= 4 ? "IT" : null].filter(Boolean)
: [];
const showModal = phase >= 1 && phase <= 6;
const translating = phase === 7;
const showVariants = phase === 7 || phase === 8;
const variantsReady = phase === 8;
return (
{/* Artifact frame */}
);
};
// ============== AI STUDIO ARTIFACT ==============
const PROMPT_LIBRARY = [
{ name: "Black Friday", style: "Bold", color: "#fee2e2", accent: "#dc2626" },
{ name: "Cyber Monday", style: "Modern", color: "#dbeafe", accent: "#2563eb" },
{ name: "Summer Special", style: "Resort", color: "#cffafe", accent: "#0891b2" },
{ name: "Winter Escape", style: "Luxury", color: "#fef3c7", accent: "#b45309" },
{ name: "Early Bird", style: "Minimal", color: "#fef3c7", accent: "#b45309" },
{ name: "Flash Sale", style: "Bold", color: "#fee2e2", accent: "#dc2626" },
{ name: "Holiday Season", style: "Classic", color: "#dbeafe", accent: "#1e40af" },
{ name: "Anniversary", style: "Boutique", color: "#fef3c7", accent: "#b45309" },
{ name: "Eco Retreat", style: "Eco", color: "#dcfce7", accent: "#15803d" },
{ name: "Booking Confirm", style: "Modern", color: "#dbeafe", accent: "#2563eb" },
{ name: "Room Upgrade", style: "Luxury", color: "#fef3c7", accent: "#b45309" },
{ name: "Pre-Arrival", style: "Resort", color: "#cffafe", accent: "#0891b2" },
];
const TYPING_PROMPT = "Create a summer promotion email for Aurea Hotels beachfront properties with 20% early bird discount.";
const AIStudioArtifact = () => {
const [ref, seen] = eUseRef ? useInView(0.2) : [null, false];
// Phases: 0 landing idle, 1 typing prompt in centered box, 2 plus-button drawer open,
// 3 drawer closes & layout shifts to chat/canvas split (prompt sent), 4 AI thinking,
// 5 AI reply + email renders, 6 dwell
const [phase, setPhase] = eUseState(0);
const [typed, setTyped] = eUseState("");
eUseEffect(() => {
if (!seen) return;
let cancel = false;
const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const run = async () => {
while (!cancel) {
setPhase(0); setTyped("");
await wait(1200);
setPhase(1);
for (let i = 1; i <= TYPING_PROMPT.length; i++) {
if (cancel) return;
setTyped(TYPING_PROMPT.slice(0, i));
await wait(20);
}
await wait(600);
setPhase(2); // + popup
await wait(2000);
setPhase(3); // Design Controls drawer
await wait(3500);
setPhase(4); // drawer closes, popup gone
await wait(700);
setPhase(5); // Sections modal
await wait(3500);
setPhase(6); // modal closes
await wait(600);
setPhase(7); // chat split
await wait(900);
setPhase(8); // AI thinking
await wait(1700);
setPhase(9); // email renders
await wait(8000);
}
};
run();
return () => { cancel = true; };
}, [seen]);
return (
{/* Artifact */}
);
};
// ============== GENERATED EMAIL PREVIEW (high-quality realistic) ==============
const GeneratedEmailPreview = () => (
200 templates,
{/* Visual: Import Templates side drawer */}
);
};
// ============== CAMPAIGN AUDIT ARTIFACT ==============
const AUDIT_CHECKS = [
{ group: "Content Integrity", items: [
"Template has sufficient content",
"All links have valid href values",
"No placeholder domains detected",
"All images have valid src values",
"All images have alt text",
]},
{ group: "Deliverability", items: [
"Unsubscribe link present",
"Preferences link present",
"Domain \"hotelinking.com\" is verified",
]},
{ group: "Audience & Settings", items: [
"2,630 recipients will receive this campaign",
"Subject line length is good (52 chars)",
"No spam trigger words detected",
"Sender name and reply-to set",
]},
];
const CampaignAuditArtifact = () => {
const [ref, seen] = useInView(0.15);
const [revealed, setRevealed] = eUseState(0);
const total = AUDIT_CHECKS.reduce((a, g) => a + g.items.length, 0);
eUseEffect(() => {
if (!seen) return;
let i = 0;
const t = setInterval(() => {
i += 1;
setRevealed(i);
if (i >= total) clearInterval(t);
}, 240);
return () => clearInterval(t);
}, [seen]);
return (
{/* Wizard step strip */}
);
};
// ============== MAIN EMAIL SECTION ==============
const EmailSection = () => (
<>
{/* Wizard step strip */}
{step === 0 && (
);
};
window.CampaignWizardArtifact = CampaignWizardArtifact;
/* ===== whatsapp.jsx ===== */
// ============== WHATSAPP SECTION (intro + AI Studio) ==============
// Matches the pink/cream/dark aesthetic used by email.jsx, relies on the
// E_PINK / E_INK / useInView / eUseState / eUseEffect / eUseRef helpers
// already defined in email.jsx (loaded earlier in the page).
// WhatsApp brand
const WA_GREEN = "#25D366";
const WA_GREEN_DEEP = "#128C7E";
const WA_BUBBLE_BG = "#202C33";
const WA_CHAT_BG = "#0B141A";
const WA_HEADER_BG = "#1F2C33";
const WA_OUT_BUBBLE = "#005C4B";
// ============== PHONE FRAME (reusable) ==============
const WAPhone = ({ children, time = "04:48 PM", height = 600 }) => (
);
window.WhatsAppIntro = WhatsAppIntro;
window.WAPhone = WAPhone;
window.WATemplateBubble = WATemplateBubble;
window.WA_GREEN = WA_GREEN;
window.WA_GREEN_DEEP = WA_GREEN_DEEP;
window.WA_BUBBLE_BG = WA_BUBBLE_BG;
window.WA_CHAT_BG = WA_CHAT_BG;
window.WA_HEADER_BG = WA_HEADER_BG;
/* ===== whatsapp_studio.jsx ===== */
// ============== WHATSAPP AI TEMPLATE STUDIO ARTIFACT ==============
// 5-step wizard: Use Case → Prompt → Options → Generate → Results
// Loops automatically.
const WA_USE_CASES = [
{ name: "Welcome Message", icon: "msg", desc: "Greet new guests after booking confirmation" },
{ name: "Booking Confirmation", icon: "cal", desc: "Confirm reservation details with all information" },
{ name: "Check-in Day Reminder", icon: "key", desc: "Remind guests about check-in on arrival day" },
{ name: "Checkout Reminder", icon: "logout", desc: "Remind guests about checkout time and process" },
{ name: "Seasonal Promotion", icon: "gift", desc: "Promote seasonal packages and deals" },
{ name: "Feedback Request", icon: "msg", desc: "Request guest feedback after stay" },
];
const WA_CATEGORIES = [
{ name: "Welcome & Onboarding", desc: "First impressions and guest onboarding messages", count: 2, icon: "msg" },
{ name: "Booking & Reservations", desc: "Confirmations, modifications, and cancellations", count: 3, icon: "cal" },
{ name: "Check-in", desc: "Arrival day messages and room ready notifications", count: 2, icon: "key" },
{ name: "Check-out", desc: "Departure reminders and post-stay messages", count: 2, icon: "logout" },
{ name: "Offers & Promotions", desc: "Marketing promotions and special offers", count: 3, icon: "gift" },
{ name: "Feedback & Reviews", desc: "Collect feedback and encourage reviews", count: 2, icon: "msg" },
{ name: "Reminders & Alerts", desc: "Appointment and service reminders", count: 3, icon: "bell" },
{ name: "Service & Support", desc: "Service confirmations and issue resolution", count: 2, icon: "support" },
];
const WA_GEN_CHECKS = [
"Analyzing your prompt",
"Building context",
"Generating templates",
"Scoring compliance & quality",
"Finalizing results",
];
const WA_TYPING_PROMPT = "Booking confirmation with reservation details and confirmation number for guests at our 5-star resort. Include check-in/out dates, room type, total amount, and a clear cancellation policy.";
const WAStepIcon = ({ name, color = "#475569", size = 16 }) => {
const stroke = { fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
const filled = { fill: color };
if (name === "msg") return ;
if (name === "cal") return ;
if (name === "key") return ;
if (name === "logout") return ;
if (name === "gift") return ;
if (name === "bell") return ;
if (name === "support") return ;
if (name === "check") return ;
if (name === "spark") return ;
return null;
};
// Brand fuchsia only, alias to E_PINK from email.jsx so all "AI" / "approval" surfaces use brand
const WA_AI_PURPLE = E_PINK;
const WA_AI_PURPLE_SOFT = E_PINK_SOFT;
// Override green-deep usage in OUR UI (not in the actual WhatsApp phone bubble) with fuchsia
const WA_OK = E_PINK;
const WA_OK_SOFT = E_PINK_SOFT;
const WAStudioArtifact = () => {
const [ref, seen] = useInView(0.15);
// Phases: 0 idle, 1 use-case grid, 2 selected booking confirmation,
// 3 prompt typing, 4 options, 5 generating (with checklist filling),
// 6 results revealed, 7 settle, then loop
const [phase, setPhase] = eUseState(0);
const [loopKey, setLoopKey] = eUseState(0);
const [typed, setTyped] = eUseState("");
const [genStep, setGenStep] = eUseState(0);
const [genProgress, setGenProgress] = eUseState(0);
eUseEffect(() => {
if (!seen) return;
const timeline = [
[400, 1], // step 1 use case appears
[1800, 2], // booking confirmation selected
[2900, 3], // step 2 prompt typing
[6500, 4], // step 3 options
[8400, 5], // step 4 generating
[13200, 6], // step 5 results
[21000, 7], // settle
[25000, 0], // loop back
];
const ts = timeline.map(([d, p]) => setTimeout(() => setPhase(p), d));
ts.push(setTimeout(() => setLoopKey(k => k + 1), timeline[timeline.length - 1][0] + 100));
return () => ts.forEach(clearTimeout);
}, [seen, loopKey]);
// Reset on loop
eUseEffect(() => {
if (phase === 0) {
setTyped(""); setGenStep(0); setGenProgress(0);
}
}, [phase]);
// Typing animation
eUseEffect(() => {
if (phase !== 3) return;
let i = 0;
const id = setInterval(() => {
i += 3;
setTyped(WA_TYPING_PROMPT.slice(0, i));
if (i >= WA_TYPING_PROMPT.length) clearInterval(id);
}, 28);
return () => clearInterval(id);
}, [phase]);
// Generation checklist + progress
eUseEffect(() => {
if (phase !== 5) return;
const stepIds = WA_GEN_CHECKS.map((_, i) => setTimeout(() => setGenStep(i + 1), 700 + i * 800));
const progId = setInterval(() => {
setGenProgress((p) => (p >= 100 ? 100 : p + 2.5));
}, 100);
return () => { stepIds.forEach(clearTimeout); clearInterval(progId); };
}, [phase]);
const stepNum = phase >= 6 ? 5 : phase >= 5 ? 4 : phase >= 4 ? 3 : phase >= 3 ? 2 : 1;
const stepName = ["", "Choose a Use Case", "Choose a Use Case", "Describe Your Template", "Configure Options", "Generating...", "Review Results", "Review Results"][phase] || "Choose a Use Case";
return (
▾
{expanded && (
)}
);
};
const AiInsightsPanel = ({ t, channel }) => {
const accent = CHANNEL_ACCENTS.ai;
const [expanded, setExpanded] = React.useState("performance");
const data = channel === "email" ? EMAIL_DATA : WHATSAPP_DATA;
const channelLabel = channel === "email" ? "Email" : "WhatsApp";
return (
);
};
window.AnalyticsSection = AnalyticsSection;
/* ===== app.jsx ===== */
// Main app, wires hero + wizard + builder
// The headline was a hardcoded fontSize:88 that never shrank, so on a phone
// it burned ~2 screens before any content. Every other platform page shares
// styles.css's .h-display/.eyebrow/.lead/.btn, which already carry the
// responsive clamp() and a wrapping CTA row — rebuilt on those so this hero
// scales like the rest of the site.
const Hero = () => (
);
const App = () => {
// 1=setup, 2=template, 3=trigger, 4=builder
const [step, setStep] = useState(4); // jump straight to builder for the showcase
const data = JOURNEY_DATA;
const goBackToList = () => setStep(1);
if (step === 4) {
return (
exactly like every other artifact on this
page. A phone therefore sees the SAME canvas a desktop does, just
smaller: same palette, same nodes, same branch edges. */}
);
}
// Wizard layout (steps 1-3)
return (
);
};
/* expose */
window.JourneysHero = App;
})();
s.n ? "#a855f7" : "#e2e8f0", marginTop: 14 }} />
)}
);
})}
);
};
// ---- Wizard Step 1: Setup ----
const SetupStep = ({ onNext }) => (
Let's set up your journey
Give your journey a name and optionally assign it to a specific hotel.
setSelected("scratch")} style={{
border: selected === "scratch" ? "2px solid #a855f7" : "1px solid #ececec",
background: selected === "scratch" ? "rgba(168,85,247,.04)" : "#fff",
borderRadius: 14, padding: 18, display: "flex", alignItems: "center", gap: 14, cursor: "pointer",
marginBottom: 28,
}}>
)}
Start from scratch
Build your journey step by step with a blank canvas.
Browse by category
Pre-built journeys designed for hotels, ready to use.
{TEMPLATES.slice(1).map((t) => (
{t.recommended && Recommended for win-back}
))}
{t.title}
{t.sub}
{t.count} journeys
What should trigger this journey?
Select the event that will start this journey for your guests.
{window.TRIGGERS.map((sec) => (
))}
{sec.section}
{sec.items.map((t) => {
const c = TRIGGER_COLORS[t.color] || TRIGGER_COLORS.neutral;
const isSel = selected === t.id;
return (
);
})}
Add Steps
Click or drag to canvas
{Object.entries(NODE_PALETTE).map(([section, items]) => (
{section}
{items.map((it, i) => {
const style = NODE_STYLE[it.type] || {};
return (
Win back · 365 days after booking
Draft
Unsaved changes
e.stopPropagation()} style={{
background: "#fff", borderRadius: 14, width: 480, padding: 24, boxShadow: "0 30px 60px rgba(15,23,42,.30)",
}}>
AI Assistance
Do Not Disturb
Smart Sending
)}
Journey Settings
Configure channel-specific settings for this journey
AI settings will inherit from hotel configuration. You can customize per-node settings by adding AI Response nodes.
Using tenant default: 16 hours
hours
{data.n} / {data.eyebrow}
{data.title}
{data.description}
-
{data.bullets.map((b, i) => (
- • {b} ))}
{data.quote}
30+ TRIGGERS · 6 CATEGORIES
Anything can start a journey.
A reservation, a reply, a returning guest, a Tuesday at 9am. GuestMaker listens to your PMS, your inbox, your chatbot and your calendar, then sets the right journey in motion.
{TRIGGER_CARDS.map((c) =>
{data.count} journeys
{data.name}
{data.sub}
{data.samples.map((s) => (
{s}
))}
THE JOURNEY LIBRARY
60 ready-made journeys,
growing weekly.
Pre-built journeys designed for hotels, ready to use. Pick one, swap the copy for your brand voice, set it live in an afternoon.
60+
TEMPLATES · 5 CATEGORIES
New templates published every two weeks. Suggest one and we’ll build it.
{children}
EMAIL · TEMPLATES & CAMPAIGNS
Beautiful emails,
in any language, in minutes.
90 hospitality-grade templates out of the box, an AI studio that generates editable HTML in under two minutes, one-click multilingual translation, and a campaign wizard that audits every send before you press the button.
{"{{hotel_name}}"}
{headline}
{"{{hotel_name}}"}
{headline}
{"{{hotel_name}}"}
{headline}
01 · GUESTMAKER GALLERY
90 templates, 26 languages, one click.
The Guestmaker Gallery ships with hospitality-grade templates across pre-stay, in-stay, post-stay, loyalty, and promotions. Translate any template into 26 languages in one click, every variant stays in sync with the original.
{/* Top bar */}
TEMPLATES ›
EMAIL
{/* Folders */}
{/* Right side */}
FOLDERS
{FOLDERS.map((f) => (
{f.name === "All Templates" ? "📂" : "📁"} {f.name}
{f.count}
))}
✨ AI TRANSLATE
Spanish, French, German, Italian, 26 languages, one click.
{/* Tabs */}
{/* Grid */}
All
{["Promotional", "Transactional", "Newsletter", "Welcome", "Re-engagement"].map((t) => (
{t}
))}
{/* Action toolbar */}
1 selected · Early Bird (dark)
{/* Translated variant cards (appear top-left) */}
{showVariants && ["ES", "DE", "IT"].map((sel, vi) => {
const variant = TRANSLATE_LANGS.find((l) => l.code === sel);
const ready = variantsReady; // simple binary; per-card stagger via CSS animation-delay
return (
);
})}
{GALLERY_TEMPLATES.map((t, i) => {
const isHero = i === 5; // Early Bird-ish hero card
return (
{/* Translate Modal Overlay */}
{showModal && (
{ready ? <>✨ NEW · {variant.code} : (
<>
{variant.code}
)}
{!ready && (
)}
TRANSLATING…
{"{{hotel_name}}"}
{ready ? variant.headline : "…"}
Early Bird ({variant.name})
{ready ? "translated" : "in progress"}
{variant.code}
{isHero && (
);
})}
{t.name}
Active
{t.tags.slice(0, 2).map((tag) => (
{tag}
))}
EN
文A
Translate Template
Early Bird (dark)
{selected.length} selected
Select All
Clear
{TRANSLATE_LANGS.map((l) => {
const isSel = selected.includes(l.code);
return (
{l.code}
);
})}
{isSel &&
{l.name}
02 · AI EMAIL STUDIO
From sentence to send-ready, in two minutes.
30+ curated prompts cover every hospitality scenario, Black Friday, post-stay thank-you, room upgrade, anniversary. Pick one or describe your own. The AI Studio writes copy, picks imagery, builds responsive HTML, and hands it off to the visual editor in under 120 seconds.
{/* Advanced Design drawer overlay (phase 3) */}
{phase === 3 && (
<>
ADVANCED
Design controls
{[
{ l: "Hero treatment", o: ["Full-bleed", "Boxed", "Split", "None"], a: 0 },
{ l: "Typography", o: ["Editorial", "Modern", "Friendly"], a: 0 },
{ l: "Color mood", sw: ["#0f172a", "#0a4f4a", "#7c2d12", "#be185d", "#1e3a8a"], a: 1 },
{ l: "Density", o: ["Compact", "Comfortable", "Spacious"], a: 1 },
{ l: "CTA style", o: ["Solid", "Outline", "Pill", "Underline"], a: 0 },
{ l: "Image style", o: ["Photographic", "Illustrative", "None"], a: 0 },
].map((c, i) => (
))}
{c.l}
{c.sw ? (
{c.sw.map((sw, j) => (
))}
) : (
{c.o.map((o, j) => (
)}
{o}
))}AI will adapt
These rules apply to every email this session generates.
SECTIONS LIBRARY
Build your email layout
{["All", "Hero", "Content", "Cards", "Social proof", "CTA"].map((t, i) => (
{t}
))}
{[
{ n: "Hero, Full bleed", c: "Hero", bg: "#fef2f2", bar: "#dc2626", on: true },
{ n: "Hero, Boxed", c: "Hero", bg: "#eff6ff", bar: "#2563eb" },
{ n: "Hero, Split", c: "Hero", bg: "#ecfdf5", bar: "#059669" },
{ n: "Headline + Subhead", c: "Content", bg: "#fef3c7", bar: "#d97706", on: true },
{ n: "Personalized Greeting", c: "Content", bg: "#fdf4ff", bar: "#a855f7", on: true },
{ n: "Stat Strip", c: "Content", bg: "#f0f9ff", bar: "#0891b2", on: true },
{ n: "Property Cards, 3up", c: "Cards", bg: "#fef2f2", bar: "#be185d", on: true },
{ n: "Property Cards, 2up", c: "Cards", bg: "#fff7ed", bar: "#c2410c" },
{ n: "Inclusion List", c: "Cards", bg: "#f0fdf4", bar: "#16a34a" },
{ n: "Guest Testimonial", c: "Social proof", bg: "#fdf4ff", bar: "#7c3aed" },
{ n: "Booking Deadline", c: "CTA", bg: "#fffbeb", bar: "#b45309", on: true },
{ n: "Final CTA, Dark", c: "CTA", bg: "#1e293b", bar: E_PINK, on: true, dark: true },
].map((s, i) => (
{s.on && (
{s.n}
{s.c}
7 sections selected, drag to reorder
SESSIONS
{[
{ t: "Build me a featured property…", s: "about 21 hours ago", st: "Modern" },
{ t: "The Meridian summer collecti…", s: "about 21 hours ago", st: "Modern" },
{ t: "Build me a featured property…", s: "7 days ago", st: "Modern" },
{ t: "Luxury style. The Meridian su…", s: "7 days ago", st: "Luxury" },
{ t: "modern style. Aurea Hotels su…", s: "11 days ago", st: "Modern" },
{ t: "Create a 3-property showcase…", s: "11 days ago", st: "Modern" },
].map((s, i) => (
))}
{s.t}
{s.s} · {s.st}
{/* Header */}
)}
{phase >= 7 && (
<>
{/* Left: chat + prompt library */}
Untitled template
What email would you like to create?
Describe your vision and I’ll design a stunning HTML email template
= 1 ? `1.5px solid ${E_PINK}` : "1.5px solid #e2e8f0",
borderRadius: 14, padding: "16px 18px", background: "#fff",
boxShadow: phase >= 1 ? `0 0 0 4px ${E_PINK_TINT}` : "none",
transition: "all .25s", marginBottom: 30,
}}>
{(phase === 2 || phase === 3) && (
= 1 ? E_INK : "#94a3b8", minHeight: 44, lineHeight: 1.5 }}>
{phase >= 1 ? <>{typed}| : "Describe the email you\u2019d like to create\u2026"}
{[
{ ic: "paperclip", n: "Attach image", v: "" },
{ ic: "image", n: "Image gallery", v: "" },
{ ic: "building", n: "Property", v: "All properties" },
{ ic: "palette", n: "Brand settings", v: "Setup", warn: true },
{ ic: "type", n: "Writing tone", v: "Professional" },
{ ic: "globe", n: "Language", v: "English" },
{ ic: "sparkles", n: "Design style", v: "Modern" },
{ ic: "sliders", n: "Advanced design", v: "", hi: phase === 3 },
].map((it, i) => (
)}
PROMPT LIBRARY
{["All", "Promotional", "Pre-Stay", "Welcome", "In-Stay", "Post-Stay", "Re-engagement", "Newsletter"].map((c, i) => (
{c}
))}
{PROMPT_LIBRARY.map((p, i) => (
))}
{p.name}
{p.style}
Untitled template
Aurea Hotels
{phase >= 7 && (
{/* Composer at bottom */}
{typed}
)}
{phase >= 8 && (
GUESTMAKER
{phase === 8 && (
Building your template…
)}
{phase === 9 && (
I’ll create a bold summer promo email with a dramatic beachfront hero, a stat strip highlighting the 20% discount and June 1 deadline, and a three-card offer grid showcasing your beachfront resorts.
)}
Describe your email template…
↑
{phase < 9 ? (
{phase === 8 ? "Designing your template" : "Your template will appear here"}
{phase === 8 ? "Building responsive sections..." : "Describe your email in the chat"}
{phase === 8 && (
{/* Subject line bar */}
{/* Greeting */}
{/* Stat strip */}
{/* Property cards */}
{/* Testimonial */}
{/* Final CTA */}
{/* Footer */}
);
// ============== IMPORT FLOW ==============
const ImportFlow = () => {
const [ref, seen] = useInView(0.25);
const [count, setCount] = eUseState(0);
eUseEffect(() => {
if (!seen) return;
let n = 0;
const t = setInterval(() => {
n += 7;
if (n >= 200) { n = 200; clearInterval(t); }
setCount(n);
}, 50);
return () => clearInterval(t);
}, [seen]);
return (
Subject
Summer Early Bird: 20% Off Beachfront Stays, Book by June 1
{/* Pre-header */}
View this email in your browser · Aurea Hotels
{/* Hero */}
SUMMER EARLY BIRD · BOOK BY JUNE 1
AUREA HOTELS
Your Summer
Escape Awaits
Escape Awaits
Reserve before June 1 and save 20% on beachfront stays at three of our most coveted properties, July through September.
Dear {"{{first_name}}"},
Summer at Aurea is a feeling, barefoot mornings on the sand, long lunches under the palms, the salt-and-citrus quiet of an evening swim. This year, we’re offering an early bird gift to the guests who plan ahead: 20% off every beachfront stay booked before June 1, for travel between July and September.
{[
{ k: "20%", l: "EARLY BIRD\nDISCOUNT" },
{ k: "JUN 1", l: "BOOKING\nDEADLINE" },
{ k: "3", l: "BEACHFRONT\nRESORTS" },
{ k: "JUL–\nSEP", l: "TRAVEL\nPERIOD" },
].map((s) => (
))}
{/* Property cards header */}
{s.k}
{s.l}
FEATURED PROPERTIES
Three shorelines.
One unforgettable summer.
One unforgettable summer.
{[
{ name: "Azure Bay", loc: "MALDIVES · INDIAN OCEAN", img: HOTEL_IMG.beach, price: "from $480/night" },
{ name: "Costa Blanca", loc: "ALICANTE · SPAIN", img: HOTEL_IMG.villa, price: "from $320/night" },
{ name: "Coral Cove", loc: "BORA BORA · POLYNESIA", img: HOTEL_IMG.sunset, price: "from $620/night" },
].map((p) => (
))}
{/* Inclusions */}
{p.name}
{p.loc}
{p.price}
WHAT’S INCLUDED
{[
"Daily breakfast for two",
"Welcome cocktail on arrival",
"Sunset sailing experience",
"Late checkout until 4 PM",
"Resort credit ($75/stay)",
"Complimentary Wi-Fi & parking",
].map((t) => (
✓
{t}
))}
“The most thoughtful summer escape we’ve had in years, every detail felt designed for us.”
ELENA & MARCO · GUESTS, AZURE BAY
Don’t wait until summer.
Early bird rates expire June 1. After that, standard summer rates apply, and our best rooms book first.
AUREA HOTELS
123 Beachfront Avenue · Marina Bay · Reservations +34 900 000 000
Update preferences · Unsubscribe · View in browser
03 · MIGRATION-FRIENDLY IMPORT
200 templates,
15 minutes flat.
Switching CRMs is the moment most teams lose years of templates. We give every account a unique import inbox, forward your templates from your old provider and they land here, parsed, indexed, and ready to edit in the visual editor. No copy-paste, no rebuild.
{["Mailchimp", "Klaviyo", "Brevo", "HubSpot", "Customer.io", "ActiveCampaign"].map((p) => (
{p}
))}
{/* Drawer header */}
Import Templates
Import email templates from another CRM or platform by forwarding them via email.
{/* Import via Email card */}
Import via Email
Forward email templates to the address below. Each email will be automatically converted into an editable template in your library.
YOUR IMPORT ADDRESS
templates+ea8dffb299a4ab1b159eb420@inbound.guestmaker.ai
Forward HTML emails to this address.
How it works
{[
"Copy the import address above",
"Forward any HTML email template to that address",
"The template is automatically converted to editable format and added to your library as a draft",
"Open it in the visual editor to customize",
].map((s, i) => (
{i + 1}.
{s}
))}
Recent Imports ({count > 200 ? 5 : Math.min(5, Math.floor(count / 40))})
{[
{ subj: "Spa & Wellness Newsletter, March 2026", from: "Luxury Spa Resort", time: "Feb 24, 05:00 PM" },
{ subj: "Exclusive Loyalty Member Rewards, 50% Off", from: "Luxury Chain Rewards", time: "Feb 24, 04:58 PM" },
{ subj: "FW: Welcome to Mountain Lodge Spa Retreat", from: "Mountain Lodge", time: "Feb 24, 04:58 PM" },
{ subj: "Monthly Hotel Newsletter, February 2026", from: "Grand Hotel Newsletter", time: "Feb 24, 04:58 PM" },
{ subj: "Summer Beach Resort Promotion 2026", from: "Beach Resort Marketing", time: "Feb 24, 04:58 PM" },
].map((e, i) => {
const arrived = seen && count > i * 40;
return (
{e.subj}
From {e.from} · {e.time}
04 · CAMPAIGN WIZARD & AI AUDIT
Catch the mistake before send.
The wizard walks teams through basics, goal, audience, template, subject, settings, and schedule. The final step runs a 12-point AI audit, broken images, missing alt text, spam triggers, unverified domains, empty links, every issue surfaced before a single guest gets the email.
{["Basics", "Goal", "Audience", "Template", "Subject", "Settings", "Schedule", "Review"].map((s, i) => {
const active = i === 7;
const done = i < 7;
return (
{i < 7 && }
);
})}
{/* Two-pane: audit + email preview */}
{done ? : {i+1}}
{s}
{/* Audit panel */}
{AUDIT_CHECKS.map((g, gi) => {
let offset = 0;
for (let k = 0; k < gi; k++) offset += AUDIT_CHECKS[k].items.length;
return (
{/* Email preview */}
FINAL REVIEW · AI CAMPAIGN AUDIT
All checks passed.
{revealed}/{total}
VERIFIED
{g.items.map((it, ii) => {
const idx = offset + ii;
const shown = revealed > idx;
return (
);
})}
);
})}
{shown ?
{it}
Wed, May 13 2026 · 7:00 PM CET
12 deliverability checks · 8 content checks · subject scoring · spam-trigger detection
04 · CAMPAIGN WIZARD & AI AUDIT
Catch the mistake before send.
Seven guided steps walk teams from naming a campaign to a final 12-point audit, with realistic hotel segments, booking-protection rules, and deliverability checks built in.
{CW_STEPS.map((s, i) => {
const active = i === step;
const done = i < step;
return (
{i < CW_STEPS.length - 1 && }
);
})}
{/* Wizard body */}
{done ?
{s}
{stepLabel(step)}
{stepSubs[step]}
Campaign Name
Give your campaign a descriptive name (minimum 3 characters)
{[
{ n: "Promotional", t: "PROMOTIONAL", d: "Sales, discounts, special offers", ic: "tag", on: true },
{ n: "Re-engagement", t: "PROMOTIONAL", d: "Win back inactive guests", ic: "userPlus" },
{ n: "Newsletter", t: "NEWSLETTER", d: "Updates, news, curated content", ic: "bell" },
{ n: "Announcement", t: "ANNOUNCEMENT", d: "New features, service updates, important news", ic: "flag" },
{ n: "Pre-Arrival", t: "TRANSACTIONAL", d: "Welcome, check-in info, upsells", ic: "mail" },
].map((g, i) => (
)}
{step === 2 && (
{g.on &&
{g.n}
{g.t}
{g.d}
Select Audience Segment
6 of 20 segments
{CW_SEGMENTS.map((s, i) => {
const on = i === 0;
return (
{/* Booking Protection */}
{on &&
{s.n}
{s.c} contacts
{s.d}
{b.on &&
{b.n}
{b.d}
Subject Line
Black Friday at Aurea: Up to 35% Off Beachfront Stays
52 characters \u00b7 ideal length
Preview Text
Three nights of indulgence on the Mediterranean. Book before Nov 30.
{[
{ l: "Sender Name", v: "Aurea Hotels" },
{ l: "From Address", v: "stay@aureahotels.com" },
{ l: "Reply-To", v: "concierge@aureahotels.com" },
].map((f, i) => (
))}
)}
{step === 5 && (
{f.l}
{f.v}
{[
{ n: "Send Immediately", d: "Campaign will start sending as soon as you confirm", ic: "bolt" },
{ n: "Schedule for Later", d: "Choose a specific date and time to send", ic: "calendarPlus", on: true },
].map((o, i) => (
)}
{step === 6 && (
{o.n}
{o.d}
DATE
TIME
09:00 \u00b7 Europe/Madrid
{revealed}/{totalChecks}
{g.g}
{g.items.map((it, ii) => {
const idx = off + ii;
const on = revealed > idx;
return (
{on ?
{it}
Step {step + 1} of {CW_STEPS.length}
{/* Status bar */}
⋮
{/* Body */}
);
// ============== WHATSAPP TEMPLATE BUBBLE ==============
const WATemplateBubble = ({ header, body, footer, buttons, hasImage, time = "04:48 PM" }) => (
{time}
{/* Chat header */}
B
Business Name
online
{children}
{/* Composer */}
Type a message
{hasImage && (
)}
);
// ============== WHATSAPP INTRO ==============
const WhatsAppIntro = () => (
{header &&
{buttons && buttons.length > 0 && (
{header}
}
{body && {body}
}
{footer && {footer}
}
{time}
{buttons.map((b, i) => (
)}
0 ? "1px solid rgba(255,255,255,.08)" : "none", display: "inline-flex", alignItems: "center", gap: 6, justifyContent: "center", width: "100%" }}>
{b.icon === "link" && }
{b.icon === "phone" && }
{b.icon === "reply" && }
{b.label}
))}
WHATSAPP · OFFICIAL META TECH PROVIDER
Approved on the first try.
Sent at the right hour.
We audit every template against Meta’s policy before submission, auto-throttle broadcasts to stay inside the rate limits, and pause sends during each guest’s quiet hours, so your messages reach inboxes, not complaint queues.
{/* Trust strip */}
Official Meta Tech Provider
Auto-submission to Meta
AI compliance score before send
{/* Section header */}
Describe the message.
{/* Studio artifact */}
);
};
window.WAEditTemplateArtifact = WAEditTemplateArtifact;
/* ===== whatsapp_broadcast.jsx ===== */
// ============== WHATSAPP BROADCAST WIZARD ARTIFACT ==============
// 5 steps: Setup → Template → Content → Audience → Schedule
// Animated through a complete win-back broadcast.
const WAB_TYPING_NAME = "Win back · 365 days after booking";
const WAB_TEMPLATES = [
{ name: "returning_guest_exclusive_discount", body: "Dear {{1}}, we've missed you! As a valued returning guest, we're delighted to offer you an exclusive 25% discount on…", tags: ["MARKETING", "IMAGE", "1 btn"], cat: "marketing" },
{ name: "post_stay_thankyou_v3", body: "Hi {{1}}, thank you for staying with us at {{2}} – we hope you had a wonderful experience. Your feedback means the world…", tags: ["MARKETING", "2 vars", "2 btns"], cat: "marketing" },
{ name: "booking_confirmed_v3", body: "Hi {{1}}, your reservation at {{2}} is confirmed. Check-in: {{3}} Confirmation: {{4}} Need anything before your trip? Reply he…", tags: ["MARKETING", "4 vars", "2 btns"], cat: "marketing" },
{ name: "vip_arrival_welcome_notification", body: "Dear {{1}}, We are delighted to welcome you as our distinguished guest arriving on {{2}}. As a valued VIP, we hav…", tags: ["MARKETING", "2 btns"], cat: "marketing" },
{ name: "guest_experience_feedback_collection", body: "Hello {{1}}, Thank you for choosing to stay with us. We genuinely value your feedback and would love to hear abou…", tags: ["MARKETING", "IMAGE", "2 btns"], cat: "marketing" },
{ name: "post_check_in_ai_assistant_introduction", body: "Hello {{1}}! 🎉 Welcome to your room {{2}}. Your personal AI concierge is ready to serve you 24/7! Get instant help with:…", tags: ["MARKETING", "1 btn"], cat: "marketing" },
];
const WAB_FIELDS = [
{ group: "Guest Information", n: 7, fields: [{ icon: "user", name: "First Name", eg: "John" }] },
{ group: "Reservation Details", n: 22, fields: [
{ icon: "hash", name: "Confirmation Number", eg: "CONF-12345" },
{ icon: "cal", name: "Check-in Date", eg: "March 15, 2024" },
{ icon: "cal", name: "Check-out Date", eg: "March 18, 2024" },
]},
];
const WAB_VAR_MAPPINGS = [
{ var: "{{1}}", icon: "user", field: "First Name", preview: "John" },
{ var: "{{2}}", icon: "hash", field: "Confirmation Number", preview: "CONF-12345" },
{ var: "{{3}}", icon: "cal", field: "Check-in Date", preview: "March 15, 2024" },
{ var: "{{4}}", icon: "cal", field: "Check-out Date", preview: "March 18, 2024" },
];
const WABroadcastArtifact = () => {
const [ref, seen] = useInView(0.15);
// Phases:
// 0 idle, 1 Setup typing, 2 Template list, 3 Template selected,
// 4 Content (var mapping animating), 5 Audience (counter ticking),
// 6 Schedule (click Schedule + checklist green), 7 settle, loop
const [phase, setPhase] = eUseState(0);
const [loopKey, setLoopKey] = eUseState(0);
const [name, setName] = eUseState("");
const [varStep, setVarStep] = eUseState(0);
const [audCount, setAudCount] = eUseState(0);
const [checkStep, setCheckStep] = eUseState(0);
const [pickerOpen, setPickerOpen] = eUseState(false);
const [sendProg, setSendProg] = eUseState(0);
const [sendCount, setSendCount] = eUseState(0);
eUseEffect(() => {
if (!seen) return;
const t = [
[400, 1], // Setup typing
[3500, 2], // Template list visible
[5400, 3], // Template selected
[6800, 4], // Content / var mapping
[13800, 5], // Audience
[17500, 6], // Schedule
[22500, 7], // Sending overlay
[27500, 8], // Success
[33000, 0], // loop
];
const ts = t.map(([d, p]) => setTimeout(() => setPhase(p), d));
ts.push(setTimeout(() => setLoopKey(k => k + 1), t[t.length - 1][0] + 100));
return () => ts.forEach(clearTimeout);
}, [seen, loopKey]);
// Reset on loop
eUseEffect(() => {
if (phase === 0) {
setName(""); setVarStep(0); setAudCount(0); setCheckStep(0); setPickerOpen(false); setSendProg(0); setSendCount(0);
}
}, [phase]);
// Type name
eUseEffect(() => {
if (phase < 1) return;
let i = 0;
const id = setInterval(() => {
i++;
setName(WAB_TYPING_NAME.slice(0, i));
if (i >= WAB_TYPING_NAME.length) clearInterval(id);
}, 55);
return () => clearInterval(id);
}, [phase >= 1]);
// Variable mapping (4 vars filling in sequence with picker briefly open on var 2)
eUseEffect(() => {
if (phase !== 4) return;
const ids = [];
// var 1 (auto first name) immediate
ids.push(setTimeout(() => setVarStep(1), 400));
// open picker for var 2
ids.push(setTimeout(() => setPickerOpen(true), 1400));
// map var 2
ids.push(setTimeout(() => { setPickerOpen(false); setVarStep(2); }, 3000));
// var 3
ids.push(setTimeout(() => setVarStep(3), 4000));
// var 4
ids.push(setTimeout(() => setVarStep(4), 5000));
return () => ids.forEach(clearTimeout);
}, [phase]);
// Audience counter tick
eUseEffect(() => {
if (phase < 5) return;
const target = 28263;
let cur = 0;
const id = setInterval(() => {
cur += Math.ceil(target / 40);
if (cur >= target) { cur = target; clearInterval(id); }
setAudCount(cur);
}, 40);
return () => clearInterval(id);
}, [phase >= 5]);
// Checklist for Schedule step
eUseEffect(() => {
if (phase < 6) return;
const ids = Array.from({ length: 5 }, (_, i) => setTimeout(() => setCheckStep(i + 1), i * 320));
return () => ids.forEach(clearTimeout);
}, [phase >= 6]);
// Sending overlay progress + counter
eUseEffect(() => {
if (phase !== 7) return;
const target = 28263;
const startedAt = Date.now();
const dur = 4200;
const id = setInterval(() => {
const t = Math.min(1, (Date.now() - startedAt) / dur);
setSendProg(Math.round(t * 100));
setSendCount(Math.round(t * target));
if (t >= 1) clearInterval(id);
}, 60);
return () => clearInterval(id);
}, [phase]);
// Step number based on phase
const step = phase >= 6 ? 5 : phase >= 5 ? 4 : phase >= 4 ? 3 : phase >= 2 ? 2 : 1;
const stepNames = ["Setup", "Template", "Content", "Audience", "Schedule"];
const stepIcons = [
,
,
,
,
,
];
return (
);
};
window.WABroadcastArtifact = WABroadcastArtifact;
// ============== MAIN WHATSAPP SECTION ==============
const WhatsAppSection = () => (
<>
);
};
// ============================================================
// AI INSIGHTS PANEL
// ============================================================
const AGENT_REPORTS = [
{
id: "anomaly", title: "Anomaly Detection", tag: "Anomaly", tagBg: "#fee2e2", tagFg: "#b91c1c",
score: 94, status: "ok",
summary: "No statistically significant anomalies detected across 124 campaigns this week. One outlier flagged: Spring · 2-for-1 (open rate 2.3σ above baseline), confirmed organic, not a tracking error.",
details: [
{ k: "Campaigns scanned", v: "124" },
{ k: "Anomaly threshold", v: "2.0σ" },
{ k: "Outliers flagged", v: "1 (positive)" },
{ k: "False positives caught", v: "0" },
],
},
{
id: "attribution", title: "Revenue Attribution", tag: "Revenue", tagBg: "#dcfce7", tagFg: "#15803d",
score: 88, status: "ok",
summary: "Time-decay attribution model (7-day window) attributes €184,200 in confirmed bookings to email + WhatsApp this month. Email assists 68% of WhatsApp-closed conversions; WhatsApp assists 41% of email-closed.",
details: [
{ k: "Attribution model", v: "Time-decay · 7d window" },
{ k: "Attributed revenue", v: "€184,200" },
{ k: "Avg revenue / send", v: "€2.21" },
{ k: "Cross-channel assists", v: "54%" },
],
},
{
id: "performance", title: "Performance Analyzer", tag: "Engagement", tagBg: "#dcfce7", tagFg: "#15803d",
score: 86, status: "ok",
summary: "Open rate (47.8%) and CTOR (26.1%) are 14% above the hospitality benchmark. Best performing slot: Tuesday 10:00 local. Worst: Sunday evening, recommend pausing weekend evening drops.",
details: [
{ k: "Industry percentile", v: "Top 12%" },
{ k: "Best send window", v: "Tue 10:00 local" },
{ k: "Worst send window", v: "Sun 18:00–22:00" },
{ k: "Recommended action", v: "Pause Sun PM drops" },
],
},
{
id: "ab", title: "A/B Test Synthesizer", tag: "Pattern", tagBg: "#dbeafe", tagFg: "#1d4ed8",
score: 81, status: "ok",
summary: "3 of 4 active A/B tests have reached significance. Subject line variant B (\"Your suite is ready\") wins by +18.4% open rate (p < 0.01, n=4,200). Promoting B to control.",
details: [
{ k: "Tests active", v: "4" },
{ k: "Reached significance", v: "3" },
{ k: "Top winner uplift", v: "+18.4% opens" },
{ k: "Auto-promoted", v: "1" },
],
},
{
id: "template", title: "Template Effectiveness", tag: "Content", tagBg: "#ede9fe", tagFg: "#6d28d9",
score: 73, status: "warn",
summary: "\"Win-back · 365d\" template has degraded for 3 consecutive weeks (open rate −9.2%). Subject line freshness score: 0.42. Recommend rotating creative, model suggests 4 variants ready to test.",
details: [
{ k: "Templates analyzed", v: "38" },
{ k: "Degrading templates", v: "1" },
{ k: "Subject freshness", v: "0.42 / 1.00" },
{ k: "Variants ready", v: "4" },
],
},
];
const AgentRow = ({ report, t, expanded, onToggle }) => {
const scoreColor = report.score >= 85 ? "#16a34a" : report.score >= 75 ? "#f59e0b" : "#dc2626";
return (
AI TEMPLATE STUDIO
Describe the message.
We’ll handle the policy.
One sentence in: an audited, variable-mapped, Meta-ready template out. No more rewriting bodies to dodge category rejections.
{/* Sidebar: progress steps */}
);
})}
{/* Selections card (visible from step 3 onwards) */}
{phase >= 4 && (
)}
{/* Main */}
);
};
window.WAStudioArtifact = WAStudioArtifact;
/* ===== whatsapp_editor.jsx ===== */
// ============== WHATSAPP TEMPLATE EDITOR ARTIFACT ==============
// 3-step flow: Setup → Design → Review (with AI compliance audit)
// Animated through editing the body, switching the header type, adding
// buttons, then a final compliance audit that scores 100/100.
const WA_COMPLIANCE_CHECKS = [
"Template name follows Meta guidelines",
"Body text is within character limit",
"Variables are sequential",
"Body does not start with a variable",
"Body does not end with a variable",
"All variables have sample values",
"Buttons configured correctly",
"Template name is unique",
];
const WA_BODY_TEXT = `Dear {{1}},
Thank you for your booking. Your reservation has been successfully confirmed and we look forward to hosting you.
Reservation Number: {{2}}
Check-in: {{3}}
Check-out: {{4}}
Room Type: {{5}}
Total Amount: {{6}}
Cancellation Policy: Free cancellation is available until {{7}}. Cancellations made after this date will incur charges as per our policy.
Should you have any questions or require assistance with your stay, please feel free to reach out to us anytime.`;
const WA_SAMPLE_VALUES = [
{ var: "{{1}}", val: "John" },
{ var: "{{2}}", val: "UHK-987478" },
{ var: "{{3}}", val: "27th of August" },
{ var: "{{4}}", val: "2nd of September" },
{ var: "{{5}}", val: "Villa Sea View" },
{ var: "{{6}}", val: "3,567 EUR" },
{ var: "{{7}}", val: "25th of August" },
];
const WAEditTemplateArtifact = () => {
const [ref, seen] = useInView(0.15);
// Phases:
// 0 idle, 1 Setup briefly, 2 Design (typing body), 3 Add buttons,
// 4 Switch header type to Image, 5 Footer fills,
// 6 Review step (variables fill), 7 Compliance audit running,
// 8 Likely Approved revealed, 9 settle, then loop
const [phase, setPhase] = eUseState(0);
const [loopKey, setLoopKey] = eUseState(0);
const [body, setBody] = eUseState("");
const [footerText, setFooterText] = eUseState("");
const [headerText, setHeaderText] = eUseState("");
const [auditStep, setAuditStep] = eUseState(0);
const [filledVars, setFilledVars] = eUseState(0);
eUseEffect(() => {
if (!seen) return;
const t = [
[400, 1], // Setup briefly
[1700, 2], // Design - typing header + body
[5800, 3], // Buttons appear
[7400, 4], // Switch header to image
[8800, 5], // Footer fills
[10200, 6], // Move to Review (variables fill)
[13800, 7], // Compliance running
[17200, 8], // Likely Approved
[20500, 9], // Submitting to Meta (WABA submission overlay)
[24500, 10],// Approved success
[29500, 0], // loop
];
const ts = t.map(([d, p]) => setTimeout(() => setPhase(p), d));
ts.push(setTimeout(() => setLoopKey(k => k + 1), t[t.length - 1][0] + 100));
return () => ts.forEach(clearTimeout);
}, [seen, loopKey]);
// Reset on loop
eUseEffect(() => {
if (phase === 0) {
setBody(""); setFooterText(""); setHeaderText(""); setAuditStep(0); setFilledVars(0);
}
}, [phase]);
// Header text typing
eUseEffect(() => {
if (phase < 2) return;
const target = "Reservation Confirmed";
let i = 0;
const id = setInterval(() => {
i++;
setHeaderText(target.slice(0, i));
if (i >= target.length) clearInterval(id);
}, 60);
return () => clearInterval(id);
}, [phase >= 2]);
// Body typing
eUseEffect(() => {
if (phase < 2) return;
let i = 0;
const id = setInterval(() => {
i += 8;
setBody(WA_BODY_TEXT.slice(0, i));
if (i >= WA_BODY_TEXT.length) clearInterval(id);
}, 25);
return () => clearInterval(id);
}, [phase >= 2]);
// Footer text typing
eUseEffect(() => {
if (phase < 5) return;
const target = "We look forward to welcoming you";
let i = 0;
const id = setInterval(() => {
i++;
setFooterText(target.slice(0, i));
if (i >= target.length) clearInterval(id);
}, 50);
return () => clearInterval(id);
}, [phase >= 5]);
// Variables fill in Review
eUseEffect(() => {
if (phase < 6) return;
const ids = WA_SAMPLE_VALUES.map((_, i) => setTimeout(() => setFilledVars(i + 1), i * 280));
return () => ids.forEach(clearTimeout);
}, [phase >= 6]);
// Audit checks
eUseEffect(() => {
if (phase < 7) return;
const ids = WA_COMPLIANCE_CHECKS.map((_, i) => setTimeout(() => setAuditStep(i + 1), i * 320));
return () => ids.forEach(clearTimeout);
}, [phase >= 7]);
const stepNum = phase >= 6 ? 3 : phase >= 2 ? 2 : 1;
const stepLabels = ["Setup", "Design", "Review"];
// Header type, text until phase 4, image from phase 4 onwards
const headerIsImage = phase >= 4;
return (
PROGRESS
{["Use Case", "Prompt", "Options", "Generate", "Results"].map((label, i) => {
const idx = i + 1;
const sub = ["Choose template type", "Describe what you need", "Customize generation", "AI creates templates", "Review and select"][i];
const done = stepNum > idx;
const active = stepNum === idx;
return (
{done ?
{label}
{sub}
Your Selections
Use Case
Booking Confirmation
Category
UTILITY
Language
English
Variants
1
{/* Top: step number + label */}
{/* Progress bar */}
{/* === STEP CONTENT === */}
{/* Step 1: Use Case grid */}
{phase >= 1 && phase <= 2 && (
)}
{/* Step 2: Prompt */}
{phase === 3 && (
)}
{/* Step 3: Options (brief) */}
{phase === 4 && (
)}
{/* Step 4: Generating */}
{phase === 5 && (
{WA_GEN_CHECKS.map((c, i) => {
const done = genStep > i + 1;
const active = genStep === i + 1;
return (
)}
{/* Step 5: Results */}
{phase >= 6 && (
)}
Step {stepNum} of 5
{stepName}
What would you like to create?
Choose a use case to get started with AI-powered suggestions, or skip to write your own prompt.
{/* Search */}
Search use cases...
{/* Popular Templates */}
Popular Templates
{WA_USE_CASES.map((uc, i) => {
const isSelected = phase >= 2 && uc.name === "Booking Confirmation";
return (
);
})}
{/* Browse by Category */}
{uc.name}
{uc.desc}
Browse by Category
{WA_CATEGORIES.slice(0, 8).map((cat, i) => (
))}
{cat.name}
{cat.desc}
{cat.count} templates
Describe Your Template
Tell us what you want to create. Be specific about the purpose, tone, and any variables you need.
Your Prompt
{typed.length} characters
{typed}|
Enhance with AI
Example Prompts
{[
"Welcome message for new hotel guests with room num...",
"Booking confirmation with reservation details and ...",
"Special offer for returning guests with 20% discou...",
"Check-out reminder with express checkout option",
"Restaurant reservation confirmation with time and ...",
"Spa appointment reminder with preparation instruct...",
].map((p, i) => (
{p}
))}
Customize Generation
Fine-tune category, language, and variants before AI generation.
Category
{["Marketing", "Utility", "Authentication"].map((c, i) => {
const sel = c === "Utility";
return (
{c}
);
})}
Language
English
Number of Variants
{[1, 2, 3].map((n) => {
const sel = n === 1;
return (
{n}
);
})}
Tone
{["Friendly", "Professional", "Warm", "Concise"].map((t, i) => {
const sel = t === "Warm";
return (
{t}
);
})}
Smart suggestion: Utility templates have a 23% higher Meta approval rate than Marketing for confirmation messages.
C
Generating Your Templates
Our AI is crafting your template based on your specifications.
Overall Progress
{Math.round(genProgress)}%
genStep ? 0.4 : 1,
transition: "all .25s",
}}>
);
})}
{done ?
{c}
Tip: You can generate multiple variants to A/B test different approaches.
Your Generated Templates
Review your generated template and customize as needed.
Regenerate
{/* Phone preview */}
{/* Right: scores + details */}
)}
{/* Idle */}
{phase === 0 && (
Template Preview
UTILITY
{/* Scores */}
))}
{/* Template Details */}
Quality Scores
{[
{ label: "Compliance Score", val: 100, color: E_PINK, sub: "Likelihood of Meta approval" },
{ label: "Quality Score", val: 94, color: E_PINK, sub: "Overall template quality" },
].map((s, i) => (
{s.label}
{s.val}/100
= 6 ? s.val + "%" : "0%", height: "100%", background: s.color, transition: "width 1.4s cubic-bezier(.4,1,.4,1) " + (i * 0.2) + "s" }} />
{s.sub}
Template Details
{["Info", "Variables", "AI Notes"].map((t, i) => (
{t}
))}
Suggested Name
confirmed_reservation_summary
Language
en
Body Length
475 characters
Buttons
3
Save as Draft
Use This Template
AI Template Studio
Watch a one-line prompt become an audited, Meta-ready template, live.
Five guided steps. Approval-aware AI. Editable output that lands directly in your template library.
{/* Section header */}
See your approval odds
{/* Editor card */}
TEMPLATE EDITOR · COMPLIANCE AUDIT
See your approval odds
before Meta does.
Every header, body, and button is scored against Meta’s policy in real time. Fix what flags red, then auto-submit when the score hits 100.
{/* WABA Submission overlay */}
{phase === 9 && (
)}
{/* Approval success overlay */}
{phase === 10 && (
{/* Body */}
SUBMITTING TO META
Pushing to WhatsApp Business API…
Forwarding the audited template to Meta for review.
{[
{ l: "Validating template structure", d: 0 },
{ l: "Uploading to WABA endpoint", d: 900 },
{ l: "Awaiting Meta acknowledgment", d: 1900 },
].map((s, i) => (
{s.l}
))}
{/* Confetti dots */}
{Array.from({ length: 24 }).map((_, i) => (
))}
)}
{/* Header bar with stepper */}
APPROVED BY META
Your template is live on WhatsApp.
Meta accepted booking_confirmation_v3 in under 24 hours. Ready to broadcast.
STATUS
APPROVED
QUALITY
HIGH · 100/100
CATEGORY
UTILITY · EN
Use in broadcast
View in Library
WHATSAPP TEMPLATE
Edit Template
Review and submit your AI-generated template
{stepLabels.map((l, i) => {
const idx = i + 1;
const done = stepNum > idx;
const active = stepNum === idx;
return (
);
})}
{done ?
{i < 2 && }
Draft saved {phase >= 7 ? "1m ago" : "166h ago"}
{/* Left: form */}
= 6
? body.replace(/\{\{(\d+)\}\}/g, (_, n) => {
const idx = parseInt(n) - 1;
return filledVars > idx ? WA_SAMPLE_VALUES[idx].val : `{{${n}}}`;
})
: body
}
footer={footerText}
buttons={phase >= 3 ? [
{ icon: "reply", label: "View Full Details" },
{ icon: "phone", label: "Call Reception" },
{ icon: "link", label: "Manage Booking" },
] : null}
time="04:48 PM"
/>
{/* === DESIGN STEP === */}
{phase < 6 && (
{/* Buttons */}
))}
{phase >= 3 && (
)}
{/* === REVIEW STEP === */}
{phase >= 6 && (
)}
{/* Right: Live phone preview */}
Design Your Template
Build your message with the visual editor. The phone preview updates in real-time.
{/* Top meta strip */}
Utility
Standard
English (en)
Edit
{/* Header & Footer side-by-side */}
{/* Header */}
{/* Footer */}
{/* Message Body */}
Header (Optional)
OPTIONAL
{/* Type dropdown */}
{headerIsImage ? (
) : (
T
)}
{headerIsImage ? "Image" : "Text"}
- {headerIsImage ? "JPG or PNG image" : "Text header (60 chars max)"}
{!headerIsImage ? (
<>
{headerText}{phase < 4 && headerText.length < 22 ? "|" : ""}
{headerText.length}/60
) : (
You'll upload the actual image file in the review step.
)}
Footer (Optional)
60 CHARS MAX
Add unsubscribe text
{footerText}{phase === 5 && footerText.length < 32 ? "|" : ""}
{footerText.length}/60
Message Body
{/* Toolbar */}
Insert Variable
{["B", "I", "S", "", "≡", "1.", "“"].map((t, i) => (
{t}
))}
😀
{body}{phase >= 2 && body.length < WA_BODY_TEXT.length ? "|" : ""}
Variables:
{[1, 2, 3, 4, 5, 6, 7].map((n) => (
{`{{${n}}}`}
))}
{body.length}/1024
Buttons (Optional)
UP TO 3 BUTTONS
{phase >= 3 && [
{ icon: "msg", label: "View Full Details", color: WA_AI_PURPLE, soft: WA_AI_PURPLE_SOFT, n: 17 },
{ icon: "phone", label: "Call Reception", color: E_PINK, soft: E_PINK_SOFT, n: 14 },
{ icon: "link", label: "Manage Booking", color: "#2563eb", soft: "#dbeafe", n: 14 },
].map((b, i) => (
{b.icon === "msg" && }
{b.icon === "phone" && }
{b.icon === "link" && }
{b.label}
{b.n}/25
You'll add the URLs and phone numbers in the review step.
)}
Preview & Review
Provide sample values for your variables and review the compliance checklist before submitting.
{/* Sample Values */}
);
})}
{/* Right column: Button details + Compliance + Approval */}
{/* Submit bar */}
Sample Values
{WA_SAMPLE_VALUES.map((s, i) => {
const filled = filledVars > i;
return (
{s.var}
{filled ? s.val : ""}
{/* Button details */}
{/* Compliance checklist + Approval status */}
Button Details
Call Reception · Phone
+1234567890
Manage Booking · URL
https://yourhotel.com/manage/{`{{1}}`}
You can use {`{{1}}`} for dynamic URL parameters
{/* Compliance */}
);
})}
{/* Approval Status */}
Compliance Checklist
{WA_COMPLIANCE_CHECKS.map((c, i) => {
const done = auditStep > i;
return (
{done ? : }
{c}
= 8 ? E_PINK_SOFT : "#fff",
border: "1px solid " + (phase >= 8 ? E_PINK : "#f1f5f9"),
borderRadius: 10, padding: 12,
display: "flex", flexDirection: "column", justifyContent: "center",
transition: "all .4s",
}}>
Likely Approved
) : (
Approval Status
{phase >= 8 ? (
100
Your template meets all Meta guidelines and is ready for submission.
Running compliance checks…
)}
= 8 ? "linear-gradient(90deg, " + E_PINK_SOFT + ", #fff)" : "#f8fafc", border: "1px solid " + (phase >= 8 ? E_PINK : "#f1f5f9"), borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
{phase >= 8 ? <>Ready. Auto-submit to Meta with one click. Approval typically within 24h. : "Audit running…"}
= 8 ? WA_GREEN : "#cbd5e1", color: "#fff", borderRadius: 8, fontSize: 12.5, fontWeight: 700 }}>
Submit to Meta
{phase >= 6 ? "Preview with Sample Values" : "Live Preview"}
This is how your message will appear on WhatsApp. Variables will be replaced with actual values.
AI-audited before it ever reaches Meta · only high-probability templates get submitted.
{/* Section header */}
From idea to inbox in five steps.
{/* Wizard frame */}
BROADCAST WIZARD
From idea to inbox in five steps.
Without waking a single guest.
Pick a template, map the variables, target the segment. We’ll throttle to Meta’s rate limits, defer per-guest DND windows, and tag every send with UTM, before you hit confirm.
{/* Sending overlay */}
{phase === 7 && (
)}
{/* Success overlay */}
{phase === 8 && (
{/* Stepper */}
SENDING BROADCAST
Queueing your 28,263 messages…
Throttling to WhatsApp’s rate limits, respecting per-guest DND.
{sendCount.toLocaleString()} of 28,263 queued
{sendProg}%
RATE
250 msg/s
DND HELD
1,142
FAILED
0
{Array.from({ length: 26 }).map((_, i) => (
))}
)}
{/* Top: breadcrumb + title */}
BROADCAST DELIVERED
28,263 guests, one warm hello.
Win-back queued and sending now, 1,142 deferred until DND windows lift.
SENT
27,121
DEFERRED (DND)
1,142
FAILED
0
View live report
Schedule another
MESSAGING ›
BROADCASTS ›
NEW
Create Broadcast
Send a message to multiple contacts at once
{stepNames.map((n, i) => {
const idx = i + 1;
const done = step > idx;
const active = step === idx;
return (
);
})}
{/* === STEP CONTENT === */}
{done ? : stepIcons[i]}
{n}
{i < stepNames.length - 1 && }
{/* Step 1: Setup */}
{phase === 1 && (
)}
{/* Step 2: Template */}
{(phase === 2 || phase === 3) && (
)}
{/* Step 3: Content / variable mapping */}
{phase === 4 && (
{WAB_FIELDS.map((g, gi) => (
))}
)}
);
})}
{/* Right: Live phone preview */}
0 ? "John" : "{{1}}"}, your reservation at ${varStep > 1 ? "CONF-12345" : "{{2}}"} is confirmed.`,
``,
`Check-in: ${varStep > 2 ? "March 15, 2024" : "{{3}}"}`,
`Confirmation: ${varStep > 3 ? "March 18, 2024" : "{{4}}"}`,
``,
`Need anything before your trip? Reply here and our team will help with restaurant reservations, transfers, or any special arrangements.`,
].join("\n")
}
time="04:55 PM"
buttons={[{ icon: "reply", label: "Yes, I'd like that" }, { icon: "reply", label: "No thanks" }]}
/>
)}
{/* Step 4: Audience */}
{phase === 5 && (
)}
{/* Step 5: Schedule */}
{phase >= 6 && (
{/* Pre-launch Checklist */}
{/* Footer nav (visual only) */}
Setup Your Broadcast
Give your broadcast a name and select the language for your message.
Broadcast Name *
{name}{name.length < WAB_TYPING_NAME.length ? "|" : ""}
Description (optional)
Brief description of this broadcast…
Language *
English
Only templates matching this language will be available.
Hotel (optional)
All hotels
Select Template
Choose an approved template for your broadcast.
Search templates by name or content...
21 templates
Page 1 of 2
About Template Categories
Marketing templates are designed for promotional messages and are recommended for broadcasts. Utility templates are for transactional messages and may have lower engagement rates for bulk sends.
Marketing Templates
RECOMMENDED
11
{WAB_TEMPLATES.map((t, i) => {
const isSelected = phase === 3 && t.name === "booking_confirmed_v3";
return (
);
})}
{t.tags.includes("IMAGE") && (
)}
{t.name}
{t.body}
{t.tags.map((tag, j) => {
const isCat = tag === "MARKETING";
return (
{tag}
);
})}
Customize Content
Map variables to contact data and configure media for your broadcast.
Variable Mapping
Map each variable to a contact field for personalization
{WAB_VAR_MAPPINGS.map((m, i) => {
const filled = varStep > i;
const showPickerHere = pickerOpen && i === 1;
return (
{m.var}
○
{filled &&
{filled ? (
<>
{m.icon === "user" && }
{m.icon === "hash" && }
{m.icon === "cal" && }
{m.field}
) : (
Select field…
)}
Preview: {m.preview}
}
{/* Picker dropdown */}
{showPickerHere && (
Search fields...
{g.group}
{g.n} fields
{g.fields.map((f, fi) => {
const isHot = f.name === "Confirmation Number";
return (
{f.icon === "hash" && }
{f.icon === "cal" && }
);
})}
{f.name}
e.g., {f.eg}
Variables will be replaced with actual contact data when the broadcast is sent. Preview shows sample values.
Live Preview
Preview may differ from actual WhatsApp display
Select Audience
Choose which contacts will receive this broadcast.
{/* Big counter */}{audCount.toLocaleString()}
All opted-in contacts
Selection Method
{[
{ name: "All Contacts", sub: "28,263 opted-in", icon: "users" },
{ name: "Saved Segments", sub: "23 segments available", icon: "filter" },
{ name: "Custom Filter", sub: "Build conditions", icon: "settings" },
].map((m, i) => {
const sel = i === 0;
return (
);
})}
{m.icon === "users" && }
{m.icon === "filter" && }
{m.icon === "settings" && }
{m.name}
{m.sub}
Broadcasting to all contacts
This will send to all 28,263 opted-in contacts across all hotels. Contacts who have opted out will be automatically excluded.
This will send to all 28,263 opted-in contacts across all hotels. Contacts who have opted out will be automatically excluded.
UTM Parameters
FOR LINK TRACKING
{[
{ l: "Source", v: "whatsapp" },
{ l: "Medium", v: "broadcast" },
{ l: "Campaign", v: "win-back-365" },
{ l: "Content (optional)", v: "cta-button" },
].map((u, i) => (
))}
{u.l}
{u.v}
Schedule & Review
Choose when to send your broadcast and review all settings.
Send Test
When to send
{[
{ name: "Send Now", sub: "Start sending immediately", icon: "send" },
{ name: "Schedule", sub: "Send at a specific time", icon: "clock" },
].map((m, i) => {
const sel = i === 1;
return (
);
})}
{m.icon === "send" && }
{m.icon === "clock" && }
{m.name}
{m.sub}
Select date and time
May 20th, 2026
11:00
Respect Do Not Disturb
Delay messages to contacts in their DND hours
Pre-launch Checklist
{checkStep >= 5 ? "ALL CLEAR" : "Reviewing…"}
{[
{ name: "Broadcast name", sub: "Name provided" },
{ name: "Language selected", sub: "Language: en" },
{ name: "Template selected", sub: "booking_confirmed_v3" },
{ name: "Variable values", sub: "4 variable(s) filled" },
{ name: "Audience selected", sub: "28,263 recipients" },
].map((c, i) => {
const done = checkStep > i;
return (
{/* Final action */}
{checkStep >= 5 && (
{done ? (
) : (
)}
);
})}
{c.name}
{c.sub}
Scheduled for May 20, 2026 · 11:00. Broadcast will queue 28,263 sends with DND awareness.
WhatsApp Broadcast Wizard
Watch a 28,263-send win-back assemble itself: DND-aware, rate-throttled, ready in minutes.
Exit
Save Draft
{step > 1 &&
Previous
}
{step === 5 ? "Confirm" : "Next"}
Pre-launch checklist · DND-aware send · UTM-tracked · opt-out compliant
{label}
{value}
{positive ? "↑" : "↓"} {delta}
{subtle || "vs last 30d"}
{sparkData && (
{centerLabel}
{centerSub}
{items.map((it, i) => (
))}
);
};
// ============================================================
// Recent list (Recent calls / sends)
// ============================================================
const RecentList = ({ items, t }) => (
{it.label}
{it.value.toLocaleString()}{it.suffix || ""}
{items.map((it, i) => (
);
// ============================================================
// Stacked horizontal bar (for engagement breakdown by hour-band)
// ============================================================
const StackedBars = ({ rows, segments, t, height = 220 }) => {
const w = 700, h = height;
const padL = 40, padR = 12, padT = 8, padB = 22;
const barH = (h - padT - padB) / rows.length - 4;
const max = Math.max(...rows.map(r => r.values.reduce((s, v) => s + v, 0)));
return (
);
};
// ============================================================
// Heatmap (best send time)
// ============================================================
const Heatmap = ({ matrix, days, hours, color, t }) => {
const cell = 18, gap = 2;
const w = hours.length * (cell + gap) + 30;
const h = days.length * (cell + gap) + 22;
const max = Math.max(...matrix.flat());
return (
);
};
// ============================================================
// Funnel
// ============================================================
const Funnel = ({ steps, color, t }) => {
const max = steps[0].value;
return (
{it.name}
{it.time}
{it.tag}
))}
{steps.map((s, i) => {
const pct = (s.value / max) * 100;
const dropoff = i > 0 ? ((steps[i - 1].value - s.value) / steps[i - 1].value) * 100 : 0;
return (
);
})}
);
};
// ============================================================
// Card wrapper
// ============================================================
const Card = ({ title, subtitle, right, children, t, padding = "18px 20px", style }) => (
{s.label}
{((s.value / max) * 100).toFixed(1)}%
{s.value.toLocaleString()}
{i > 0 && (
−{dropoff.toFixed(1)}% drop
)}
{(title || right) && (
)}
);
window.ANALYTICS_THEMES = ANALYTICS_THEMES;
window.CHANNEL_ACCENTS = CHANNEL_ACCENTS;
Object.assign(window, { KpiCard, Sparkline, AreaChart, Donut, ProgressList, RecentList, StackedBars, Heatmap, Funnel, Card });
/* ===== analytics_panels.jsx ===== */
// Per-channel content panels for the analytics dashboard.
// ============================================================
// SEED DATA
// ============================================================
const EMAIL_DATA = {
kpis: [
{ label: "Sends · 30d", value: "184,290", delta: "12.4%", deltaDir: "up", spark: [12,14,13,16,15,18,17,20,19,22,21,24,23,26,28] },
{ label: "Open rate", value: "47.8%", delta: "5.2%", deltaDir: "up", spark: [38,40,39,42,41,43,44,46,45,47,46,48,47,48,47.8] },
{ label: "Click-to-open", value: "26.1%", delta: "3.8%", deltaDir: "up", spark: [20,22,21,23,22,24,23,25,24,26,25,26,26,26,26.1] },
{ label: "Conversion rate", value: "4.62%", delta: "0.9%", deltaDir: "up", spark: [3.2,3.4,3.3,3.6,3.7,3.8,4.0,4.1,4.2,4.3,4.4,4.5,4.6,4.6,4.62] },
],
volume: {
data: [320,280,210,190,170,180,260,420,640,820,940,1020,1080,1120,1180,1260,1340,1420,1480,1520,1480,1380,1240,980],
labels: Array.from({length:24}, (_,i) => String(i).padStart(2,"0")),
total: "27,884",
},
donut: {
center: "47.8%",
sub: "open rate",
segments: [
{ label: "Opened", value: 88090, color: "#ED4D86" },
{ label: "Clicked", value: 23010, color: "#be185d" },
{ label: "Converted", value: 8470, color: "#831843" },
{ label: "Unopened", value: 64720, color: "#fbcfe8" },
],
},
topItems: [
{ label: "Pre-stay · Welcome", value: 28400 },
{ label: "Confirmation receipt", value: 22700 },
{ label: "Day-of arrival", value: 18200 },
{ label: "Post-stay · Review request", value: 14600 },
{ label: "Win-back · 365 days", value: 9800 },
{ label: "Restaurant offer · Members", value: 6200 },
],
recent: [
{ name: "Spring · 2-for-1 dinner", time: "11:42 AM", tag: "OPEN 52.1%", tagBg: "#ffe5ed", tagFg: "#be185d", dot: "#22c55e" },
{ name: "Pre-stay welcome (FR-FR)", time: "10:30 AM", tag: "OPEN 49.3%", tagBg: "#ffe5ed", tagFg: "#be185d", dot: "#22c55e" },
{ name: "Suite upgrade · Loyalty", time: "09:14 AM", tag: "CLICK 18%", tagBg: "#fef3c7", tagFg: "#a16207", dot: "#22c55e" },
{ name: "Booking confirmation", time: "08:58 AM", tag: "DELIVERED", tagBg: "#dcfce7", tagFg: "#15803d", dot: "#22c55e" },
{ name: "Concierge follow-up", time: "08:42 AM", tag: "REPLIED", tagBg: "#dbeafe", tagFg: "#1d4ed8", dot: "#22c55e" },
{ name: "Win-back · 365d cohort", time: "08:30 AM", tag: "SCHEDULED", tagBg: "#f1f5f9", tagFg: "#475569", dot: "#94a3b8" },
],
};
const WHATSAPP_DATA = {
kpis: [
{ label: "Messages sent", value: "62,180", delta: "18.6%", deltaDir: "up", spark: [22,24,28,32,35,38,42,46,49,52,55,58,60,61,62] },
{ label: "Delivery rate", value: "99.2%", delta: "0.3%", deltaDir: "up", spark: [98.8,98.9,99,98.9,99.1,99,99.1,99.2,99.1,99.2,99.2,99.2,99.2,99.2,99.2] },
{ label: "Read rate", value: "84.6%", delta: "4.1%", deltaDir: "up", spark: [76,77,78,79,80,81,82,83,82,83,84,84,84,84,84.6] },
{ label: "Reply rate", value: "21.4%", delta: "2.8%", deltaDir: "up", spark: [14,15,16,16,17,17,18,19,19,20,20,21,21,21,21.4] },
],
volume: {
data: [80,60,40,30,28,35,90,180,280,360,420,470,510,540,560,580,610,640,680,710,690,640,520,360],
labels: Array.from({length:24}, (_,i) => String(i).padStart(2,"0")),
total: "8,760",
},
donut: {
center: "84.6%",
sub: "read rate",
segments: [
{ label: "Read", value: 52600, color: "#ED4D86" },
{ label: "Replied", value: 13310, color: "#be185d" },
{ label: "Delivered", value: 9580, color: "#fbcfe8" },
{ label: "Failed", value: 690, color: "#ffe5ed" },
],
},
topItems: [
{ label: "Booking confirmation · ES", value: 18400 },
{ label: "Check-in instructions", value: 14200 },
{ label: "Welcome · concierge", value: 11600 },
{ label: "Spa upsell · 24h pre-stay", value: 8200 },
{ label: "Late checkout offer", value: 5400 },
{ label: "NPS · post-stay", value: 4100 },
],
recent: [
{ name: "Antoni Joan", time: "8:35 PM", tag: "REPLIED", tagBg: "#ffe5ed", tagFg: "#be185d", dot: "#ED4D86" },
{ name: "Daniel Antich", time: "8:30 PM", tag: "READ", tagBg: "#fbcfe8", tagFg: "#9d174d", dot: "#ED4D86" },
{ name: "Maria González", time: "4:18 PM", tag: "BOOKED", tagBg: "#ffe5ed", tagFg: "#be185d", dot: "#ED4D86" },
{ name: "Lukas Müller", time: "10:30 AM", tag: "READ", tagBg: "#fbcfe8", tagFg: "#9d174d", dot: "#ED4D86" },
{ name: "Sofia Rossi", time: "9:44 AM", tag: "DELIVERED", tagBg: "#f1f5f9", tagFg: "#475569", dot: "#94a3b8" },
{ name: "Ben Carter", time: "8:44 AM", tag: "REPLIED", tagBg: "#ffe5ed", tagFg: "#be185d", dot: "#ED4D86" },
],
};
// ============================================================
// CHANNEL PANEL, used for both Email + WhatsApp
// ============================================================
const ChannelPanel = ({ channel, t }) => {
const data = channel === "email" ? EMAIL_DATA : WHATSAPP_DATA;
const accent = channel === "email" ? CHANNEL_ACCENTS.email : CHANNEL_ACCENTS.whatsapp;
const channelLabel = channel === "email" ? "Email" : "WhatsApp";
return (
{title &&
{right && {title}
}
{subtitle && {subtitle}
}
{right}
}
{children}
{/* KPI ROW */}
{data.volume.total} TOTAL }>
{/* BOTTOM ROW: top items + recent */}
{data.kpis.map((k, i) => (
{/* MAIN ROW: volume + donut */}
{data.donut.segments.map((s, i) => (
{s.label}
{s.value.toLocaleString()}
))}
{report.title}
{report.tag}
{report.score}%
{report.summary}
{report.details.map((d, i) => (
{d.k}
{d.v}
))}
{/* HEADER STRIP, Excellent badge + KPIs */}
{/* KPIs from this channel, AI summarized */}
{/* Agents succeeded strip */}
{AGENT_REPORTS.map((r) => (
setExpanded(expanded === r.id ? null : r.id)} />
))}
{/* Cross-Campaign Learnings */}
);
};
window.ChannelPanel = ChannelPanel;
window.AiInsightsPanel = AiInsightsPanel;
// ============================================================
// CAMPAIGN DETAIL PANEL, single campaign view
// ============================================================
const EMAIL_CAMPAIGN = {
name: "Spring · 2-for-1 dinner · Members",
status: "Sent",
subject: "Two seats at Sàba, on us, this Sunday.",
audience: "Loyalty Tier 2+ · ES, FR, IT",
sentAt: "May 8, 2026 · 10:30 AM",
recipients: 12480,
kpis: [
{ label: "Open rate", value: "52.1%", delta: "8.4%", spark: [42,44,43,46,47,49,48,50,51,52,52,52,52,52,52.1] },
{ label: "Click rate", value: "18.6%", delta: "4.2%", spark: [10,11,12,12,13,14,14,15,16,17,17,18,18,18,18.6] },
{ label: "Bounce rate", value: "0.4%", delta: "0.2%", deltaDir: "down", spark: [.8,.7,.7,.6,.6,.5,.5,.5,.5,.4,.4,.4,.4,.4,.4] },
{ label: "Conversion rate", value: "6.84%", delta: "1.6%", spark: [3.8,4.2,4.5,4.8,5.1,5.4,5.7,5.9,6.1,6.3,6.5,6.6,6.7,6.8,6.84] },
],
timeline: [820,1240,1680,1920,2140,2080,1860,1620,1380,1180,980,840,720,640,580,520,480,440,420,400,380,360,340,320],
funnel: [
{ label: "Delivered", value: 12430 },
{ label: "Opened", value: 6480 },
{ label: "Clicked", value: 2320 },
{ label: "Booked", value: 854 },
],
links: [
{ label: "Reserve a table, primary CTA", value: 1820 },
{ label: "View menu", value: 380 },
{ label: "Wine pairing add-on", value: 92 },
{ label: "Unsubscribe", value: 28 },
],
};
const WA_CAMPAIGN = {
name: "Check-in · Suite 412 · Müller",
status: "Delivered",
subject: "Hola Lukas, your check-in pack 🔑",
audience: "Arrivals · May 10–14 · Mallorca",
sentAt: "May 8, 2026 · 1:40 PM",
recipients: 1840,
kpis: [
{ label: "Delivery rate", value: "99.8%", delta: "0.4%", spark: [99,99.2,99.3,99.4,99.5,99.6,99.6,99.7,99.7,99.8,99.8,99.8,99.8,99.8,99.8] },
{ label: "Read rate", value: "94.2%", delta: "6.8%", spark: [82,84,85,87,88,89,90,91,92,93,93,94,94,94,94.2] },
{ label: "Reply rate", value: "32.6%", delta: "5.4%", spark: [22,24,25,26,27,28,29,30,30,31,31,32,32,32,32.6] },
{ label: "Action rate", value: "11.3%", delta: "2.1%", spark: [6,7,7,8,8,9,9,10,10,10,11,11,11,11,11.3] },
],
timeline: [120,180,240,310,380,420,460,500,540,560,580,560,520,460,400,340,280,220,180,150,130,110,90,70],
funnel: [
{ label: "Delivered", value: 1836 },
{ label: "Read", value: 1730 },
{ label: "Replied", value: 599 },
{ label: "Action", value: 208 },
],
links: [
{ label: "Open digital key", value: 412 },
{ label: "Add to Apple Wallet", value: 188 },
{ label: "Concierge chat", value: 96 },
{ label: "View hotel map", value: 64 },
],
};
const CampaignDetailPanel = ({ channel, t }) => {
const cd = channel === "email" ? EMAIL_CAMPAIGN : WA_CAMPAIGN;
const accent = channel === "email" ? CHANNEL_ACCENTS.email : CHANNEL_ACCENTS.whatsapp;
return (
EXCELLENT
Analyzed 2h ago · {channelLabel} channel
5 agents · 12 reports · seeded by 184k sends
{data.kpis.map((k, i) => (
))}
{k.label}
{k.value}
↑ {k.delta}
✓
5/5 agents succeeded
· 22s
Avg confidence 84.4%
{/* Agent Analysis Reports */}
{[
{ title: "Subject lines with first-name token", uplift: "+22.4%", metric: "open rate", note: "Across 38 campaigns · n=82,400" },
{ title: "Tuesday 10:00 local send window", uplift: "+14.1%", metric: "engagement", note: "Strongest across all locales" },
{ title: "≤3 CTAs per email", uplift: "+8.7%", metric: "click-through", note: "Falls off sharply past 4" },
].map((c, i) => (
))}
{c.title}
{c.uplift}
{c.metric}
{c.note}
{/* HEADER */}
{/* KPIs */}
String(i)+"h")} color={accent.primary} t={t} height={210} />
{/* Links + Recipients */}
);
};
window.CampaignDetailPanel = CampaignDetailPanel;
/* ===== analytics.jsx ===== */
// Campaign analytics section, section header + dashboard frame.
// Tabs: Email · WhatsApp · AI Insights. Light/dark via Tweaks.
const { useState: useAnalyticsState, useEffect: useAnalyticsEffect } = React;
// --- Channel tab icons ---
const EmailGlyph = ({ size = 14, color }) => (
);
const WhatsappGlyph = ({ size = 14, color }) => (
);
const AiGlyph = ({ size = 14, color }) => (
);
const SunGlyph = ({ size = 14, color }) => (
);
const MoonGlyph = ({ size = 14, color }) => (
);
const ANALYTICS_TABS = [
{ id: "email", label: "Email", icon: EmailGlyph, accentKey: "email" },
{ id: "whatsapp", label: "WhatsApp", icon: WhatsappGlyph, accentKey: "whatsapp" },
{ id: "ai", label: "AI Insights", icon: AiGlyph, accentKey: "ai" },
];
const RANGES = ["7d", "30d", "90d", "YTD"];
const SUBTABS = {
email: [{ id: "all", label: "All campaigns" }, { id: "one", label: "Single campaign" }],
whatsapp: [{ id: "all", label: "All campaigns" }, { id: "one", label: "Single campaign" }],
ai: [{ id: "email", label: "Email" }, { id: "whatsapp", label: "WhatsApp" }],
};
const AnalyticsDashboard = ({ theme = "light" }) => {
const [tab, setTab] = useAnalyticsState("email");
const [sub, setSub] = useAnalyticsState({ email: "all", whatsapp: "all", ai: "email" });
const [range, setRange] = useAnalyticsState("30d");
const t = ANALYTICS_THEMES[theme];
const accent = CHANNEL_ACCENTS[ANALYTICS_TABS.find(x => x.id === tab).accentKey];
const setSubFor = (key, val) => setSub(s => ({ ...s, [key]: val }));
// Subtle fade when tab changes
const [tick, setTick] = useAnalyticsState(0);
useAnalyticsEffect(() => { setTick(x => x + 1); }, [tab, sub]);
return (
{cd.status.toUpperCase()}
{channel === "email" ? "EMAIL" : "WHATSAPP"}
{cd.name}
Subject · {cd.subject}
Audience · {cd.audience}
Sent · {cd.sentAt}
Recipients · {cd.recipients.toLocaleString()}
{cd.kpis.map((k, i) => (
{/* Timeline + Funnel */}
{/* TAB BAR */}
);
};
// ============================================================
// SECTION (with header + theme toggle)
// ============================================================
const ANALYTICS_DEFAULTS = /*EDITMODE-BEGIN-ANALYTICS*/{
"analyticsTheme": "dark"
}/*EDITMODE-END-ANALYTICS*/;
const AnalyticsSection = () => {
const [theme, setTheme] = useAnalyticsState(ANALYTICS_DEFAULTS.analyticsTheme === "dark" ? "dark" : "light");
const isDark = theme === "dark";
const sectionBg = isDark
? "#0a0c10"
: "linear-gradient(180deg, #fef9f4 0%, #fdf2f8 100%)";
const headlineColor = isDark ? "#f1f5f9" : "#0f172a";
const accentColor = "#ED4D86";
const subColor = isDark ? "#94a3b8" : "#475569";
return (
{/* Channel tabs */}
{/* SUB-TAB STRIP */}
{ANALYTICS_TABS.map((tt) => {
const active = tab === tt.id;
const ttAccent = CHANNEL_ACCENTS[tt.accentKey];
const Icon = tt.icon;
return (
);
})}
{/* Range + meta */}
{RANGES.map((r) => {
const active = range === r;
return (
);
})}
Live
{SUBTABS[tab].map(st => {
const active = sub[tab] === st.id;
return (
);
})}
{/* CONTENT */}
{tab === "email" && sub.email === "all" &&
{/* FOOTER */}
snapshot · {range}
sync · 4s ago
184,290 sends · 14 properties
{/* Eyebrow */}
CAMPAIGN ANALYTICS
{/* Headline */}
Every send, measured, attributed, lifted.
Volume, deliverability, attribution and reply intent across every email and WhatsApp campaign, with AI agents flagging anomalies, attributing revenue and synthesising A/B tests in the background.
{/* Dashboard */}
Click any tab to switch channel · agent rows expand for full report
{/* Breadcrumb */}
Every guest, a story.
{/* Subhead */}
Home /
Platform /
Journeys & Campaigns
{/* Eyebrow */}
Journeys & Campaigns
{/* Headline */}
Every guest, a story.
Every story, a journey.
{/* Subhead */}
Omnichannel journeys built for hospitality. WhatsApp, email and SMS orchestrated with hotel-native triggers, AI concierge handoffs and conditional logic that knows the difference between a check-in and a no-show.
{/* CTAs */} {/* Pill chip */}
+
Win-back · 365 days after booking · live in canvas below
Click any node to configure. Every step is interactive.