Comment ajouter un chatbot à votre site Framer : tutoriel 5 minutes

Avant de coller quoi que ce soit dans Framer, préparez trois choses :

• Un site Framer publié. Vous pouvez embarquer des scripts sur un brouillon, mais le widget ne tournera que sur l'URL en ligne. Si vous n'avez pas encore cliqué Publish, faites-le d'abord.
• Un compte Chatloom. Le plan gratuit suffit. Inscrivez-vous sur chatloom.app, validez l'e-mail et vous atterrirez sur un dashboard vide avec le prompt « Create your first agent ».
• Un petit texte pour entraîner. 200 mots sur votre produit suffisent pour obtenir une vraie réponse au premier test. Tirez-le du hero et de la page À propos.

C'est toute la liste de prérequis. Pas besoin de Framer Pro, de domaine personnalisé, d'un siège Zapier ou d'un développeur disponible.

Dans le dashboard Chatloom, cliquez sur Create new agent. Donnez-lui un nom (celui de votre entreprise suffit), choisissez une langue (Chatloom couvre 95+ langues avec des réponses natives dans dix) et un preset de personnalité : Support, Sales ou Custom.

Pour un site marketing Framer, Sales est presque toujours le bon défaut. Il est réglé pour qualifier les leads, pousser vers des réservations de démo et répondre aux questions de prix avec assurance plutôt que de rediriger vers un formulaire.

Une fois l'agent créé, vous atterrissez dans le builder. Ne touchez à rien d'autre pour l'instant — on configurera le branding après. Pour le moment, récupérez le snippet d'embed : Install → Custom embed. Copiez les deux balises script dans le presse-papiers.

Dans Framer, ouvrez votre projet et cliquez sur l'icône roue crantée (Site Settings) en haut. Descendez jusqu'à General → Custom Code. Vous verrez trois zones de texte :

• Start of head — pour les balises de vérification, les preloads et les snippets analytics qui doivent tourner tôt.
• End of body — pour les scripts qui doivent tourner après le rendu. Chatloom va ici.
• End of head — pour les overrides CSS et les balises meta.

Collez les deux balises script de l'étape 1 dans le champ End of body. Enregistrez. Puis cliquez sur Publish en haut à droite. Le widget sera en ligne sur votre URL publiée dans les dix secondes qui suivent.

Ouvrez votre site publié en navigation privée. Vous devriez voir le launcher Chatloom en bas à droite. Cliquez dessus, le panneau de chat s'ouvre, tapez une question. Félicitations — votre site Framer a maintenant un chatbot IA.

Le widget existe mais il ne connaît toujours rien à votre produit. C'est l'étape que la plupart des guides sautent.

Retournez dans Chatloom et ouvrez Knowledge base → Add source. Vous avez quatre options :

• Crawl website — collez votre domaine Framer. Le crawler parcourt le sitemap et extrait le texte rendu de chaque page. C'est le bon choix pour la plupart des sites Framer et ça prend moins de deux minutes.
• Upload files — glissez votre pitch deck, votre one-pager ou votre grille tarifaire.
• Paste text — pour les FAQ rapides, les détails tarifaires ou les réponses du type « et si... » qui ne sont pas encore sur le site.
• Sitemap URL — utilisez-le si votre site Framer est protégé par mot de passe ou contient des pages non indexées que le bot doit quand même connaître.

Pour un site marketing Framer typique, la combinaison gagnante est Crawl + Paste text. Le crawl couvre tout ce qui est déjà sur le site ; le champ de collage comble les nuances qui n'ont jamais atteint le copy.

Déclenchez l'entraînement. Sur le gratuit, ça prend environ 60 secondes. Le dashboard affiche « Ready » quand la base de connaissances est interrogeable.

C'est l'étape qui sépare un chatbot ressemblant à une bulle de support de 2019 d'un chatbot qui semble natif du design Framer. Dans le builder, ouvrez la section Widget.

Commencez par Launcher mode. Button est le défaut sûr (cercle flottant en bas à droite), mais Fullscreen vaut le coup d'essai sur les landings — tout le viewport s'assombrit, le chat prend la scène, et c'est un pattern de conversion bien plus fort pour les CTA du hero.

Ensuite, Brand colors. Chatloom expose primaire, accent et surface. Collez à votre palette Framer. Une preview en direct à droite se met à jour instantanément.

Typographie. Uploadez le .woff2 de la police Framer que vous utilisez (ou piochez dans le picker Google Fonts). La surface du chat, les chips de suggestions et les headers se re-rendent avec la nouvelle police. Sur un écran retina, impossible de distinguer le widget d'un composant natif.

Rayon des coins. Framer utilise 12 px par défaut sur la plupart des composants. L'égaler fait disparaître le widget dans le design.

Logo et avatar. Uploadez un PNG transparent. Le bouton du launcher respecte le PNG ; l'avatar IA apparaît à côté de chaque message du bot.

Enregistrez, rouvrez votre site Framer en navigation privée. Le widget est maintenant indiscernable d'une partie native du design.

Deux dernières touches avant d'appeler ça fini.

Limitez le périmètre. Par défaut, Chatloom s'affiche sur toutes les pages du site Framer. Si vous voulez le retirer de la page pricing (fréquent sur les deals entreprise où vous préférez laisser la visibilité à l'équipe ventes), utilisez les Visibility rules du widget : excluez les URLs qui matchent /pricing, /contact ou tout pattern de votre choix.

Configurez les accueils. Dans la section Messages du builder, écrivez un court message de bienvenue (« Bonjour — je peux répondre à vos questions sur l'intégration Framer, le pricing ou le démarrage. Sur quoi travaillez-vous ? ») et 3–5 prompts suggérés. Les prompts suggérés sont le levier de conversion le plus puissant de tout le widget ; les gens cliquent dessus bien plus qu'ils ne tapent.

Testez. Ouvrez le site en privé, menez une conversation complète depuis différentes pages d'entrée et posez en particulier des questions non documentées. Regardez comment le bot gère « je ne sais pas » — s'il hallucine, ajoutez la réponse à la base de connaissances et retestez. Cinq minutes ici économisent une semaine de mauvaises conversations.

C'est tout le flux. La plupart des fondateurs Framer terminent la séquence en moins de 15 minutes et ne touchent plus jamais au script d'embed.