Dokumentation

Framer

Fügen Sie Ihren Agenten mit Custom Code zu einer Framer-Website hinzu.

Fügen Sie Ihren KI-Agenten über Custom Code zu einer Framer-Website hinzu. Nach der Veröffentlichung wird das Snippet auf jeder Seite geladen.

Öffnen Sie in Agentkit Channels → Website embed → Chat widget, aktivieren Sie den Kanal und kopieren Sie den vollständig generierten Code. Er enthält ein Inline-Bootstrap-Skript und einen separaten Widget-Loader.

Schnelleinrichtung

  1. Öffnen Sie Ihr Projekt in Framer.
  2. Klicken Sie in der linken Seitenleiste auf Project Settings (das Zahnradsymbol).
  3. Wählen Sie den Tab Custom Code.
  4. Klicken Sie bei Ihrem ersten Eintrag auf Add Script, sonst auf das +-Symbol.
  5. Geben Sie dem Skript einen gut erkennbaren Namen (z. B. Agentkit Widget).
  6. Fügen Sie beide generierten Script-Tags zusammen in das Custom-Code-Feld ein. Übernehmen Sie Skript-URL und Agent-ID unverändert.
  7. Wählen Sie bei der Platzierung Ende des <body>-Tags (Body End) – dies ist die empfohlene Option für Chat-Widgets.
  8. Wählen Sie als Ladeort All Pages.
  9. Klicken Sie auf Save.
  10. Klicken Sie oben rechts auf Publish, um die Aktualisierung zu veröffentlichen.

Verwenden Sie kein Beispiel mit nur einem Script-Tag und geben Sie die Widget-URL nicht selbst ein. Prüfen Sie nach der Veröffentlichung im Seitenquelltext, ob beide generierten <script>-Tags vorhanden sind. Öffnen Sie dann das Widget und senden Sie eine Testnachricht. JavaScript-Widget-Anleitung →

Warum ans Ende von <body>, nicht in den Head-Bereich

Framer unterteilt Custom Code in Head Code und End of <body> Code. Chat-Widgets sollten ans Ende von <body>, damit sie den ersten Seiten-Paint nicht verzögern – das passt auch zum async-Attribut des Skripts.

Head Code ist für Dinge reserviert, die sehr früh ausgeführt werden müssen, etwa Analyse-Pixel oder Font-Preloads.

Seitenspezifische Installation

Um das Widget nur auf bestimmten Seiten zu laden:

  1. Wählen Sie eine Seite im Ebenen-Panel von Framer aus.
  2. Öffnen Sie Page Settings (rechtes Bedienfeld).
  3. Fügen Sie dort Custom Code hinzu statt in den Project Settings.

Code auf Seitenebene wird nur auf dieser bestimmten Seite ausgeführt.

Tarife & Domains

  • Für eine eigene Domain verlangt Framer einen kostenpflichtigen Tarif. Testen Sie die veröffentlichte *.framer.website-Adresse oder Ihre verbundene eigene Domain.
  • Das Widget funktioniert auf der Standard-URL *.framer.website, sofern Ihr Tarif dort Custom Code erlaubt.

Nach der Veröffentlichung

Framer Custom Code läuft nicht im Editor oder in der Vorschau – nur auf der veröffentlichten Website. Klicken Sie nach Save auf Publish und öffnen Sie anschließend die Live-URL.

Fehlerbehebung

Das Widget erscheint nicht in der Editor-Vorschau.

  • Erwartet. Custom Code läuft nur auf der veröffentlichten Website.

Das Widget erscheint auch nicht auf der veröffentlichten Website.

  • Prüfen Sie, ob Sie sowohl Save als auch Publish angeklickt haben.
  • Prüfen Sie die Domain-Einschränkungen für Ihre veröffentlichte Framer-Domain.
  • Erzwingen Sie ein Neuladen (⌘+Shift+R), um den CDN-Cache zu umgehen.

Das Widget blitzt kurz auf und verschwindet dann.

  • Prüfen Sie, ob Framers Seitenübergänge oder Animationen das DOM neu laden. Das Widget sollte bei jedem Seitenaufruf erneut eingebunden werden – falls nicht, wenden Sie sich an den Support.

Testen

  1. Öffnen Sie die veröffentlichte URL in einem Inkognito-Fenster.
  2. Achten Sie auf die Chat-Blase.
  3. Klicken Sie, um sie zu öffnen, und senden Sie eine Testnachricht.

Nächste Schritte