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.

Holen Sie sich zuerst Ihren Einbettungscode über Chatbot > Veröffentlichen im Dashboard.

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 auf + Add Script.
  5. Geben Sie dem Skript einen gut erkennbaren Namen (z. B. Agentkit Widget).
  6. Fügen Sie Ihren Einbettungscode in den Skriptkörper ein.
  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.

Beispielformat (verwenden Sie die echten Werte aus Chatbot > Veröffentlichen):

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>

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

  • Custom Code steht auf Framer-Websites zur Verfügung, die Ausführung auf einer eigenen Domain (nicht *.framer.website) erfordert jedoch in der Regel einen kostenpflichtigen Tarif.
  • 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, ob Ihre Domain unter Chatbot > Veröffentlichen > Sicherheit zugelassen ist.
  • 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