Chatbot in eine Framer-Site einbinden — Walkthrough in 5 Minuten

Bevor Sie etwas in Framer einfügen, halten Sie drei Dinge bereit:

• Eine veröffentlichte Framer-Site. Sie können Scripts auch in einem Draft einfügen, aber das Widget läuft nur auf der Live-URL. Falls Sie noch nicht auf Publish gedrückt haben, tun Sie das zuerst.
• Einen Chatloom-Account. Der kostenlose Tarif reicht. Auf chatloom.app registrieren, E-Mail bestätigen, dann landen Sie in einem leeren Dashboard mit dem Prompt „Create your first agent".
• Einen kurzen Text zum Trainieren. 200 Wörter über Ihr Produkt genügen, um im ersten Test eine sinnvolle Antwort zu bekommen. Ziehen Sie den Text aus der Hero-Section und der Über-uns-Seite.

Das ist alles. Kein bezahlter Framer-Tarif nötig, keine Custom-Domain, kein Zapier-Seat, kein Entwickler auf Abruf.

Im Chatloom-Dashboard auf Create new agent klicken. Name vergeben (Firmenname reicht), Sprache wählen (Chatloom unterstützt 95+ Sprachen, zehn davon vollständig nativ) und ein Personality-Preset wählen: Support, Sales oder Custom.

Für eine Framer-Marketing-Site ist Sales fast immer der richtige Default. Es ist darauf abgestimmt, Leads zu qualifizieren, Demos zu promoten und Preisfragen selbstbewusst zu beantworten, statt auf ein Kontaktformular auszuweichen.

Nach dem Anlegen des Agenten landen Sie im Builder. Lassen Sie alles andere unangetastet — das Branding passen wir an, sobald das Widget live ist. Jetzt nur das Embed-Snippet abgreifen: Install → Custom embed. Beide Script-Tags in die Zwischenablage kopieren.

In Framer das Projekt öffnen und oben auf das Zahnradsymbol (Site Settings) klicken. Zu General → Custom Code scrollen. Drei Textfelder:

• Start of head — für Verifizierungstags, Preload-Links, Analytics-Snippets, die früh laufen müssen.
• End of body — für Scripts, die erst nach dem Rendern laufen sollen. Chatloom gehört hierher.
• End of head — für CSS-Overrides und Meta-Tags.

Beide Script-Tags aus Schritt 1 ins Feld End of body einfügen. Speichern. Dann oben rechts auf Publish klicken. Das Widget ist binnen zehn Sekunden nach dem Publish live.

Ihre veröffentlichte Site in einem Inkognito-Fenster öffnen. Unten rechts sehen Sie den Chatloom-Launcher. Anklicken, das Chat-Panel öffnet sich, eine Frage eintippen. Glückwunsch — Ihre Framer-Site hat jetzt einen KI-Chatbot.

Das Widget existiert, weiß aber noch nichts über Ihr Produkt. Diesen Schritt überspringen die meisten Guides.

Zurück zu Chatloom, Knowledge base → Add source öffnen. Vier Optionen:

• Crawl website — Framer-Domain einfügen. Der Crawler läuft die Sitemap ab und zieht den gerenderten Text von jeder Seite. Für die meisten Framer-Sites die richtige Wahl und in unter zwei Minuten erledigt.
• Upload files — Pitch-Deck-PDF, Onepager, Preisliste einwerfen.
• Paste text — für kurze FAQs, Preise oder „Was passiert, wenn …"-Antworten, die noch nicht auf der Site stehen.
• Sitemap URL — falls die Framer-Site passwortgeschützt ist oder nicht-indexierte Seiten enthält, die der Bot trotzdem kennen soll.

Für eine typische Framer-Marketing-Site gewinnt Crawl + Paste text. Der Crawl deckt alles ab, was schon auf der Site steht; das Paste-Feld ergänzt die Nuancen, die nie in den Content geschafft haben.

Training starten. Im Free-Tier sind das etwa 60 Sekunden. Das Dashboard zeigt „Ready", sobald die Wissensbasis abfragbar ist.

Dieser Schritt trennt einen Chatbot, der aussieht wie eine Support-Blase aus 2019, von einem, der sich wie ein nativer Teil des Framer-Designs anfühlt. Im Builder den Bereich Widget öffnen.

Beginnen Sie mit Launcher-Modus. Button ist der sichere Default (schwebender Kreis unten rechts), aber Fullscreen ist für Landingpages einen Versuch wert — das gesamte Viewport verdunkelt sich, der Chat steht im Zentrum, und das ist ein deutlich stärkeres Conversion-Muster für Hero-CTAs.

Dann Markenfarben. Chatloom exponiert Primär, Akzent und Surface. An die Framer-Palette anpassen. Rechts läuft eine Live-Preview, die sofort aktualisiert.

Typografie. Die .woff2 der genutzten Framer-Schrift hochladen (oder aus dem Google-Fonts-Picker wählen). Chat-Oberfläche, Suggestion-Chips und Header rendern sich mit der neuen Schrift neu. Auf einem Retina-Display ist der Unterschied zum nativen Framer-Bestandteil nicht erkennbar.

Eckenradius. Framers Default für die meisten Komponenten ist 12 px. Passen Sie den Wert an, und das Widget verschwindet ins Design.

Logo und Avatar. Transparentes PNG hochladen. Der Launcher-Button respektiert das PNG; der KI-Avatar steht neben jeder Bot-Message.

Speichern, Framer-Site erneut im Inkognito öffnen. Das Widget ist jetzt nicht mehr von einem nativen Teil des Designs zu unterscheiden.

Zwei letzte Handgriffe, bevor Sie fertig sind.

Widget scopen. Standardmäßig zeigt Chatloom sich auf jeder Seite der Framer-Site. Soll es z. B. auf der Preisseite unsichtbar sein (verbreitet bei Enterprise-Deals, wo das Vertriebsteam sichtbar bleiben soll), dann die Visibility rules des Widgets nutzen: URLs ausschließen, die /pricing, /contact oder einem anderen Muster entsprechen.

Begrüßungen setzen. Im Builder-Bereich Messages einen kurzen Willkommenstext schreiben („Hey — ich kann Fragen zur Framer-Integration, zum Pricing oder zum Einstieg beantworten. Woran arbeiten Sie gerade?") und 3–5 Suggested Prompts. Suggested Prompts sind der höchste Conversion-Hebel im ganzen Widget; Leute klicken sie häufiger, als sie etwas tippen.

Test. Die Site im Inkognito öffnen, von verschiedenen Einstiegsseiten eine komplette Konversation durchspielen und gezielt Fragen stellen, die Sie noch nicht dokumentiert haben. Beobachten Sie, wie der Bot mit „weiß ich nicht" umgeht — halluziniert er, ergänzen Sie die Antwort in der Wissensbasis und testen erneut. Fünf Minuten Aufwand hier sparen eine Woche schlechte Konversationen.

Das ist der komplette Workflow. Die meisten Framer-Gründer schaffen den Ablauf in unter 15 Minuten und fassen das Embed-Script nie wieder an.