Comment installer un module conversationnel IA sur son site gratuitement avec IA Gateway Builder

Vous souhaitez ajouter un module IA conversationnel à votre site sans développer votre propre chatbot ni mettre en place une API complexe ? L’IA Gateway Builder permet de générer un widget en HTML/CSS/JavaScript prêt à intégrer dans vos pages.

Ce module fonctionne comme une passerelle entre votre site et les assistants IA utilisés par vos visiteurs : ChatGPT, Claude, Mistral, Perplexity, Gemini ou encore d’autres services compatibles.

L’objectif n’est donc pas de créer un énième chatbot propriétaire. Le visiteur utilise son propre assistant IA, tandis que votre site lui fournit le contexte nécessaire pour interroger vos contenus.

Dans ce tutoriel, nous allons voir comment créer et installer un module conversationnel IA sur un site Web avec IA Gateway Builder, étape par étape.

À retenir : l’IA Gateway Builder peut générer deux types de passerelles : un module Site Web, à intégrer directement dans vos pages, et un bookmarklet, destiné à un usage personnel dans le navigateur. Ce tutoriel se concentre sur le premier cas.

IA Gateway Builder, c’est quoi exactement ?

L’IA Gateway Builder est un Gem personnalisé conçu pour générer des scripts de passerelle conversationnelle.

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 afficher plusieurs assistants IA et transmettre automatiquement le contexte de la page consultée. Le système peut notamment utiliser l’opérateur site: pour orienter les recherches vers le domaine du site qui a installé la passerelle.

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.

Pourquoi installer un module 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.

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.

Installer le module 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.

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

Pourquoi ajouter une couche conversationnelle à son site

L’intérêt de l’IA Gateway Builder n’est pas simplement de placer un bouton « IA » sur une page.

Le véritable concept consiste à créer une passerelle entre vos contenus et les assistants IA que vos visiteurs utilisent déjà.

Pour un média, un blog expert, une documentation ou une base de connaissances, cela ouvre une nouvelle manière d’explorer les contenus.

Le parcours devient alors :

Je lis → je pose une question → je choisis mon IA → l’IA travaille à partir du contexte de la page et de votre domaine.

Et pour l’éditeur, la mise en œuvre reste relativement légère : le Gem génère le bloc HTML/CSS/JS qu’il suffit ensuite d’intégrer à son site.

👉 Pour découvrir le fonctionnement complet d’IA Gateway Builder et les deux versions Site Web / Bookmarklet, consultez notre article de référence sur EC TMT.