Documentatie

Framer

Voeg je agent toe aan een Framer-site met Custom Code.

Voeg je AI-agent toe aan een Framer-site via Custom Code. De snippet wordt op elke pagina geladen zodra deze gepubliceerd is.

Haal eerst je embedcode op via Chatbot > Publiceren in het dashboard.

Snel instellen

  1. Open je project in Framer.
  2. Klik in de linkerzijbalk op Project Settings (het tandwielicoon).
  3. Selecteer het tabblad Custom Code.
  4. Klik op + Add Script.
  5. Geef het script een herkenbare naam (bijv. Agentkit Widget).
  6. Plak je embedcode in de body van het script.
  7. Kies bij plaatsing voor End of <body> tag (Body End) — dit is de aanbevolen optie voor chatwidgets.
  8. Kies ervoor om te laden op All Pages.
  9. Klik op Save.
  10. Klik rechtsboven op Publish om de update live te zetten.

Voorbeeldformaat (gebruik de echte waarden van Chatbot > Publiceren):

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

Waarom End of <body>, niet Head

Framer verdeelt Custom Code in Head Code en End of <body> Code. Chatwidgets horen aan het einde van <body> te staan, zodat ze de eerste render van de pagina niet vertragen — dat sluit ook aan bij het async-attribuut op het script.

Head Code is gereserveerd voor dingen die heel vroeg moeten draaien, zoals analytics-pixels of font-preloads.

Pagina-specifieke installatie

Om de widget alleen op specifieke pagina's te laden:

  1. Selecteer een pagina in het lagenpaneel van Framer.
  2. Open Page Settings (rechterpaneel).
  3. Voeg daar Custom Code toe in plaats van in Project Settings.

Code op paginaniveau draait alleen op die specifieke pagina.

Plannen & domeinen

  • Custom Code is beschikbaar op Framer-sites, maar het gebruiken ervan op een custom domain (niet *.framer.website) vereist meestal een betaald plan.
  • De widget werkt op de standaard *.framer.website-URL als je plan Custom Code daar toestaat.

Na het publiceren

Framer Custom Code draait niet in de editor of preview — alleen op de gepubliceerde site. Klik na Save op Publish en open vervolgens de live-URL.

Problemen oplossen

Widget verschijnt niet in de editorpreview.

  • Dat is normaal. Custom Code draait alleen op de gepubliceerde site.

Widget verschijnt ook niet op de gepubliceerde site.

  • Controleer of je zowel op Save als op Publish hebt geklikt.
  • Controleer of je domein is toegestaan bij Chatbot > Publiceren > Beveiliging.
  • Ververs de pagina hard (⌘+Shift+R) om de CDN-cache te omzeilen.

Widget flitst even op en verdwijnt dan.

  • Controleer op paginaovergangen of animaties van Framer die de DOM opnieuw kunnen laden. De widget hoort bij elke paginalading opnieuw te mounten — gebeurt dat niet, neem dan contact op met support.

Testen

  1. Open de gepubliceerde URL in een incognitovenster.
  2. Zoek naar de chatbubbel.
  3. Klik om te openen en verstuur een testbericht.

Volgende stappen