Architektur — System-Übersicht
Big Picture
┌──────────────────┐ ┌────────────────────────────┐ ┌──────────────────┐
│ Webinar-Page │ │ Langdock Workflow │ │ Google Drive │
│ (GitHub Pages) │───▶│ Web Research → Routing │───▶│ Briefing-Doc │
│ Webhook-POST │ │ → Doc-Generation │ │ im Ordner │
└──────────────────┘ └────────────────────────────┘ └──────────────────┘Die Landingpage triggert den Webhook direkt aus dem Browser. Langdock recherchiert die Firma live im Web und legt — abhängig von der Watch-Time — ein passendes Briefing-Doc in einem geteilten Drive-Ordner an.
Komponenten im Detail
1. Frontend — index.html
| Aspekt | Detail |
|---|---|
| Hosting | GitHub Pages (kostenlos, HTTPS, statisch) |
| Stack | Plain HTML + Vanilla JS, keine Build-Pipeline |
| Funktion | Registrierungsformular + zwei Demo-Trigger-Buttons |
| Datenfluss | fetch(LANGDOCK_WEBHOOK_URL, {method: 'POST', body: persona}) |
2. Langdock Workflow
Das ist der "intelligente" Teil. Zwei separate Workflows:
Workflow 1 — Web Research & Smart Routing (live während der Masterclass)
[Webhook] → [Larry the Lead Researcher] → [Create Doc] → [Update Doc]
Web-Search aktiviert,
routet selbst (Hot/Cold)Recherchiert jeden Lead (Revenue, News, strategische Themen). Larry — der Agent mit Web-Search-Zugriff — entscheidet im Prompt selbst, ob er ein Sales-Briefing oder ein Re-Engagement-Briefing schreibt, abhängig von der Watch-Time. Output landet als Google Doc im geteilten Ordner. Kein Lead fällt durchs Raster.
→ Details: workflow1-lead-triage.html
Workflow 2 — Battle Cards (Bonus-Demo)
[Webhook] → [Extract] → [Synthesize] → [Create Doc] → [Update Doc]Wertet 8–10 Sales-Call-Transkripte aus und legt eine wöchentliche Battle Card als Doc ab. Selbes Drive-Pattern wie Workflow 1: Synthesize gibt doc_title und doc_body zurück, Create legt das Doc an, Update schreibt den Body rein.
→ Details: workflow2-battle-cards.html
3. Google Drive — Output-Layer
| Aspekt | Detail |
|---|---|
| Setup für die Demo | Ein gemeinsamer Ordner reicht — Larry präfixt die Doc-Titel mit 🔥 (Hot) bzw. ❄️ (No-Show), sortiert nach "Zuletzt geändert" siehst du alles auf einen Blick |
| Setup für Production | Zwei Ordner empfohlen: Sales – Hot Leads und Marketing – Re-Engagement — Sales sieht nur Hot-Briefings, Marketing entscheidet über Re-Engagement separat. Routing über einen zusätzlichen Folder-Switch nach Larrys mode-Output |
| Format | Google Docs mit Markdown-Rendering — Tabellen, Quellen-Links, formatierte Briefings |
| Auffindbarkeit | "Sortieren nach: Zuletzt geändert" → neue Briefings poppen oben rein |
Warum Drive statt Mail?
- Kein Spam-Risiko
- Sofort visuell auffindbar im Ordner statt einzelne Mails
- Format-reich (Tabellen, Quellen-Links, Bilder)
- Team-kollaborativ (Kommentare, Tasks zuweisen)
- Kein OAuth-Drama mit Refresh-Tokens
Was bewusst nicht Teil der Demo ist
| Komponente | Warum nicht |
|---|---|
| HubSpot-Sync | Keine Mock-Personas in einem produktiven CRM. In Prod relevant, in Demo nicht. |
| Slack-Notifications | Reduktion auf das Wesentliche. Jeder kann's später ergänzen. |
| Persistente Datenbank | Für die Demo unnötig. In Prod könntest du Webhooks zusätzlich in BigQuery loggen. |
| Auth/User-Management | Statische Page, kein Login. |
Tech-Stack-Zusammenfassung
| Layer | Tool |
|---|---|
| Frontend | GitHub Pages + Vanilla HTML/CSS/JS |
| Workflow-Engine | Langdock (mit aktiviertem Web-Search-Tool) |
| Web Search | Langdock-integriert (Bing/Google API) |
| Output | Google Drive (Workspace oder Free) |
Skalierungs-Pfad
So sieht's aus, wenn du das Setup in Production schiebst:
- Frontend: GitHub Pages → Vercel/Netlify mit eigener Domain (oder direkter Webhook-Trigger aus deinem echten Webinar-Tool).
- Trigger: Direkter Sync aus deinem CRM/Webinar-Tool (HubSpot Workflow → Webhook, Demio Webhook, Zoom Webhook).
- Langdock: Bleibt. Skaliert von 100 zu 100k Leads/Monat ohne Code-Änderung.
- Output: Drive bleibt fürs Team-Briefing — zusätzlich Slack-Notifications oder direkter HubSpot-Lifecycle-Update.
- Logging: Jeden Workflow-Run in BigQuery/Snowflake mitschreiben für Konversionsanalyse.
Die Architektur ändert sich nicht. Nur die Komponenten werden professionalisiert.