Comment ajouter le widget chatbot à mon site Web ?

Le Hexabot Le widget de chat en direct est un widget embarquable basé sur React qui vous permet d'intégrer une fonctionnalité de chat en temps réel sur votre site web. Ce guide vous expliquera comment ajouter le widget à votre site, le personnaliser selon vos besoins et gérer ses paramètres.

Intégrer le widget de chatbot dans un site Web

Intégration du widget de chat

Une fois que vous avez construit le widget, l'intégrer sur n'importe quelle page web est simple. Voici comment l'ajouter :

Instructions étape par étape

1. Inclure les scripts requis: Tout d'abord, incluez les bibliothèques React et ReactDOM, ainsi que le script du widget Hexabot.

   <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
   <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="<<WIDGET_URL>>/hexabot-widget.umd.js"></script>

2. Ajouter le conteneur du widget: Créez un conteneur où le widget sera rendu.

   <div id="hb-chat-widget"></div>

3. Attacher le Shadow DOM: Cela empêche le CSS de votre site d'entrer en conflit avec le CSS du widget de chat en utilisant le shadow DOM.

   <script>
     // Créez la racine shadow et attachez-la au conteneur du widget
     const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
     const shadowContainer = createElement("div");
     document
         .getElementById('hb-chat-widget')
         .attachShadow({ mode: 'open' })
         .append(
           shadowContainer,
           createElement("link", {
             rel: "stylesheet",
             href: "<<WIDGET_URL>>/style.css"
           })
         );
   
     // Rendre le widget à l'intérieur de la racine shadow
     ReactDOM.render(
       React.createElement(HexabotWidget, {
         apiUrl: 'https://api.votredomaine.com',
         channel: 'web-channel'
       }),
       shadowContainer,
     );
   </script>

Utiliser le CDN officiel du widget

Si vous souhaitez utiliser le widget officiel et recevoir des mises à jour automatiquement, vous pouvez utiliser l'URL CDN suivante :

<script src="https://cdn.jsdelivr.net/npm/hexabot-chat-widget@latest/dist/"></script>

Ou, vous pouvez indiquer une version spécifique en remplaçant le tag latest par la version du widget :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/"></script>

Ces scripts chargeront le widget Hexabot directement depuis le CDN JsDelivr, qui récupère à partir du paquet publié sur le registre NPM.

Paramètres du widget

Paramètres du widget du canal web

Les paramètres du widget peuvent être gérés via l'administration Hexabot dans le menu latéral gauche (accédez à "Paramètres > Canal Web"). Ci-dessous se trouve une liste de paramètres personnalisables :

• Types MIME d'upload autorisés: Définissez les types de fichiers que les utilisateurs peuvent télécharger (par ex., audio, images, texte).

• Taille maximale de téléchargement: Définissez la taille maximale des fichiers pour les téléchargements (en octets).

• Activer les fonctionnalités: Activez ou désactivez des fonctionnalités telles que le partage de géolocalisation, le téléversement de pièces jointes et le sélecteur d'émojis.

• Avatar du chatbot: Spécifiez l'URL de l'avatar pour le chatbot (par ex., https://eu.ui-avatars.com/api/?name=Hexa+Bot&size=64).

• Titres de la fenêtre de chat et du widget: Définissez des titres personnalisés pour la fenêtre de chat et le widget.

• Thème du widget: Choisissez un thème de couleurs pour le widget (par ex., sarcelle).

• Message de salutation: Personnalisez le message de bienvenue (par ex., "Bienvenue ! Prêt à commencer une conversation avec notre chatbot ?").

• Menu persistant et paramètres d'entrée: Affichez un menu persistant, activez le bouton 'Commencer' et gérez la saisie utilisateur.

• Domaines autorisés: Définissez les domaines où le widget peut être intégré (par ex., http://localhost:8080).

• Jeton de vérification: Définissez un jeton pour vérifier les requêtes du widget.

Personnalisation du widget

Le widget de chat en direct Hexabot vous permet de personnaliser son apparence et son comportement pour correspondre à votre site. Vous pouvez :

• Modifier les couleurs et les polices: Adaptez le design du widget de chat à l'identité de votre site en modifiant ses styles SCSS.

• Configurer les paramètres utilisateur: Personnalisez les paramètres utilisateur comme la langue du chatbot et les préférences de réponse.

Pour construire votre propre widget, vous pouvez modifier les styles ou le comportement en utilisant le code source du widget.

Exemples

À titre de preuve de concept, nous avons développé un plugin WordPress qui facilite l'intégration du widget de chat dans un site WordPress.

Résumé

Ajouter le widget de chat en direct Hexabot à votre site Web est simple et offre de solides options de personnalisation pour l'adapter à vos besoins spécifiques. En exploitant les styles SCSS du widget, le shadow DOM pour un style isolé et les différents paramètres de l'interface d'administration Hexabot, vous pouvez intégrer de manière transparente une fonctionnalité de chatbot en temps réel à votre site.

Si vous avez des questions ou besoin d'aide, n'hésitez pas à contacter la communauté Hexabot ou à consulter la documentation Hexabot.