Prérequis
Assurez-vous d'avoir créé un Widget ViaSay dans la section Integrate
Consultez cette page pour vous guider.
Prérequis techniques
Un accès au code source HTML de votre site web
Le jeton du widget, disponible dans l'onglet Integration de votre tableau de bord ViaSay
Des connaissances de base en HTML
Installation
👍 Déployez en mode invisible, lancez quand vous êtes prêt
Réglez Audience Distribution sur 0 % pendant la configuration. Le code du widget est déployé en production mais reste masqué. Lorsque vous êtes prêt à lancer, ajustez le pourcentage dans Integration pour contrôler sa visibilité, sans aucune modification de code.
1. Copier le code de votre Widget
Dans votre tableau de bord ViaSay, allez dans Build > Integrate > Channels. Copiez l'extrait de code d'installation fourni.
2. Ajouter le code à votre site web
Collez le code du widget à la fin de la balise <body>, juste avant la balise fermante </body> de votre modèle HTML.
<!DOCTYPE html>
<html>
<head>
<title>Your Website</title>
</head>
<body>
<!-- Your website content -->
<!-- ViaSay Widget - Add before closing body tag -->
<script>
var widget = document.createElement("destygo-webchat");
widget.setAttribute('id', "destygo_widget");
widget.setAttribute('class', "destygo_widget");
widget.setAttribute('token', "YOUR_TOKEN_HERE");
document.body.appendChild(widget);
</script>
<script type="text/javascript" src="https://chatbot.viasay.io/widget/destygo-webchat.js"></script>
</body>
</html>Pourquoi à la fin du body ? Placer le code du widget avant </body> garantit que le contenu de votre page se charge en premier et évite que le widget ne bloque l'affichage des éléments essentiels de la page.
3. Déployer les modifications
Enregistrez votre fichier HTML et déployez-le sur votre serveur web. Le widget se charge automatiquement sur chaque page qui contient ce code.
Vérification
Vérifier que le Widget est en ligne
Ouvrez votre site web dans un navigateur
Repérez l'icône de chat ViaSay en bas à droite
Cliquez sur l'icône pour ouvrir la fenêtre de chat
Envoyez un message de test
Cas d'intégration courants
Applications monopages (SPA)
Pour les applications React, Vue ou Angular, ajoutez l'extrait à votre fichier principal index.html, dans le répertoire public.
Sites basés sur des modèles
Pour WordPress, Shopify ou des plateformes similaires, ajoutez le code au fichier de modèle du pied de page de votre thème afin qu'il s'applique à toutes les pages.
Générateurs de sites statiques
Pour Next.js, Gatsby ou Hugo, ajoutez l'extrait à votre composant de mise en page ou à votre modèle de base.
Dépannage
Problème | Solution |
|---|---|
Le Widget n'apparaît pas | Vérifiez que le jeton présent dans votre code correspond à celui de l'onglet Integration |
Le Widget se charge lentement | Déplacez le script à la fin de |
Plusieurs widgets apparaissent | Assurez-vous que l'extrait de code n'est inclus qu'une seule fois dans votre modèle |
Erreurs CORS dans la console | Vérifiez que votre domaine figure dans la liste des domaines autorisés, dans les paramètres du tableau de bord ViaSay |
⚠️ Ne placez pas le code du widget dans la section <head>. Cela ralentit le chargement de la page et dégrade l'expérience utilisateur.
📌 Conseils d'intégration
Veillez à autoriser correctement les domaines suivants dans votre Content Security Policy (CSP) :
wss://_.mindsay.com
wss://*.laiye.com
Pour l'intégration Zendesk ou d'autres services, consultez leur documentation spécifique
Options avancées
Déploiement par URL : utilisez Google Tag Manager pour choisir les pages qui affichent le widget et personnaliser les règles de déclenchement. [Voir le guide d'intégration GTM →]
Personnalisation du style : modifiez l'apparence et la position du widget dans l'onglet Format & Design de votre tableau de bord.
Plusieurs environnements : générez des jetons distincts pour les environnements de préproduction et de production dans les paramètres Advanced.
Étapes suivantes
Configurez l'apparence du widget dans Format & Design
Configurez des messages d'accueil personnalisés dans Greetings