Comment installer un chatbot IA gratuitement sur son site avec IA Gateway Builder

Vous souhaitez ajouter un chatbot IA gratuitement sur votre site web sans développer votre propre intelligence artificielle ni mettre en place une API complexe ?

IA Gateway Builder permet de générer un module conversationnel en HTML/CSS/JavaScript que vous pouvez intégrer directement à vos pages. Le visiteur peut alors utiliser son assistant IA préféré — ChatGPT, Claude, Gemini, Mistral ou Perplexity — pour interroger le contenu de la page qu’il consulte.

Dans ce tutoriel, EC TMT vous explique comment installer un chatbot IA sur un site gratuitement, comment configurer votre domaine, générer le code du widget et l’intégrer notamment dans un site WordPress.

À retenir : Le Gem IA Gateway Builder ne crée pas un chatbot propriétaire hébergé sur votre serveur. Il génère une passerelle qui permet au visiteur d’utiliser son propre assistant IA avec le contexte de votre page et, si vous le souhaitez, une recherche ciblée sur votre domaine.

IA Gateway Builder : c’est quoi et à quoi ça sert ?

IA Gateway Builder est un Gem personnalisé conçu pour Google Gemini qui génère des passerelles conversationnelles destinées aux sites web. Il peut produire un module HTML/CSS/JavaScript permettant à un visiteur d’utiliser différents assistants IA à partir du contexte de la page consultée.

Pour un éditeur de site, son intérêt principal est de produire un bloc HTML/CSS/JS intégrable sans avoir à développer soi-même toute l’interface.

Le module peut préparer une consigne contenant l’URL de la page et demander à l’assistant de privilégier les résultats provenant du domaine, notamment via une instruction de recherche de type site:monsite.fr. Le comportement exact dépend ensuite de l’assistant utilisé et de ses capacités de recherche.

Concrètement, votre visiteur peut arriver sur un article et cliquer sur :

« Poser une question ou interagir via l’IA »

Il peut ensuite choisir son assistant :

• ChatGPT
• Claude
• Mistral
• Perplexity
• Gemini
• ou d’autres IA selon la configuration retenue.

Le module ouvre alors l’IA sélectionnée avec une consigne préremplie et le contexte de la page.

Peut-on installer un chatbot IA gratuitement sur son site ?

Oui. Avec IA Gateway Builder, vous pouvez ajouter gratuitement un module conversationnel IA à votre site web.

Le principe est différent d’un chatbot IA classique : votre site n’héberge pas l’intelligence artificielle et ne paie pas les conversations des visiteurs.

Le module sert simplement de passerelle vers les assistants IA du visiteur. Celui-ci choisit l’IA qu’il souhaite utiliser — ChatGPT, Claude, Gemini, Mistral, Perplexity, etc. — puis poursuit la conversation directement avec son propre assistant.

Qui paie l’utilisation de l’IA ?

Le visiteur utilise son propre compte et son propre accès à l’assistant IA.

Ainsi, si votre visiteur dispose d’un accès gratuit à un assistant, il l’utilise dans les conditions prévues par ce service. S’il possède un abonnement payant, il utilise son abonnement.

De votre côté, vous n’avez pas à souscrire une API pour chaque conversation : vous installez simplement le module généré par IA Gateway Builder sur votre site.

A retenir : IA Gateway Builder est gratuit pour créer et intégrer la passerelle. L’utilisation de l’assistant IA est ensuite effectuée directement par le visiteur avec son propre accès.

Pourquoi installer un chatbot IA conversationnel sur son site ?

Un module conversationnel peut transformer la manière dont les visiteurs exploitent vos contenus.

Au lieu de simplement lire une page, ils peuvent demander à leur IA de :

• résumer un article ;
• identifier les points importants ;
• rechercher des informations dans vos publications ;
• extraire les ressources citées ;
• comparer plusieurs contenus ;
• approfondir un sujet ;
• rechercher d’autres articles pertinents sur votre domaine.

Pour un média, cela peut par exemple permettre au lecteur de dialoguer avec les archives.

Pour un site expert, le module peut faciliter l’accès à une documentation importante.

Pour une entreprise, il peut servir de passerelle vers une base de connaissances ou un catalogue.

L’approche est particulièrement intéressante pour les sites qui disposent déjà d’un volume important de contenus : articles, dossiers, guides, études, tutoriels ou documentation.

Comment fonctionne le module conversationnel IA ?

Le principe du module est simple : transformer une page web en point d’entrée vers plusieurs assistants IA.

Plutôt que de développer et d’héberger soi-même un chatbot complet, IA Gateway Builder génère un module en HTML/CSS/JavaScript qui peut être intégré directement à une page. Le visiteur peut ensuite choisir son assistant IA et lancer une action à partir du contenu qu’il consulte.

Le fonctionnement en 6 étapes

1. Le visiteur consulte votre page

Il arrive sur un article, une fiche produit, une documentation ou n’importe quel autre contenu de votre site.

2. Le module récupère le contexte de la page

La passerelle peut notamment utiliser l’URL, le titre et le domaine de la page consultée afin de préparer la requête envoyée à l’assistant IA.

3. Le visiteur choisit une action

Selon la configuration du module, il peut par exemple demander :

• 📝 Résumer la page
• 🔎 Analyser le contenu
• 💬 Poser une question
• ✅ Vérifier une information
• 📚 Approfondir un sujet
• 🔗 Identifier les sources

4. Le visiteur choisit son assistant IA

Le module peut proposer plusieurs assistants, comme ChatGPT, Claude, Gemini, Mistral ou Perplexity, selon la configuration générée.

5. Une consigne contextualisée est préparée

Le module peut transmettre l’URL de la page et des instructions à l’assistant choisi. Il est également possible de lui demander de privilégier le domaine consulté avec une recherche de type site:mondomaine.fr.

6. La conversation se poursuit dans l’assistant IA

L’utilisateur est ensuite dirigé vers l’assistant sélectionné pour poursuivre son interaction.

Le schéma de fonctionnement

PAGE WEB
   ↓
Module conversationnel IA (chatbot)
   ↓
URL + titre + domaine + consigne
   ↓
Choix de l'assistant IA
   ↓
ChatGPT / Claude / Gemini / Mistral / Perplexity
   ↓
Question ou analyse de la page
   ↓
Conversation avec l'IA

Pourquoi cette approche est intéressante ?

L’intérêt principal est de ne pas avoir à construire soi-même toute l’infrastructure d’un chatbot IA.

Le site fournit l’interface et le contexte de départ, tandis que l’assistant IA choisi par le visiteur prend en charge la conversation.

Cela permet notamment d’ajouter rapidement une couche conversationnelle à un média, un blog, une documentation ou une base de connaissances.

À noter : le module ne signifie pas que votre site héberge lui-même un modèle d’intelligence artificielle. IA Gateway Builder sert plutôt de passerelle entre votre contenu et les assistants IA utilisés par vos visiteurs. Le comportement exact, les capacités de recherche et les éventuelles limitations dépendent ensuite de l’assistant sélectionné et de ses conditions d’utilisation.

Ce qu’il vous faut avant de commencer

La création du module est relativement simple.

Préparez simplement :

1. Le nom de domaine de votre site
2. Les assistants IA que vous souhaitez proposer
3. L’emplacement où vous souhaitez afficher le module
4. L’accès à l’administration de votre site, pour pouvoir insérer le code HTML/CSS/JS généré.

Par exemple :

monsite.fr

Vous pouvez ensuite décider de proposer uniquement ChatGPT et Claude, ou plusieurs assistants.

L’IA Gateway Builder permet justement de sélectionner les moteurs à afficher dans la grille du module.

⚠️ À savoir avant de commencer

IA Gateway Builder est un Gem personnalisé conçu pour Google Gemini. Pour l’utiliser, vous devez donc être connecté à un compte Google permettant d’accéder à Gemini.

Une fois connecté à Gemini, ouvrez le Gem IA Gateway Builder puis suivez les instructions du tutoriel pour générer et personnaliser votre module conversationnel ou votre bookmarklet.

Important : le Gem fonctionne dans l’environnement de Google Gemini. L’accès à Gemini et à certaines de ses fonctionnalités peut dépendre de votre compte Google, de votre pays, de votre type d’abonnement et des conditions d’utilisation de Google.

Le bookmarklet ou le module généré est ensuite personnalisable selon vos besoins : choix de l’assistant IA, sources préférées, prompts, interface et fonctionnalités.

Étape 1 — Ouvrir IA Gateway Builder

Commencez par ouvrir le Gem personnalisé IA Gateway Builder.

L’outil est présenté par EC TMT comme un générateur de passerelles IA sur mesure. Il suffit ensuite de lui indiquer votre domaine et de préciser que vous souhaitez la version Site Web.

L’objectif est important :

ne demandez pas un bookmarklet si votre objectif est d’installer le module sur votre propre site.

Vous devez demander explicitement :

Version Site Web — bloc HTML/CSS/JS intégrable

Étape 2 — Indiquer votre nom de domaine

C’est l’une des informations les plus importantes.

Indiquez au Gem le domaine que votre passerelle doit cibler.

Par exemple :

monsite.fr

Le domaine sert notamment à construire le contexte transmis aux assistants IA.

L’objectif est de pouvoir demander à l’IA de privilégier les contenus issus de votre propre site grâce à une recherche du type :

site:monsite.fr

C’est cette logique qui transforme le simple bouton IA en passerelle contextuelle vers votre écosystème éditorial.

Étape 3 — Demander la version « Site Web »

Voici le point essentiel.

Dans votre demande au Gem, précisez que vous souhaitez obtenir :

un bloc HTML/CSS/JS autonome à intégrer dans vos pages.

Vous pouvez partir de ce prompt :

Je souhaite créer un module conversationnel IA pour mon site web.

Domaine : monsite.fr

Je veux la VERSION SITE WEB et non la version bookmarklet.

Génère-moi un bloc complet HTML/CSS/JS prêt à intégrer dans mes pages.

Le module doit :
- être responsive ;
- être léger ;
- fonctionner sans framework externe ;
- utiliser des classes et des identifiants CSS préfixés pour éviter les conflits avec mon site ;
- récupérer automatiquement l’URL de la page courante ;
- utiliser mon domaine comme référence pour les recherches ;
- proposer une zone permettant au visiteur de personnaliser sa consigne ;
- afficher les assistants IA que je sélectionne.

Je souhaite proposer :
- ChatGPT
- Claude
- Gemini
- Mistral
- Perplexity

Le texte du module doit être :
« Poser une question ou interagir via l’IA »

Génère le code complet et explique-moi précisément où l’intégrer.

Le Gem peut ensuite générer le code nécessaire à l’intégration. La source EC TMT fournit elle-même plusieurs exemples de prompts pour personnaliser le widget, notamment le choix des IA, le domaine et les contraintes de style.

Étape 4 — Personnaliser le module

Ne vous contentez pas du premier code généré.

Vous pouvez demander au Gem de modifier l’interface.

Par exemple :

Modifie le module avec les contraintes suivantes :

- design minimaliste ;
- largeur maximale de 600 px ;
- adaptation mobile ;
- bouton discret ;
- couleurs cohérentes avec mon site ;
- ouverture et fermeture du module ;
- aucun conflit CSS avec le reste de mon site ;
- ne pas afficher le module sur les pages d’administration.

Vous pouvez également modifier le nombre d’IA proposées.

Exemple : module minimal

Si vous souhaitez rester très simple :

Je souhaite uniquement proposer ChatGPT et Claude.
Supprime tous les autres boutons et conserve exactement le même fonctionnement.

Exemple : module pour un média

Je gère un média spécialisé.

Je souhaite que le visiteur puisse :
1. résumer l'article ;
2. poser une question sur l'article ;
3. rechercher des contenus similaires sur mon domaine ;
4. identifier les ressources citées.

Adapte le prompt par défaut du module à ces quatre usages.

Cette personnalisation est l’un des intérêts majeurs du concept : le module ne se limite pas à une interface graphique, puisque les instructions transmises aux assistants peuvent également être adaptées à votre usage éditorial.

Étape 5 — Récupérer le code HTML/CSS/JS

Une fois le résultat satisfaisant, demandez au Gem de vous fournir :

le code complet prêt à copier-coller.

Dans l’exemple publié par EC TMT, la version Site Web est composée d’un bloc comprenant le HTML, le CSS et le JavaScript nécessaires au fonctionnement du widget.

Vous devez normalement obtenir un ensemble de code que vous pourrez intégrer dans votre page.

Important

Ne modifiez pas le code au hasard.

Si vous souhaitez changer un élément, demandez plutôt au Gem :

« Modifie uniquement la couleur du bouton principal sans modifier le fonctionnement JavaScript. »

ou :

« Réduis la largeur du widget à 500 px tout en conservant la compatibilité mobile. »

Cela limite les risques de casser une partie du script.

Étape 6 — Installer le module sur votre site

L’installation dépend de votre CMS ou de votre environnement technique.

Le principe reste toutefois le même :

vous insérez le bloc HTML/CSS/JS généré par IA Gateway Builder dans l’emplacement où vous souhaitez afficher la passerelle.

Par exemple :

Article
↓
Contenu de l'article

[ MODULE IA CONVERSATIONNEL ]

↓
Articles similaires

Vous pouvez également placer le module :

• au-dessus de l’article ;
• sous le titre ;
• après l’introduction ;
• en fin d’article ;
• dans une sidebar ;
• dans un bloc récurrent du template.

Pour un média, une position après l’introduction ou avant les articles similaires peut être intéressante : le visiteur a déjà commencé sa lecture et dispose donc du contexte nécessaire pour utiliser l’IA.

Comment installer le chatbot IA sur WordPress

Si votre site fonctionne avec WordPress, plusieurs possibilités existent selon votre configuration.

Le plus simple consiste à utiliser un bloc permettant d’insérer du HTML personnalisé, si votre thème et votre configuration autorisent l’exécution du code nécessaire.

Pour une intégration globale, vous pouvez également placer le module dans un emplacement de votre thème ou dans une zone prévue pour les scripts personnalisés.

Attention

Tous les environnements WordPress ne permettent pas d’exécuter librement du JavaScript dans le contenu.

Si le code est supprimé ou neutralisé lors de l’enregistrement de la page, il faudra passer par l’emplacement d’intégration prévu par votre thème, votre constructeur de pages ou votre configuration technique.

Étape 7 — Tester le module

Ne passez pas directement en production.

Commencez par tester le module sur une page de préproduction ou une page peu visible.

Vérifiez les points suivants.

1. Le module s’affiche

Le bloc doit apparaître correctement sur ordinateur.

2. Le responsive fonctionne

Testez également :

• smartphone ;
• tablette ;
• ordinateur.

3. Les boutons IA fonctionnent

Cliquez sur chaque assistant proposé.

4. L’URL de la page est bien prise en compte

Le principe de la passerelle repose notamment sur la récupération de l’URL de la page courante et la construction d’une consigne contextualisée.

5. Le domaine est correctement ciblé

Vérifiez que le prompt transmis utilise bien votre domaine.

Par exemple :

site:monsite.fr

6. Le module ne casse pas votre design

Vérifiez notamment :

• les marges ;
• les polices ;
• les boutons ;
• les couleurs ;
• les menus ;
• l’affichage mobile.

Comment améliorer le prompt de votre module IA ?

C’est probablement l’un des points les plus importants.

Le même module peut être utilisé de manière très différente selon le type de site.

Pour un média

Vous pouvez utiliser une instruction comme :

Analyse la page consultée.

Commence par identifier les informations essentielles.
Puis :
1. résume l'article ;
2. liste les chiffres importants ;
3. identifie les personnes et organisations citées ;
4. extrais les sources et ressources ;
5. propose des articles complémentaires du domaine monsite.fr.

Pour les recherches complémentaires, utilise en priorité :
site:monsite.fr

Pour un site de documentation

Analyse la page consultée et réponds à la question de l'utilisateur.

Appuie-toi en priorité sur la documentation disponible sur monsite.fr.

Lorsque l'information n'est pas disponible dans les contenus du domaine, indique clairement que tu ne l'as pas trouvée plutôt que de présenter une information non vérifiée comme provenant du site.

Pour un site e-commerce

Analyse la page produit consultée.

Aide l'utilisateur à comprendre :
- les caractéristiques ;
- les usages ;
- les différences avec les autres contenus du site ;
- les informations techniques disponibles.

Appuie-toi prioritairement sur les informations publiées sur monsite.fr.

Cette dernière précaution est importante : il vaut mieux demander à l’IA de signaler une information absente que de lui demander de garantir des réponses « sans hallucination ».

Peut-on n’afficher qu’une seule IA ?

Oui.

Le principe de l’IA Gateway Builder permet de sélectionner les assistants affichés dans la grille.

Vous pouvez donc créer un module très minimaliste :

« Interagir avec ChatGPT »

ou proposer plusieurs possibilités :

ChatGPT | Claude | Gemini | Mistral | Perplexity

Le choix dépendra surtout de votre audience.

Un média destiné au grand public pourra privilégier les assistants les plus connus.

Un site technique pourra proposer davantage d’options.

Et si je veux utiliser l’IA Gateway sur tous les sites ?

C’est là qu’intervient la deuxième version de l’IA Gateway Builder : le bookmarklet.

Contrairement au module Site Web, il n’est pas destiné à être intégré sur votre site.

Il est conçu pour votre navigateur.

Vous pouvez le glisser dans votre barre de favoris puis l’utiliser sur une page quelconque. Le widget apparaît alors en overlay et récupère le contexte de la page consultée.

Site Web = vous équipez votre site.

Bookmarklet = vous équipez votre navigateur.

C’est une distinction essentielle.

Module IA ou chatbot classique : quelle différence ?

Un chatbot classique fonctionne généralement comme un service intégré au site.

L’IA Gateway Builder adopte une logique différente.

Chatbot classique	IA Gateway Builder
IA intégrée au service	IA choisie par l’utilisateur
Compte souvent géré par le service	Utilisation du compte IA du visiteur
Interface propriétaire	Passerelle vers plusieurs IA
Logique conversationnelle interne	Contexte transmis à l’assistant
Développement backend souvent nécessaire	Génération d’un bloc HTML/CSS/JS
Solution généralement plus lourde	Widget léger

L’approche est donc particulièrement intéressante pour les éditeurs qui veulent ajouter une couche conversationnelle à leurs contenus sans devenir eux-mêmes un fournisseur d’IA.

Les erreurs à éviter

❌ Demander un bookmarklet alors que vous voulez un module

Si vous êtes éditeur de site, précisez toujours :

« Version Site Web — HTML/CSS/JS intégrable »

❌ Oublier le domaine

Le domaine est essentiel au fonctionnement du ciblage contextuel.

❌ Afficher trop d’IA

Cinq ou six boutons ne sont pas forcément meilleurs que deux ou trois.

Testez ce qui fonctionne réellement avec votre audience.

❌ Intégrer le code sans le tester

Un conflit CSS ou JavaScript peut perturber votre site.

❌ Promettre des réponses infaillibles

Le module fournit du contexte à une IA externe ; il ne transforme pas cette IA en moteur de vérité absolue.

Il est préférable d’indiquer clairement que les réponses sont générées par l’assistant choisi par l’utilisateur.

❌ Négliger le mobile

Un widget parfaitement lisible sur desktop peut devenir inutilisable sur smartphone.

Le responsive doit donc faire partie de la demande initiale au Gem.

Le prompt ultime pour créer votre module IA

Si vous ne souhaitez retenir qu’un seul prompt, voici une version plus complète :

Je souhaite installer un module conversationnel IA sur mon site.

DOMAINE :
monsite.fr

IMPORTANT :
Je veux la VERSION SITE WEB et non la version bookmarklet.

Génère un bloc HTML/CSS/JS complet, autonome et prêt à intégrer dans mes pages.

OBJECTIF :
Permettre aux visiteurs d'interagir avec le contenu de la page grâce à leur propre assistant IA.

ASSISTANTS À PROPOSER :
- ChatGPT
- Claude
- Gemini
- Mistral
- Perplexity

FONCTIONNEMENT :
- récupérer automatiquement l'URL de la page courante ;
- transmettre cette URL dans le prompt ;
- utiliser le domaine monsite.fr comme référence ;
- privilégier les contenus du domaine avec une recherche site:monsite.fr ;
- permettre au visiteur de modifier sa question ;
- ouvrir l'assistant IA sélectionné avec le prompt préparé.

INTERFACE :
- design moderne et discret ;
- responsive mobile/desktop ;
- largeur maximale de 600 px ;
- bouton permettant d'ouvrir et fermer le module ;
- classes CSS et identifiants préfixés afin d'éviter les conflits avec le site ;
- aucun framework externe ;
- code léger.

PROMPT PAR DÉFAUT :
Analyse la page actuellement consultée et réponds à la demande de l'utilisateur. Appuie-toi prioritairement sur les contenus publiés sur monsite.fr. Lorsque tu recherches des informations complémentaires, utilise en priorité site:monsite.fr. Distingue clairement les informations provenant du site des informations complémentaires.

TEXTE DU MODULE :
« Poser une question ou interagir via l'IA »

Donne-moi ensuite :
1. le code complet ;
2. les instructions d'installation ;
3. les éventuelles modifications à effectuer pour adapter le design.

FAQ — Module conversationnel IA sur un site

Installer un chatbot IA gratuitement sur son site

IA Gateway Builder offre une façon simple d’ajouter une passerelle conversationnelle IA à un site web sans développer immédiatement un chatbot propriétaire ou une infrastructure API complète.

Le principe est simple : le module HTML/CSS/JavaScript est intégré à vos pages, puis le visiteur choisit l’assistant IA qu’il souhaite utiliser. L’URL de la page et les instructions préparées par le module peuvent servir de point de départ à son interaction avec l’IA.

Pour un média, un blog spécialisé, une documentation ou une base de connaissances, cette approche permet surtout de proposer une nouvelle façon d’explorer les contenus existants.

Avant la mise en ligne, testez toutefois le widget sur ordinateur et mobile, vérifiez son comportement avec chaque assistant proposé et évitez de présenter les réponses générées par IA comme des informations nécessairement exactes.

Si vous cherchez comment ajouter gratuitement un chatbot IA à votre site, IA Gateway Builder constitue une approche légère à tester, particulièrement lorsque votre objectif est de connecter vos contenus aux assistants IA déjà utilisés par vos visiteurs.