Les assistants IA ajoutent une nouvelle dépendance à votre site : leur interface peut ralentir la page avant même la première question. Ce guide propose une intégration progressive sur une préproduction, avec un contrôle séparé du chargement et des réponses.
1. Choisir une intégration et définir ses limites
Les connecteurs d’AI Engine illustrent la possibilité de relier WordPress à OpenAI, Anthropic ou Google. Comparez surtout les architectures :
| Solution | Intérêt | Point à vérifier |
|---|---|---|
| Extension comme AI Engine | Configuration dans WordPress | Compatibilité PHP, modules et scripts activés |
| Widget d’un service hébergé | Exploitation déléguée | Abonnement, transferts et poids du widget |
| Interface avec relais serveur | Contrôle des échanges | Développement, surveillance et maintenance |
Pour chaque candidat, relevez la version, les prérequis et les limites de votre formule. Ne déduisez pas la compatibilité avec votre thème d’une simple présence dans le catalogue. Désactivez les fonctions inutiles : fichiers, voix, mémoire et actions sur le site.
Préparez cinq questions publiques représentatives. Excluez commandes clients, identifiants et contenus privés du premier périmètre.
2. Connecter le fournisseur et charger à la demande
Dans l’extension, configurez une connexion fournisseur côté serveur et sélectionnez un modèle disponible pour votre compte. Séparez les clés de test et de production. Avec un relais sur mesure, chargez le secret depuis l’environnement serveur ; le navigateur appelle votre relais, jamais le fournisseur avec votre clé.
Fixez côté serveur une longueur de message, un nombre de requêtes et une durée maximale. Une clé cachée ne protège pas contre l’abus d’un relais public. Prévoyez également une réponse de secours avec un lien de contact.
Pour une interface développée par votre équipe, ce déclencheur charge un module local au premier clic. Le bouton et le module doivent déjà exister ; ce code ne configure pas AI Engine :
const button = document.querySelector("#open-chat");button?.addEventListener("click", async () => { button.disabled = true; try { const chat = await import("/assets/chat.js"); await chat.open(); } catch { button.textContent = "Contact support"; } finally { button.disabled = false; }}, { once: true });Ajoutez une gestion accessible du focus et un véritable lien de secours. Pour un widget tiers, utilisez son mécanisme documenté de chargement différé, sans retarder un script dont dépend le paiement.
3. Vérifier performance, coûts et confidentialité
Dans DevTools, comparez la même page sans chatbot, avant ouverture et après ouverture : requêtes, JavaScript, interaction du menu et délai de première réponse. Testez aussi sur mobile et en cas de panne du fournisseur.
Comptez séparément abonnement, tokens entrants et sortants, recherche documentaire et hébergement. Utilisez les tarifs du modèle choisi et les consommations mesurées ; imposez aussi un plafond applicatif. Documentez les destinataires des messages, la conservation et la suppression. Ne journalisez pas les conversations complètes par défaut.
Erreurs fréquentes
Charger le widget sur toutes les pages, placer une clé dans JavaScript ou mettre en cache des réponses privées entre visiteurs rend l’intégration difficile à maîtriser.
FAQ et vérification finale
Le chargement différé accélère-t-il le modèle ? Non, il réduit le travail initial du navigateur.
L’extension gratuite rend-elle les réponses gratuites ? Vérifiez séparément la facturation du fournisseur.
Validez l’absence de clé dans le réseau du navigateur, le refus des dépassements, le fonctionnement du contact de secours et la réactivité des pages avant déploiement.