Drop-in AI personalization engine that transforms static storefronts into dynamic, intent-driven experiences using URL signals and on-page behavior. Zero backend required.
Live Demo: smartswap.lovable.app
Visitor arrives → URL signals collected → Intent scored → Persona resolved → Content swapped
- Visitor lands with URL params (e.g.
?utm_campaign=gaming&ref=twitch) - Signals are weighted and scored against 7 intent profiles
- Hero image, headline, CTA, and section order update instantly
- Behavior tracking begins (scroll patterns, click semantics, frustration detection)
| Persona | Example Triggers | CTA |
|---|---|---|
| 🎮 Gaming | ?utm_campaign=gaming, ?ref=twitch |
"Shop Gaming Monitors" |
| 💼 Productivity | ?ref=linkedin, ?q=office |
"Explore Office Displays" |
| 💰 Budget | ?q=cheap, ?q=deal |
"See Today's Deals" |
| 🎨 Creative | ?ref=dribbble, ?q=color accurate |
"Shop Creator Monitors" |
| 🎓 Student | ?q=student, ?ref=unidays |
"Student Deals" |
| ⌨️ Developer | ?ref=github, ?q=coding |
"Dev Setup Bundles" |
| ✨ Default | No signals | "Browse All Monitors" |
| Parameter | Weight | Example |
|---|---|---|
?intent= |
1.0 | Direct override |
?utm_campaign= |
0.95 | Campaign tracking |
?category= |
0.85 | Collection page |
?q= |
0.80 | Search query |
?ref= |
0.75 | Referrer domain |
?utm_source= |
0.70 | Traffic source |
?tag= |
0.70 | CMS tag |
| Module | File | Purpose |
|---|---|---|
| Personalization Engine | src/lib/personalization-engine.ts |
Signal collection → intent scoring → variant selection |
| Template Registry | src/lib/template-registry.ts |
3 hero layouts (centered, split, minimal) mapped to intents |
| Smart Listener | src/lib/smart-listener.ts |
Semantic click tracking, frustration detection, middleware hooks |
| Event Ledger | src/lib/event-ledger.ts |
Client-side event batching, dedup, localStorage persistence |
Every personalization outputs a structured JSON (accessible via window.__SMARTSWAP_DECISION__):
{
"intent": "GAMING",
"template": "hero_centered",
"cta": "Shop Gaming Monitors",
"funnel_stage": "BUY",
"confidence": "high",
"signals": [{ "source": "utm_campaign", "value": "gaming", "weight": 0.95 }]
}- TECHNICAL_SUMMARY.md — 1-page judge-ready architectural overview
- DEVELOPER_DOCS.md — Senior-grade developer reference (APIs, data flow, extension points)
git clone <YOUR_GIT_URL>
cd <YOUR_PROJECT_NAME>
npm install && npm run devThen try: http://localhost:8080/?utm_campaign=gaming
React 18 · TypeScript · Vite · Tailwind CSS · Framer Motion · Shopify Storefront API · Zustand · Vitest
Built with Lovable