Engage Demo — textový scénář

Změny proti verzi 1:

1. Insights a Overlap jsou samostatné kroky (uživatel mezi taby reálně překlikává — chceme to v tour ukázat, ne to vyprávět).
2. Channels jsou rozdělené na dva kroky: přehled kanálů + konkrétní email editor (existující view email-campaign).
3. Activation panel (send/schedule/cadence) jsme zrušili jako samostatný krok — zmíníme ho jednou větou v rámci Audience Conditions a v Channels. Tour má tempo, ne kompletní školení.
4. Sample profiles jsou internacionalizované (Emma Schneider, James Chen, Sofia Rossi, Diego Hernández, Aisha Khan, Lukas Müller, Olivia Brown). VIP showcase = Emma Schneider (Berlin).

Cíl tour: Provést uživatele celým Engage od profilů přes audience, kampaně, journey, content a reporting. Žádný setup — všechno už je „nakonfigurované“, uživatel jenom prochází a vidí, jak věci do sebe zapadají.

Délka: 12 kroků (intro + 10 obsahových + outro). Cca 4–5 minut.

Velký rozdíl proti Pipes demu: Pipes vede jednou pipelinou end-to-end. Engage demo je „okruh po městě“ — ukáže každou hlavní místnost, ale nedrží napříč kroky sdílenou entitu. Banner, spotlight a tooltipy zůstávají stejné jako v Pipes.

Persona & framing

„As a CRM lead, I need to know who my customers really are, group them by behavior I actually care about, and run personalized campaigns and journeys across email, SMS, push and web — from one place, without re-learning the tooling every quarter.“

Tahle věta drží tour pohromadě a otevírá ji jako welcome tooltip (Step 1).

Výchozí stav workspace

• Sidebar (floating glass card, 256 × full-height, margin 24 px): Dashboard / Goals / Profiles (Profile Search, Profile Detail, Attributes) / Audiences (Realtime Audiences, DWH Audiences) / Reporting / Journeys / Content (Catalogs, Asset Library, Surveys) / Channels.
• Default view po skipnutí intra: Dashboard / Operator.
• Engage workspace na switcheru dole v sidebaru je aktivní; Pipes je jen link.
• Sample data napříč mockupem:
  • VIP · Active audience = 8 412 profiles
  • Showcase profile = Emma Schneider, Berlin, LTV €4 218, activity score 92
  • Showcase journey = Post-Purchase Nurture (3 nody, 1 blocking issue)
  • Showcase email campaign = Spring Sale — VIP teaser
• Všechna data jsou ilustrativní.

Tour mechanika (sdílená s Pipes demem)

• Stálý banner nahoře: titulek kroku, Prev a Next šipky, indikátor 3 / 12, exit ✕ ven na /.
• Spotlight + tooltip nad aktivním hotspotem; klick mimo hotspot = jemné zatřesení + dim overlay.
• Klick na Prev / Next ignoruje spotlight.
• Intro tooltip je skipnutelný křížkem nebo Next.
• Sidebar nav-itemy se nemění (nejsou zaglowené coral pillem) — produkt demo, ne onboarding. Highlightem řídí jen tooltip + spotlight hotspot.
• Pokud uživatel kdykoliv zavře banner / unloading, maketa je plně proklikatelná a zachovává poslední view.

Step 1 — Intro (skippable welcome tooltip)

Timing v originále: 0:00–0:14 Hotspot: žádný. Maketa pod tooltipem rozostřená (filter: blur(4px) + dim overlay).

Tooltip (centered card, ne fullscreen):

Meet Meiro Engage.

Meiro Engage is a tool for customer engagement through personalized communication. To personalize, first you need to know who you’re talking to — so we start with profiles.

This tour walks through Engage in 10 steps: Profiles → Audiences (insights, definition, overlap) → Campaigns → Journeys → Content → Reporting.

[Start tour] [✕ skip]

Akce:

• Start tour → blur zmizí, scénář pokračuje Step 2 (přepne view na profile-detail).
• ✕ skip → blur zmizí, tour zavřený, banner zmizí, maketa plně proklikatelná.

Step 2 — Profiles: who you’re actually talking to

Timing v originále: 0:14–1:05 Cílový view: profile-detail. Hotspot: .profile-card (vlevo nahoře — Emma Schneider, identifikační záhlaví + .kv-grid s atributy).

Tooltip A (anchored vpravo od profile-card, šipka doleva):

A profile is a single customer described by attributes.

Email, phone, last seen, LTV, loyalty tier, predicted churn — each one traces back to the source event that produced it.

Attributes are configured in Meiro Pipes. Here in Engage we work with the complete, stitched profile.

Akce: Next → Step 3.

Pozn. pro Claude Code:

• Žádné nové komponenty není potřeba.
• Při přepnutí view scrollnout .main na top.

Step 3 — Audiences: group profiles by what matters

Timing v originále: 1:05–1:30 Cílový view: audiences (Realtime Audiences list). Hotspot: první řádek listu — VIP · Active (.row-item:first-child).

Tooltip A (anchored vpravo od row, šipka doleva):

Audiences are groups of profiles that share something.

High customer value, lifetime > €1 500, active in last 30 days — every audience is a saved query that keeps re-evaluating in the background.

Audiences power journeys, channel sends, and reverse-ETL syncs.

Akce: Next → tour klikne za uživatele do audience-detail (Insights tab), Step 4.

Step 4 — Audience insights: what’s distinctive about this group

Timing v originále: 2:50–3:25 Cílový view: audience-detail (Insights tab default). Hotspot A: .insights-callouts (tři tiles — Top signal / Email readiness / Data gap).

Tooltip A (anchored nad callouts, šipka dolů):

Insights show what makes this audience distinctive.

Top signal: high-value Actions are 431× more common here than the baseline. Email readiness: 100% reachable. Data gaps: where the audience is sparse on attributes you’d want to use.

They re-calculate whenever the audience refreshes.

Hotspot B (sekundární po Next v rámci stepu, anchored u .diff-list):

Top differentiators rank attributes by their lift.

Bar comparison — the audience’s rate vs. the whole-population baseline. Great for spotting which behaviors actually define the group, beyond the rules you wrote.

Akce: Next → Step 5.

Pozn. pro Claude Code:

• Tooltip B je v rámci stepu 4 (interní Next v tooltipu, ne globální banner). Banner stále 4 / 12.
• Pokud zkracujeme, sloučit do jednoho tooltipu (Tooltip A) a říct rovnou „Insights + top differentiators show what’s distinctive…”.

Step 5 — Audience conditions: include + exclude rules

Timing v originále: 1:30–2:30 (definition + activation zmíněná v jedné větě) Cílový view: audience-conditions (přepnutí přes klick na Conditions tab). Hotspot: .cond-group--include (oranžově orámovaný blok s rule rows).

Tooltip A (anchored vpravo od include block, šipka doleva):

Every audience is two halves: who to include, who to exclude.

Combine attribute filters (LTV, last_seen, channel reachable) with behavioural conditions (events that happened, didn’t happen, count over a window). The size estimate refreshes as you save.

Activation lives in the Profile Destinations / Profile Sync tabs — send a one-off export, or schedule the audience to sync hourly into a decision engine, daily into Klaviyo, realtime into Meta.

Akce: Next → Step 6.

Pozn. pro Claude Code:

• Před showem tooltipu programaticky přepnout na Conditions tab (CSS class .is-active na příslušný .ad-tab). Tour engine to udělá zároveň s view-switch.

Step 6 — Audience overlap: how this group relates to the others

Timing v originále: 2:30–3:08 Cílový view: audience-overlap (přepnutí přes Overlap tab). Hotspot: první .overlap-tile — Email reachable card s Venn diagramem.

Tooltip A (anchored vpravo od první tile, šipka doleva):

Overlap shows how this audience relates to every other.

Each card breaks down the population: only this audience, only the compared one, and the intersection — with a Venn visual so the relative sizes are immediately obvious.

VIP · Active strongly overlaps with Email reachable (92 %), barely overlaps with High churn risk (1.2 %) — exactly the kind of insight you’d otherwise rebuild in a SQL query.

Akce: Next → Step 7.

Step 7 — Channels: every native medium in one place

Timing v originále: 3:25–4:23 Cílový view: channels. Hotspot: první channel card — Email · Klaviyo (.channel-card:first-child).

Tooltip A (anchored vpravo od první card, šipka doleva):

Engage talks to your customers across every native channel.

Email, SMS, WhatsApp, mobile push, and web personalization — managed from one workspace, with shared profiles, shared suppression, shared reporting.

Each channel is a pluggable provider on top: Klaviyo for email, Twilio for SMS, OneSignal for push, embedded SDK for web.

Akce: Next → tour klikne za uživatele do email-campaign, Step 8.

Step 8 — Email campaign editor: from blank to sendable

Timing v originále: 3:46–4:02 Cílový view: email-campaign (Editor tab default — máme WYSIWYG preview). Hotspot A: .ec-checklist (5 stage cards: Connect provider / Choose audience / Write email / Review and test / Schedule send).

Tooltip A (anchored nad checklist, šipka dolů):

Every campaign is a checklist, not a screen full of fields.

Connect provider, pick audience, write the email, review, schedule. The status badges (Ready / Needs action / Recommended / Next) tell you exactly what’s still open.

Hotspot B (po Next v rámci stepu, anchored u .ec-wysiwyg):

WYSIWYG editor — and full LiquidJS personalization on the side.

Compose the email visually; the selection panel on the right controls body / container styling without leaving the canvas. LiquidJS lets you drop in profile attributes ({{ profile.first_name }}) or catalog products mid-template.

Akce: Next → Step 9.

Pozn. pro Claude Code:

• Při entry do email-campaign by měl být active tab Editor (už je v markup nastavený, .is-active na druhém .jd-tab).
• Tooltip B je interní v rámci stepu — banner 8 / 12.

Step 9 — Journeys: multi-step, multi-channel automation

Timing v originále: 4:23–5:18 Cílový view: journey-detail (Post-Purchase Nurture). Hotspot: middle node .jd-node — Wait for attribute condition (node ve sloupci 2 v canvasu).

Tooltip A (anchored nad wait node, šipka dolů):

Journeys orchestrate communication across channels and time.

Start with an event (form submit, purchase, churn-risk score change), send a welcome message, then wait — for a click, a conversion, a timeout. Branch on what happened.

The example: web form submit → welcome email → wait for click or 1-day timeout → if no click, send SMS as a fallback.

Mikro-interakce (volitelně, low priority):

• Connector path mezi nodes po showu tooltipu jednou „proteče” (CSS stroke-dashoffset animace) coral barvou — vizuálně naznačí směr toku.

Akce: Next → Step 10.

Step 10 — Content: catalogs, assets, surveys

Timing v originále: 5:18–6:46 Cílový view: content (templates grid). Před showem tooltipu expandnout submenu Content v sidebaru programaticky (otevřít chevron), ať uživatel vidí Catalogs / Asset Library / Surveys. Hotspot: první template card (Email · “We miss you”).

Tooltip A (anchored vpravo od cards, šipka doleva):

Templates are the bricks. Catalogs and assets keep them dynamic.

Catalogs are product feeds — connect a Shopify or any e-commerce source, and email/SMS/push templates can render “in-stock items from the category the customer last browsed.”

Asset library holds reusable HTML and text snippets — subject lines, header blocks, footers — usable across emails, SMS, WhatsApp, push.

Surveys live in the web personalization layer and feed responses back into profiles.

Akce: Next → Step 11.

Step 11 — Reporting: did it actually move the needle

Timing v originále: 6:46–end Cílový view: reporting. Hotspot: KPI grid — .kpi-grid (6 tiles nahoře).

Tooltip A (anchored nad grid, šipka dolů):

And finally — did any of it move the needle.

Cross-channel sends, open / click / unsubscribe rates, attributed revenue, reachability by channel. Plus custom dashboards (NPS, survey-driven, on-site).

Reporting closes the loop: profiles → audiences → campaigns → journeys → reporting → back to audience refinement.

Akce: Next → Outro.

Outro

Hotspot: žádný. Maketa pod tooltipem rozostřená, banner zmizí.

Card:

That’s Engage.

See it on your own data, or talk to someone who’s done a few migrations.

[▶ Start a trial] [💬 Talk to an expert] [← Back to homepage]

Akce:

• Start a trial → /onboarding nebo finální URL (dořeší marketing).
• Talk to an expert → /live-demo/ (stejně jako v Pipes outro).
• Back to homepage → /.
• ✕ na banneru → zavře outro, maketa plně proklikatelná.

Čeho se vyvarovat (lessons z Pipes dema)

1. Žádné fullscreen intro overlay. Welcome card je tooltip nad blurnutou maketou.
2. Nepoužívej Skip tour tlačítko v banneru. Držíme Prev / Next a ✕ na exit.
3. Sidebar nav neglowuj coral barvou. Active state je rezervovaný pro skutečně aktivní routu.
4. Mezi kroky neměň víc než jeden view najednou. Pokud step přepíná view (nebo tab uvnitř audience-detail), nech ho ustálit (~150 ms transition) než ukážeš spotlight.
5. Tooltip text drž stručný. Maximum 3 odstavce; pokud je víc, je to nový step. Tour má udržet flow, ne učit produkt.
6. Mock data zachovat napříč view. Emma Schneider v profile detail je VIP · Active member; high-LTV audience má 8 412 členů (stejné číslo v Realtime Audiences listu i v audience-detail headeru).

Open questions (k diskuzi před implementací)

• Step 4 / Step 8 — slučovat dva tooltipy do jednoho? Tendence: ano, zkrátit. Tour má tempo, ne výuku.
• Activation jako samostatný step? Aktuálně zmíněn větou v Step 5 Conditions. Pokud chceme dedikovaný krok, je potřeba dodat data-view="audience-activation" (nebo otevřít builder s důrazem na Refresh cadence panel).
• Connector animace v journey canvas (Step 9)? Hezké, ale extra práce. Default: vynechat, dodat později.
• Mobile blocker je vypnutý v aktuální mockup verzi pro pohodlnější build. Před prod ho vrátit zpátky (threshold 640 px je v komentáři ve <script>).

Mapování stepů → existující data-view v engage/demo.astro

Co Claude Code dostane navíc k tomuhle MD

• src/pages/engage/demo.astro — existující single-file mockup se všemi views (data-view). View switching už je hotové; tour engine se na něj jen navěsí. Audience-detail tabs jsou samostatné views, ne JS state.
• src/pages/pipes/demo.astro — referenční implementace tour mechaniky (banner, spotlight, tooltip system, intro/disclaimer/outro overlays). Většinu lze přesypat 1:1 a jen vyměnit copy + hotspoty.