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é.

Récupérez d’abord votre code d’intégration depuis Chatbot > Publier dans le tableau de bord.

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. Cliquez sur + Add Script.
  5. Donnez au script un nom reconnaissable (par exemple Agentkit Widget).
  6. Collez votre code d’intégration dans le corps du script.
  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.

Exemple de format (utilisez les valeurs réelles de Chatbot > Publier) :

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

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

  • Le Custom Code est disponible sur les sites Framer, mais l’exécuter sur un domaine personnalisé (autre que *.framer.website) nécessite généralement un forfait payant.
  • Le widget fonctionne sur l’URL par défaut *.framer.website si votre forfait y autorise le Custom Code.

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 que votre domaine est autorisé dans Chatbot > Publier > Sécurité.
  • 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