Intégration sur un site internet
Introduction
Cette documentation vous guide à travers le processus d'intégration de votre chatbot Semantics Chat sur votre site web. Cette fonctionnalité permet à vos visiteurs d'interagir avec votre application LLM directement depuis votre site, offrant ainsi une expérience utilisateur améliorée et un accès facile à vos contenus et services.
Prérequis
Avant de commencer l'intégration, assurez-vous de disposer des éléments suivants :
- Une application LLM configurée et fonctionnelle
- Un accès à la console d'administration de Wikit Semantics
- Des droits d'édition sur le site web où vous souhaitez intégrer le chatbot
Étapes d'intégration
1. Accéder à l'interface d'intégration
Rendez-vous dans l'onglet "Interface" de la console “Wikit Semantics”.
2. Obtenir le code d'intégration
Dans l'encart "Options d'intégration", cliquez sur le menu kebab (⋮) puis sélectionnez "Voir le code".
3. Copier le code d'intégration
Le code d'intégration de Semantics Chat s'affiche dans une fenêtre modale. Copiez le code avec le bouton en bas à droite.
4. Intégrer le code sur votre site
Ajoutez le code copié dans la partie <body> de votre page HTML. Si vous utilisez un système de gestion de contenu (CMS), insérez-le dans la section appropriée selon votre plateforme.
<body>
<script type="text/javascript" src="https://semantics-chat.wikit.ai/script.js"></script>
<script type="text/javascript">
wrapSemanticsChat({
customDomain: 'votre-domaine',
organizationSlug: 'votre-organisation',
llmAppSlug: 'votre-app-slug',
color: '#000000',
chatButtonIcon: {
height: '48px',
width: '48px'
},
chatButtonTooltip: {
text: 'Coucou'
},
position: {
right: '1rem',
left: 'auto',
bottom: '1rem'
}
});
</script>
<body>5. Vérifier l'intégration
Une fois le code intégré, rafraîchissez votre page web. L'icône de votre chatbot devrait apparaître à l'emplacement défini (par défaut, en bas à droite).
6. Tester le fonctionnement
Cliquez sur l'icône du chatbot pour vérifier qu'il s'ouvre correctement et testez quelques interactions pour vous assurer que tout fonctionne comme prévu.
Personnalisation de l'apparence
Vous pouvez personnaliser l'apparence de votre chatbot en modifiant les paramètres dans l'interface "Options d'intégration" :
- App LLM : sélectionnez l'application à intégrer.
- Position du bouton : définissez l'emplacement du bouton (bas droite, bas gauche, etc.)
- URL de l'icône : Personnalisez l'icône du bouton avec votre propre image.
- Taille du bouton : ajustez la taille en pixels.
- Couleur : choisissez la couleur du bouton pour l'harmoniser avec votre charte graphique.
- Texte de l'info-bulle : personnalisez le texte qui apparaît au survol du bouton.
Note importante : après chaque modification des paramètres d'affichage, vous devez générer un nouveau code d'intégration et le réintégrer sur votre site.
Avancé : Passage de variables personnalisées
Cette fonctionnalité permet de transmettre des informations contextuelles à votre App via des paramètres personnalisés. Ces variables seront accessibles dans le prompt de votre application Wikit via la syntaxe Mustache {{nom_variable}} (ne pas copier ce bloc).
Cas d'usage
Les paramètres personnalisés sont utiles pour :
- Transmettre des informations sur l'utilisateur connecté (nom, rôle, ID)
- Passer des données sur le contexte de navigation (page actuelle, langue, etc.)
- Enrichir les réponses de l'App avec des informations spécifiques à votre site
Implémentation
Initialisation avec des paramètres
<script type="text/javascript" src="https://semantics-chat.wikit.ai/script.js"></script>
<script type="text/javascript">
const chatApi = wrapSemanticsChat({
customDomain: 'votre-domaine',
organizationSlug: 'votre-organisation',
llmAppSlug: 'votre-app-slug',
// Vos paramètres habituels
// Ajout de paramètres personnalisés
customParams: {
userId: '12345',
userRole: 'premium',
currentPage: 'pricing'
}
});
</script>Modification dynamique des paramètres
Vous pouvez modifier les paramètres à tout moment durant l'exécution :
// Exemple : mise à jour lors d'un changement de page
chatApi.setCustomParams({
currentPage: 'checkout',
cartTotal: '150'
});Important : setCustomParams() remplace complètement les paramètres existants. Assurez-vous de passer tous les paramètres nécessaires à chaque appel.
Utilisation dans le prompt
Les variables sont accessibles dans votre prompt Wikit avec la syntaxe Mustache :
Bonjour {{userId}}, en tant qu'utilisateur {{userRole}},
vous êtes actuellement sur la page {{currentPage}}.Dépannage et FAQ
Pourquoi l'apparence de mon chatbot ne change pas malgré la modification des paramètres ?
En changeant les paramètres d'affichage, vous avez généré un nouveau script d'intégration. Vous devez remplacer l'ancien script sur votre site par ce nouveau code pour que les changements prennent effet.
Pourquoi me demande-t-on de me connecter à un compte Wikit pour utiliser le chatbot ?
Pour permettre l'utilisation du chatbot sans authentification, vous devez configurer l'application en mode public. Vérifiez le paramètre "Statut d'accès" dans les paramètres de l'application LLM et assurez-vous qu'il est défini sur "Public".
Le chatbot ne s'affiche pas sur mon site. Que faire ?
Vérifiez les points suivants :
- Assurez-vous que le code est correctement intégré dans la partie
<body>de votre page HTML - Vérifiez que votre site n'a pas de blocage de scripts (Content Security Policy)
- Consultez la console de développeur de votre navigateur pour identifier d'éventuelles erreurs.
Exemple de code d’intégration :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Semantic Chat</title>
</head>
<body>
<script type="text/javascript" src="https://semantics-chat.wikit.ai/chat-embed.js"></script>
<script type="text/javascript">
wrapSemanticsChat({
organizationSlug: 'Wikit', // L'identifiant de l'organisation
llmAppSlug: "mon-slug", // L'identifiant de l'application, optionnel.
color: '#243469', // La couleur d'arrière plan du bouton de chat et du bandeau en haut de la fenêtre.
chatWindow: {
height: '80%', // La hauteur de la fenêtre.
width: '30%', // La largeur de la fenêtre.
title: null, // Le titre de l'iframe
},
openFullScreenOnOpenPanel: true, // Ouvrir le chat en plein écran, quand le panneau des commandes s'ouvre
chatButtonIcon: { // Paramétrage du bouton de chat.
url: null, // L'URL de l'image du bouton de chat.
altText: 'Image avatar', // Text alternatif pour l'image (accessibilité).
height: '50px', // Hauteur du bouton de chat.
width: '50px', // Largeur du bouton de chat.
borderRadius: '50%', // Rayon de la bordure du bouton de chat.
},
chatButtonTooltip: { // Afficher une bulle de texte à côté du bouton de chat.
text: 'Discuter avec l\'assistant', // Le texte du message
backgroundColor: null, // La couleur d'arrière plan.
textColor: null, // La couleur du texte.
visibility: 'hidden', // La visibilité de la bulle au passage de la souris ('hidden') ou tout le temps ('visible').
},
headerButtons: { // Le texte d'accessibilité des boutons au haut de la fenêtre du webchat.
color: '#fff', // Icon fill / stroke color
closeIconDescription: 'Fermer la fenêtre',
launchIconDescription: 'Ouvrir dans un nouvel onglet',
maximizeIconDescription: 'Agrandir la fenêtre',
minimizeIconDescription: 'Rétrécir la fenêtre',
},
opening: { // L'état (ouvert / fermé) du webchat en arrivant sur la page. Noter qu'une ouverture automatique n`'est pas possible sur mobile.
mode: 'open', // 3 modes possibles, ouvert ('open'), fermé ('close') ou ouvert après un délais ('delay').
delay: 0, // Le délais en millisecondes pour l'ouverture du webchat.
memorize: true, // Mémoriser l'état d'ouverture du webchat.
animations: {
open: {
duration: 350, // La durée de l'animation en millisecondes.
easing: 'ease-in-out', // L'effet de l'animation.
},
maximize: {
duration: 350, // La durée de l'animation en millisecondes.
easing: 'ease-in-out', // L'effet de l'animation.
},
minimize: {
duration: 350, // La durée de l'animation en millisecondes.
easing: 'ease-in-out', // L'effet de l'animation.
},
}
},
position: {
right: '1rem',
left: 'auto',
bottom: '1rem',
},
});
</script>
</body>
</html>