Documentation

Framer

Ajoutez votre agent à un site Framer à l’aide de Custom Code.

Ajoutez votre agent IA à un site Framer via Custom Code. L’extrait se charge sur chaque page une fois le site publié.

Dans Agentkit, ouvrez Channels → Website embed → Chat widget, activez le canal et copiez tout le code généré. Il comprend un script d’initialisation intégré et un script distinct qui charge le widget.

Configuration rapide

  1. Ouvrez votre projet dans Framer.
  2. Dans la barre latérale gauche, cliquez sur Project Settings (l’icône d’engrenage).
  3. Sélectionnez l’onglet Custom Code.
  4. Pour votre premier ajout, cliquez sur Add Script ; sinon, sur l’icône +.
  5. Donnez au script un nom reconnaissable (par exemple Agentkit Widget).
  6. Collez ensemble les deux balises de script générées dans le champ Custom Code. Conservez l’URL du script et l’identifiant de l’agent tels que copiés.
  7. Dans l’emplacement, choisissez End of <body> tag (Body End) — c’est l’option recommandée pour les widgets de chat.
  8. Choisissez de le charger sur All pages.
  9. Cliquez sur Save.
  10. Cliquez sur Publish en haut à droite pour mettre la mise à jour en ligne.

N’utilisez pas d’exemple à une seule balise et ne saisissez pas vous-même l’URL du widget. Après publication, vérifiez que les deux balises <script> générées figurent dans le code source de la page. Ouvrez ensuite le widget et envoyez un message de test. Guide du widget JavaScript →

Pourquoi la fin de <body>, et non le Head

Framer sépare le Custom Code en Head Code et End of <body> Code. Les widgets de chat doivent être placés à la fin de <body> pour ne pas retarder le premier affichage de la page — ce qui correspond aussi à l’attribut async du script.

Le Head Code est réservé aux éléments qui doivent s’exécuter très tôt, comme les pixels d’analyse ou le préchargement des polices.

Installation propre à une page

Pour charger le widget uniquement sur certaines pages :

  1. Sélectionnez une page dans le panneau des calques de Framer.
  2. Ouvrez Page Settings (panneau de droite).
  3. Ajoutez-y le Custom Code plutôt que dans Project Settings.

Le code au niveau de la page ne s’exécute que sur cette page précise.

Forfaits et domaines

Après la publication

Le Custom Code de Framer ne s’exécute pas dans l’éditeur ni dans l’aperçu — uniquement sur le site publié. Après avoir cliqué sur Save, cliquez sur Publish, puis ouvrez l’URL en ligne.

Dépannage

Le widget n’apparaît pas dans l’aperçu de l’éditeur.

  • C’est normal. Le Custom Code ne s’exécute que sur le site publié.

Le widget n’apparaît pas non plus sur le site publié.

  • Vérifiez que vous avez bien cliqué sur Save et sur Publish.
  • Vérifiez les restrictions de domaine pour votre domaine Framer publié.
  • Actualisez en forçant le cache (⌘+Shift+R) pour contourner le cache du CDN.

Le widget apparaît un instant, puis disparaît.

  • Vérifiez les transitions de page ou animations de Framer susceptibles de recharger le DOM. Le widget doit se remonter à chaque chargement de page — si ce n’est pas le cas, contactez le support.

Tests

  1. Ouvrez l’URL publiée dans une fenêtre de navigation privée.
  2. Repérez la bulle de discussion.
  3. Cliquez pour l’ouvrir et envoyer un message de test.

Étapes suivantes