Interactive Chapter Flow
Understanding TagAssistant.ai's unique chapter-based conversation system. Every action and response creates a new chapter in your timeline.
Hi, I'm Tessa! 👋
Your Tag Service Assistant
Instead of traditional pages and forms, I use a chapter-based conversation! Every time you take an action or I respond, we create a new chapter in your timeline. It's like a conversation that builds a complete history of your tracking setup.
Quick Tips
- •Each chapter is saved to your account in real-time
- •You can always scroll back through your timeline to see previous steps
- •Chapters are React components that can be interactive
What Are Chapters?
In TagAssistant.ai, everything is a chapter. Unlike traditional web apps with separate pages and forms, we use a chapter-based timeline that flows like a conversation:
📝 User Action Chapters
When YOU do something (enter a URL, click a button, select an option), we create a UserActionChapter showing what you did.
🤖 AI Response Chapters
When TESSA responds (shows scan results, asks a question, gives recommendations), we create an AIResponseChapter with a React component.
The Chapter Timeline
📝 Each interaction creates a new chapter in your timeline
💡 Notice: The timeline alternates between user actions (you) and AI responses (Tessa). Each chapter builds on the previous ones, creating a complete audit trail of your setup process.
Common Chapter Types
User Action Chapters
URL Submission
You entered a website URL to scan
Type Selection
You confirmed or changed the website type
Template Choice
You selected a tracking template
GA Authorization
You connected your Google Analytics account
AI Response Chapters
CompactProgressIndicator
Real-time scan progress updates
ScanResultsCard
Complete scan results with tracking scripts
TrackingSetupSelector
Website type confirmation interface
TemplateAnalysisCard
Recommended events for your site type
Example: Complete Scan Flow
User Action: URL Submission
You enter "www.mystore.com" and click Scan Website
AI Response: CompactProgressIndicator
Tessa shows "Scanning www.mystore.com... 0%"
AI Response: Progress Update
Progress updates to "Detecting tracking scripts... 65%"
AI Response: ScanResultsCard
Scan complete! Shows GA4, GTM, and 5 recommendations
AI Response: TrackingSetupSelector
Tessa asks "Is this an e-commerce site?" with options to confirm
User Action: Type Confirmed
You click "Yes, this is e-commerce"
AI Response: TemplateAnalysisCard
Shows e-commerce template with recommended events
Why Chapters?
Complete Audit Trail
Every decision and recommendation is saved. Come back anytime to see exactly what happened and why.
Natural Conversation
Flows like chatting with a tracking expert instead of filling out forms. More intuitive and less overwhelming.
Real-time Updates
Chapters update instantly using Firestore. Multiple team members can watch the same scan progress together.
For Developers
Chapters are stored in Firestore at /domains/{domain}/chapters and rendered as React components in the timeline.
Each AIResponseChapter has a component field that maps to a component name like "ScanResultsCard", plus a data field containing the props.
The frontend subscribes to chapters using onSnapshot() so new chapters appear instantly without polling or page refreshes.