websitechatbot.ch

Intégrer le chatbot à votre site web

Vous insérez une seule ligne de code à un seul endroit — et le chatbot apparaît alors automatiquement sur chaque page de votre site. Vous n'avez pas besoin de modifier chaque page individuellement.

Le code

Copiez votre code de widget personnel depuis le tableau de bord. Il ressemble à ceci, avec votre propre slug à la place de VOTRE-SLUG :

<script src="https://websitechatbot.ch/widget.js" data-slug="IHR-SLUG" async></script>

Le nom, la couleur et l'avatar se règlent dans le tableau de bord sous Paramètres → Apparence. Vous n'avez pas besoin de modifier le code pour cela.

Guides par constructeur de site

Cliquez sur votre constructeur de site — le guide détaillé pas à pas s'ouvrira. Si votre fournisseur n'est pas listé, écrivez-nous simplement : info@websitechatbot.ch.

Site HTML statique ou code écrit à la main
  1. Si vous utilisez un include de pied de page commun (par ex. footer.html, un include PHP, ou un template Hugo/Jekyll/Eleventy) : collez le code widget à cet endroit, une seule fois, directement avant &lt;/body&gt;. Cela suffit pour tout le site.
  2. Si chaque page est un fichier HTML séparé et qu'il n'y a pas de template commun : le code doit effectivement être inséré avant &lt;/body&gt; dans chaque fichier. Avec VS Code ou Sublime Text, ouvrez tous les fichiers et utilisez Rechercher & Remplacer dans plusieurs fichiers : cherchez &lt;/body&gt;, remplacez par votre code widget suivi de &lt;/body&gt;. Terminé en 10 secondes.
WordPress
Ce guide fonctionne avec n'importe quel thème WordPress (classique ou thème Block) et sans que vous ayez à éditer directement des fichiers de code. Vous installez un plugin gratuit appelé « WPCode » qui gère le code à votre place.
  1. Ouvrez votre navigateur et tapez dans la barre d'adresse : votre-site.ch/wp-admin (remplacez votre-site.ch par votre propre adresse). Connectez-vous avec votre nom d'utilisateur et votre mot de passe WordPress.
  2. Dans le menu vertical à gauche : passez la souris sur Extensions et cliquez sur Ajouter (en anglais : Add New).
  3. Dans le champ de recherche en haut à droite, tapez WPCode. Le premier résultat s'appelle WPCode — Insert Headers and Footers + Custom Code Snippets. Cliquez sur le bouton bleu Installer maintenant à côté, puis attendez quelques secondes que Activer apparaisse — cliquez aussi sur celui-ci.
  4. Une nouvelle entrée Code Snippets apparaît dans le menu de gauche. Passez la souris dessus et cliquez sur Header & Footer (en français parfois En-tête & Pied de page).
  5. Vous voyez trois grands champs de texte : Header, Body, Footer. Cliquez dans le champ Footer et collez-y votre code widget (Ctrl/Cmd + V).
  6. Cliquez sur le bouton bleu Save Changes (Enregistrer) en haut à droite.
  7. Terminé. Ouvrez votre site dans un nouvel onglet et appuyez sur Ctrl + Shift + R (Windows) ou Cmd + Shift + R (Mac) pour un rechargement complet. Le bouton de chat apparaît en bas à droite.
Wix
Le code personnalisé n'est disponible que dans les plans Wix payants. De plus, votre site doit être publié et utiliser un domaine connecté (par ex. votrenom.ch — pas votrenom.wixsite.com). Cela ne fonctionne malheureusement pas sur le plan gratuit.
  1. Allez sur wix.com et connectez-vous.
  2. Vos sites sont listés — cliquez sur Gérer le site (ou Select & Edit Site) sur celui qui vous intéresse.
  3. Dans le menu de gauche du tableau de bord : Paramètres (Settings) — généralement tout en bas.
  4. Faites défiler jusqu'à la section Développement & intégrations (Development & integrations) et cliquez sur Custom Code.
  5. Cliquez sur le bouton + Add Custom Code en haut à droite.
  6. Collez votre code widget dans le grand champ de texte Paste the code snippet here.
  7. Réglez les options suivantes : Add Code to Pages = All pages et Load code once. Place Code in = Body – end.
  8. Cliquez sur Apply (Appliquer) en bas à droite. Ouvrez votre site dans un nouvel onglet et rechargez-le complètement — le bouton de chat apparaît.
Squarespace
Code Injection n'est disponible qu'à partir du plan Core (Squarespace a renommé ses plans fin 2024 — les niveaux actuels sont Basic, Core, Plus, Advanced). Le plan Basic ne propose pas cette fonction ; les anciens abonnements « Personal » restent également bloqués. Si vous êtes sur Basic, vous devrez passer à Core (quelques francs supplémentaires par mois).
  1. Connectez-vous sur squarespace.com.
  2. Cliquez sur le site que vous souhaitez modifier pour ouvrir son aperçu.
  3. Dans le menu de gauche : Settings (Paramètres).
  4. Cliquez sur Advanced (Avancé), puis sur Code Injection.
  5. Collez votre code widget dans le champ Footer. Pas dans « Header » ou « Lock Page ».
  6. Cliquez sur Save en haut à gauche. Ouvrez votre site dans un nouvel onglet et faites un rechargement complet (Ctrl/Cmd + Shift + R).
Jimdo
Ce guide s'applique à Jimdo Creator. Si vous utilisez Jimdo Dolphin (le nouvel éditeur IA qui a généré votre site automatiquement), l'insertion de code personnalisé n'est pas possible — c'est une limitation de Jimdo Dolphin lui-même. Dans ce cas, écrivez-nous à info@websitechatbot.ch et nous trouverons une solution.
  1. Connectez-vous sur jimdo.com et ouvrez votre site.
  2. Cliquez sur Modifier (Edit) en haut à droite pour entrer en mode édition.
  3. Ouvrez le menu en haut à gauche (trois traits / icône hamburger) et sélectionnez Paramètres → Edit Head (ou Modifier l'en-tête).
  4. Collez votre code widget dans le champ de texte et cliquez sur Enregistrer.
  5. Bien que le code soit dans la section Head, le widget se charge de manière asynchrone et apparaît quand même en bas à droite de chaque page. Rechargez votre site pour tester.
Shopify
  1. Connectez-vous à votre administration Shopify (votreshop.myshopify.com/admin).
  2. Dans le menu de gauche : Boutique en ligne → Thèmes.
  3. Sur votre thème actuel (en haut de la liste), cliquez sur le bouton à trois points ⋯ à côté de Personnaliser, et choisissez Modifier le code.
  4. À gauche, vous voyez une arborescence de fichiers. Ouvrez le dossier Layout et cliquez sur le fichier theme.liquid.
  5. Appuyez sur Ctrl/Cmd + F pour ouvrir une recherche et tapez &lt;/body&gt;. Placez le curseur sur la ligne vide juste au-dessus et collez votre code widget.
  6. Cliquez sur Save en haut à droite. Ouvrez votre boutique dans un nouvel onglet et rechargez-la — le bouton de chat apparaît en bas à droite.
Webflow
Le code personnalisé ne s'exécute que sur les sites avec un Site Plan actif. Sur une URL gratuite .webflow.io sans plan, le code ne se chargera pas. Si vous utilisez Webflow gratuitement, vous devrez d'abord activer un Site Plan (à partir d'environ USD 14/mois).
  1. Ouvrez votre projet dans le Designer Webflow. En haut à gauche à côté du logo Webflow : cliquez sur l'icône en forme de roue dentée pour Site Settings.
  2. Cliquez sur l'onglet Custom Code.
  3. Faites défiler jusqu'à la section Footer Code (avant la balise body de fermeture) et collez-y votre code widget.
  4. Cliquez sur Save Changes.
  5. De retour dans le Designer : en haut à droite, cliquez sur Publish → Publish to Selected Domains. Important : le code ne devient actif qu'après la publication — l'aperçu seul ne suffit pas.
IONOS MyWebsite
Deux points à savoir : (1) Le module HTML (Code Head personnalisé) n'est pas inclus dans tous les plans MyWebsite Now — les plans d'entrée les moins chers ne l'ont pas. Si vous ne trouvez pas « Code Head personnalisé » dans Paramètres de votre éditeur, vous devrez passer à un plan qui inclut le module HTML. (2) IONOS ne charge le code personnalisé qu'après que les visiteurs ont accepté la bannière de cookies. Le bouton de chat apparaît donc après le clic sur « Accepter ». Si un visiteur refuse les cookies, le chatbot ne s'affichera pas. Ce guide concerne MyWebsite Now ; MyWebsite Creator est un produit séparé avec un éditeur différent — si vous utilisez Creator, écrivez-nous pour les bonnes étapes.
  1. Connectez-vous sur ionos.fr (ou ionos.ch) et ouvrez l'éditeur MyWebsite.
  2. Dans le menu de gauche : Paramètres.
  3. Cliquez sur Code Head personnalisé (en anglais : Custom Head Code).
  4. Collez votre code widget dans le champ de texte et cliquez sur Enregistrer.
  5. Cliquez sur Publier en haut à droite pour que le changement soit en ligne.
STRATO Homepage-Baukasten
STRATO ne propose pas d'injection de code globale. À la place, vous placez le widget une seule fois dans une zone qui apparaît sur chaque page — généralement le bloc footer. Si vous n'avez qu'une page d'accueil, il suffit d'y placer le widget.
  1. Connectez-vous à votre espace client STRATO et cliquez sur Webseite bearbeiten (Modifier le site).
  2. Dans l'éditeur : Inhaltselemente → Standardelemente. Cherchez l'élément Embed.
  3. Maintenez l'élément Embed avec la souris et glissez-le dans votre zone footer (ou une autre zone visible sur chaque page de votre site).
  4. Une fois l'élément Embed placé, vous voyez une petite icône en forme de roue dentée en haut à droite de l'élément. Cliquez dessus.
  5. Dans la fenêtre popup : collez votre code widget dans le champ Embed-Code et cliquez sur Speichern (Enregistrer).
  6. Cliquez sur Veröffentlichen (Publier) en haut à droite de l'éditeur. Ouvrez votre site dans un nouvel onglet et rechargez-le complètement — le bouton de chat apparaît.
Hostpoint Sites
Hostpoint Sites ne propose pas d'injection de code globale. Placez le widget une seule fois dans la zone footer — dans la plupart des modèles Sites, le footer est partagé entre toutes les sous-pages. Si le footer de votre modèle n'est pas partagé entre les pages, vous devrez ajouter l'élément Embed sur chaque page individuellement.
  1. Connectez-vous au Hostpoint Control Panel et ouvrez votre site Sites en mode édition.
  2. Cliquez à un endroit de votre zone footer (la zone du bas qui apparaît sur chaque page) sur + Ajouter un élément.
  3. Sélectionnez l'élément Embed (ou Intégrer du HTML).
  4. Collez votre code widget dans le champ de texte et cliquez sur Appliquer ou Enregistrer.
  5. Cliquez sur Publier en haut. Rechargez votre site — le bouton de chat apparaît en bas à droite.
Localsearch (MyWEBSITE)
Localsearch (Swisscom Directories) crée et gère votre site internet en tant que service clé en main. Vous ne pouvez donc généralement pas ajouter de code vous-même — le moyen le plus fiable est de demander au support de Localsearch de l'ajouter pour vous. En tant que client·e, vous y avez droit, et c'est l'affaire de quelques minutes pour eux.
  1. Ouvrez le formulaire de support de Localsearch.
  2. Demandez au support d'insérer le code du widget dans le pied de page de votre site, ou juste avant la balise de fermeture &lt;/body&gt; — ainsi le chatbot apparaît sur toutes les pages. Utilisez simplement le modèle ci-dessous.
  3. VOTRE-SLUG est votre identifiant personnel. Voici comment le trouver : connectez-vous à votre tableau de bord et regardez la barre d'adresse de votre navigateur — votre identifiant est la partie après /dashboard/. Exemple : dans websitechatbot.ch/fr/dashboard/monentreprise-ch, l'identifiant est monentreprise-ch. Remplacez VOTRE-SLUG dans le modèle par exactement cette valeur.
  4. Dès que Localsearch confirme la mise en ligne, le bouton de chat apparaît en bas à droite. Rechargez votre site une fois (Ctrl + Maj + R).

Modèle à copier :

Bonjour,

Je suis client·e de MyWEBSITE et je souhaiterais ajouter un petit outil (un chatbot) sur mon site internet.

Pourriez-vous insérer la ligne de code suivante dans le pied de page de mon site, ou juste avant la balise de fermeture </body>, de manière à ce qu'elle soit présente sur l'ensemble des pages :

<script src="https://websitechatbot.ch/widget.js" data-slug="VOTRE-SLUG" async></script>

Merci de bien vouloir publier le site une fois la modification effectuée, et de me confirmer dès que c'est en ligne.

Avec mes remerciements et mes meilleures salutations
Google Sites
Attention : Google Sites exécute tout code intégré dans un cadre iframe fixe. Notre code widget se chargera, mais avec des limites : le bouton de chat reste bloqué dans ce rectangle (au lieu de flotter en bas à droite de la page), la fenêtre de chat ne peut pas s'étendre au-delà de ce rectangle, et vous devez ajouter l'embed manuellement sur chaque page — il n'y a pas d'injection globale. Si vous souhaitez essayer quand même, ou avez besoin d'aide pour passer à un constructeur qui fonctionne correctement, écrivez-nous à info@websitechatbot.ch — nous vous aiderons.

Vérifier

  1. Ouvrez votre site dans un nouvel onglet et faites un rechargement complet : Ctrl + Shift + R (Windows) ou Cmd + Shift + R (Mac). Cela contourne le cache du navigateur.
  2. Un bouton de chat circulaire doit apparaître en bas à droite en 1 à 2 secondes.
  3. Cliquez dessus → la fenêtre de chat s'ouvre. Posez une question sur votre entreprise (par ex. sur vos horaires d'ouverture) pour vérifier que les réponses correspondent à votre site.

Si rien n'apparaît

  • Ouvrez la console du navigateur (clic droit sur la page → Inspecter → onglet Console). Si vous y voyez un message d'erreur avec data-slug attribute is required, le slug est manquant ou mal saisi.
  • Le code est-il réellement enregistré ? De nombreux CMS exigent un clic supplémentaire sur « Publier » / « Publish » — enregistrer seul ne suffit souvent pas. Pour Webflow par exemple, il faut cliquer sur Publish to Selected Domains.
  • Content Security Policy : si votre site a une CSP stricte (très rare sur les sites de PME), autorisez script-src https://websitechatbot.ch et connect-src https://websitechatbot.ch.
  • Le widget est masqué par un autre élément : très rare. Écrivez-nous un e-mail, nous résolvons cela ensemble.

Aide à l'installation

Vous utilisez un autre constructeur de site ou l'installation ne fonctionne pas ? Répondez simplement à votre e-mail de bienvenue ou écrivez à info@websitechatbot.ch — nous vous aidons personnellement à l'installation, gratuitement.