Apprenez à intégrer votre chatbot personnalisé sur votre site Web en toute simplicité.
Intégrer le chatbot Swiftron sur votre site web est simple et rapide. Avec une intégration unique et sans besoin de modifications continues, vous pouvez améliorer l'engagement de vos clients de manière fluide. Suivez ces étapes faciles pour commencer :
Étape 1 : Copiez le code d'intégration
Allez sur Page d'intégration Swiftron et copiez le code suivant :
<script async type="module" project-id="YOUR_PROJECT_ID" lang="auto" src="https://swiftron.eu/static/js/chatbot-boot.min.js"></script>
- project-id : Ceci est votre identifiant de projet unique et sera pré-rempli.
- lang : La langue cible pour votre chatbot. Vous pouvez utiliser :
- Tout code de langue valide de codes de langue ISO 639 (par exemple, 'en' pour l'anglais, 'de' pour l'allemand).
- 'auto', qui sélectionne la langue en fonction des paramètres du navigateur de l'utilisateur.
- 'site', qui utilise la langue spécifiée dans l'en-tête HTML du site web. Cela lit la valeur de
document.documentElement.lang
et définit la langue du chatbot en conséquence.
Étape 2 : Collez le code dans votre site web
Utiliser un créateur de site web :
Si vous utilisez des créateurs de sites web comme Jimdo, WordPress ou Squarespace, suivez leurs instructions pour insérer du code personnalisé :
- Jimdo : Comment insérer du code personnalisé
- WordPress : Utilisation du bloc HTML personnalisé
- Squarespace : Ajouter du code personnalisé à votre site
Gérer votre propre code :
Insérez le code d'intégration copié dans le HTML de chaque page où vous souhaitez que le chatbot apparaisse. Voici un exemple :
<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Site</title>
</head>
<body>
<div>Your Content</div>
</body>
<script async type="module"
project-id="YOUR_PROJECT_ID"
lang="auto"
src="https://swiftron.eu/static/js/chatbot-boot.min.js">
</script>
</html>
Configurer le bouton de basculement du chatbot (Optionnel)
Si vous avez déjà une boîte de communication existante ou si vous souhaitez créer votre propre bouton pour ouvrir ou fermer le chatbot, vous pouvez facilement l'intégrer en ajoutant son ID dans les paramètres de 'Bouton de basculement du chatbot' sur la Page d'intégration de Swiftron.
Exemple :
<button id="btn-toggle-chatbot">Votre icône de chatbot</button>
Il vous suffit de définir le champ 'Bouton de basculement du chatbot' avec l'ID de votre bouton, par exemple 'btn-toggle-chatbot'. Le type de bouton peut être n'importe quoi (par exemple, div, span). Vous n'avez pas besoin d'ajouter de JavaScript ou de gestionnaires d'événements ; le chatbot Swiftron détectera automatiquement ce bouton et gérera la logique nécessaire.
Si aucun élément avec l'ID fourni n'est trouvé, ou si le champ 'Bouton de basculement du chatbot' est vide, Swiftron créera son propre bouton de basculement du chatbot sur votre site.
Personnaliser le placement du chatbot (Optionnel)
Vous pouvez intégrer le chatbot dans un élément spécifique en spécifiant son ID dans le champ 'Personnaliser le placement du chatbot' sur la page d'intégration de Swiftron. Le chatbot apparaîtra à l'intérieur de cet élément et remplacera tout contenu existant à l'intérieur.
Dans ce cas, aucun bouton de basculement du chatbot ne sera rendu ou utilisé. Le chatbot sera toujours visible à l'intérieur de l'élément spécifié et ne pourra pas être minimisé par l'utilisateur.