Guide 2026 : Intégrer un Chatbot FAQ IA (Gemini) qui connaît vos articles sur Blogger

 

Bonjour à tous, c'est Lucas Martin, le créateur de Cash Astuce. Pour clôturer cette incroyable trilogie dédiée à l'IA et Automatisation, nous allons franchir le mur ultime de l'interactivité : le Chatbot Contextuel.

Les lecteurs de 2026 ne veulent plus chercher l'information, ils veulent la demander. Nous allons programmer un petit bouton de chat flottant en bas de l'écran. Lorsque le visiteur l'ouvre, il peut poser une question spécifique à l'article qu'il est en train de lire. Notre script Vanilla JS enverra le texte de la page à Gemini avec comme instruction stricte : "Réponds à l'utilisateur en te basant uniquement sur cet article."

Pourquoi ce Chatbot est le futur du blogging ?

Il ne s'agit pas d'un chatbot classique qui répond à tout et n'importe quoi. C'est un assistant de lecture dédié :

• Hyper-pertinence : Il aide le lecteur à extraire l'information dont il a besoin (ex: "Quelle est la ligne de code CSS pour la bordure ?").
• Réduction du support client : Si vous vendez des produits numériques ou des templates, le bot fait le SAV à votre place.
• Technologie ultra-légère : 100% JavaScript natif, aucune base de données lourde requise côté serveur.

Tutoriel : Installer le Chatbot Contextuel sur Blogger

Avant-dernier rappel : Thème > Sauvegarder. La règle d'or ne change jamais !

Étape 1 : Interface du Chat (CSS)

Ajoutez ce CSS pour le design du bouton flottant et de la fenêtre de discussion, optimisé pour le Light et Dark Mode :

/* Chatbot IA Contextuel - Cash Astuce */
#ca-chatbot-btn {
  position: fixed; bottom: 20px; right: 20px;
  background: #0056b3; color: white;
  width: 50px; height: 50px; border-radius: 50%;
  text-align: center; line-height: 50px;
  font-size: 24px; cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  z-index: 1000; transition: transform 0.3s;
}
#ca-chatbot-btn:hover { transform: scale(1.1); }
#ca-chat-window {
  position: fixed; bottom: 80px; right: 20px;
  width: 320px; height: 400px;
  background: #fff; border: 1px solid #ddd;
  border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  display: none; flex-direction: column;
  z-index: 1001; overflow: hidden; font-family: inherit;
}
.ca-chat-header {
  background: #0056b3; color: white; padding: 12px;
  font-weight: bold; display: flex; justify-content: space-between;
}
.ca-chat-body { flex: 1; padding: 10px; overflow-y: auto; background: #f9f9f9; font-size: 13px;}
.ca-chat-input-area { display: flex; border-top: 1px solid #ddd; }
.ca-chat-input-area input {
  flex: 1; padding: 10px; border: none; outline: none;
}
.ca-chat-input-area button {
  background: #0056b3; color: white; border: none;
  padding: 0 15px; cursor: pointer; font-weight: bold;
}
.ca-chat-msg { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; width: fit-content; max-width: 85%; }
.ca-chat-user { background: #0056b3; color: white; margin-left: auto; border-bottom-right-radius: 0; }
.ca-chat-ia { background: #e9ecef; color: #333; margin-right: auto; border-bottom-left-radius: 0; }

/* Dark Mode */
[data-theme="dark"] #ca-chat-window { background: #1a1a1a; border-color: #333; }
[data-theme="dark"] .ca-chat-body { background: #121212; }
[data-theme="dark"] .ca-chat-input-area { border-color: #333; }
[data-theme="dark"] .ca-chat-input-area input { background: #1a1a1a; color: white; }
[data-theme="dark"] .ca-chat-ia { background: #2a2a2a; color: #ddd; }

Étape 2 : Le cerveau IA du Chatbot (Vanilla JS)

Placez ce script juste avant </body>. Il lit le contenu de la page pour créer un "contexte" exclusif à l'API Gemini.

<!-- Script Chatbot IA Contextuel par Cash Astuce -->
<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
  const postBody = document.querySelector('.post-body');
  if (!postBody) return;

  // Création des éléments DOM
  const btn = document.createElement('div');
  btn.id = 'ca-chatbot-btn'; btn.innerHTML = '💬';
  
  const chatWin = document.createElement('div');
  chatWin.id = 'ca-chat-window';
  chatWin.innerHTML = `
    
Assistant IA Cash Astuce ✖
    

      
Bonjour ! Avez-vous une question sur cet article ?
    
    

      
      
    
  `;
  
  document.body.appendChild(btn);
  document.body.appendChild(chatWin);

  btn.onclick = () => { chatWin.style.display = chatWin.style.display === 'flex' ? 'none' : 'flex'; };
  document.getElementById('ca-chat-close').onclick = () => { chatWin.style.display = 'none'; };

  const inputField = document.getElementById('ca-chat-input');
  const chatBody = document.getElementById('ca-chat-body');
  
  document.getElementById('ca-chat-send').onclick = sendToIA;
  inputField.addEventListener('keypress', function(e) { if(e.key === 'Enter') sendToIA(); });

  async function sendToIA() {
    const question = inputField.value.trim();
    if (!question) return;

    // Affiche le message utilisateur
    chatBody.innerHTML += `
${question}
`;
    inputField.value = '';
    chatBody.scrollTop = chatBody.scrollHeight;
    
    // Affiche le loader IA
    const loaderId = 'loader-' + Date.now();
    chatBody.innerHTML += `
L'IA réfléchit...
`;
    chatBody.scrollTop = chatBody.scrollHeight;

    const apiKey = 'VOTRE_CLE_API_GEMINI_ICI';
    const textContext = postBody.innerText.substring(0, 3000);
    
    // Prompt strict pour lier l'IA au contexte
    const prompt = `Tu es l'assistant du blog Cash Astuce. L'utilisateur te pose une question. Tu DOIS répondre de manière courte et cordiale en te basant UNIQUEMENT sur le texte suivant. Si la réponse n'est pas dans le texte, dis "Désolé, l'article ne mentionne pas cela." Voici le texte de l'article : ${textContext} ---- Voici la question de l'utilisateur : ${question}`;

    try {
      const response = await fetch(`[https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=$](https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=$){apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })
      });
      const data = await response.json();
      const aiResponse = data.candidates[0].content.parts[0].text;
      
      document.getElementById(loaderId).innerHTML = aiResponse.replace(/\n/g, '
');
    } catch (err) {
      document.getElementById(loaderId).innerHTML = 'Erreur de connexion API.';
    }
    chatBody.scrollTop = chatBody.scrollHeight;
  }
});
//]]>
</script>
</b:if>

Conclusion

Quelle évolution vertigineuse ! Votre blog vient de se doter de sa propre intelligence artificielle dédiée au support lecteur. Aucun serveur lourd, aucune base de données coûteuse : juste de l'optimisation front-end à l'état pur.

Observez la cohérence globale de notre Silo IA : nous avons commencé par résumer les articles, puis nous avons ajouté le Générateur de Quiz interactif pour tester le savoir, et aujourd'hui, nous bouclons la boucle avec un assistant virtuel qui lit avec vos lecteurs. C'est l'essence même d'une UX 2026 exceptionnelle. Implémentez-le et faites discuter vos lecteurs avec votre contenu !