Aller au contenu principal

Installer le widget Deskbolt sur votre site

Cette page est la check-list d'intégration du widget de chat IA Deskbolt. Votre dev interne, un webmaster freelance ou vous-même avec un copier-coller pouvez avoir le widget en ligne sur votre site en moins de cinq minutes. Pas de revue de code, pas de DNS à modifier, pas d'hébergement à configurer.

Le widget est une simple balise <script>. Une fois chargé, l'agent IA apparaît dans le coin de chaque page de votre site et qualifie les leads entrants en 159+ langues, 24h/24 et 7j/7.

Avant de commencer​

Vous avez besoin de :

  1. Un compte Deskbolt actif (provisionné par nous lors de votre souscription).
  2. Un accès Admin ou Manager à votre dashboard. Les Agents ne voient pas les paramètres du widget.
  3. La possibilité d'ajouter une balise <script> à votre site — soit éditer le HTML directement, soit utiliser ce que votre CMS appelle "code personnalisé", "embed", "scripts header/footer", ou "codes de tracking".

C'est tout. Pas besoin d'installer quoi que ce soit, de pointer un DNS, ni d'exposer une clé API.

1. Trouver votre Widget ID​

Chaque widget Deskbolt a un identifiant unique — votre Widget ID. C'est ce qui indique à nos serveurs quelle agence, quel agent IA et quel branding charger.

Pour le trouver, connectez-vous à votre dashboard sur www.deskbolt.com, puis dans la sidebar de gauche allez dans Settings → Widget :

Settings → Widget dans le dashboard Deskbolt

Faites défiler jusqu'à la carte Website Integration. Votre Widget ID et le script d'intégration complet s'y trouvent :

Carte Website Integration avec le script et le Widget ID

Plusieurs sites web

Vous pouvez faire tourner plusieurs widgets sur plusieurs sites sous la même agence Deskbolt — par exemple un widget sur le site principal de l'agence et un sur une landing page de programme dédié. Chaque widget a son propre ID, son propre agent IA assigné et son propre style. Pour créer un widget supplémentaire, contactez support@deskbolt.com — nous le provisionnons depuis votre dashboard.

2. Copier le script d'intégration​

Cliquez sur Copy dans la carte Website Integration. Votre presse-papiers contient maintenant un bloc <script> auto-injectant qui ressemble à ceci :

<!-- Deskbolt Chat Widget -->
<script>
  (function() {
    var script = document.createElement('script');
    script.src = 'https://www.deskbolt.com/widget.js';
    script.setAttribute('data-deskbolt-widget-id', 'YOUR_WIDGET_ID');
    script.setAttribute('data-deskbolt-api-base', 'https://www.deskbolt.com');
    document.body.appendChild(script);
  })();
</script>

Où YOUR_WIDGET_ID est remplacé par la valeur générée pour votre agence. Gardez ce snippet exactement tel quel — il est sûr de l'exposer publiquement. Le Widget ID n'est pas un secret ; il identifie votre agence comme un identifiant Google Analytics identifie un site.

Forme alternative plus simple

Si votre CMS n'accepte qu'une balise <script src> simple (pas de JavaScript inline), cette forme courte fonctionne aussi :

<script src="https://www.deskbolt.com/widget.js" data-deskbolt-widget-id="YOUR_WIDGET_ID"></script>

Les deux formes sont équivalentes. Le copier-coller plus long fourni par le dashboard est juste une mesure défensive — il fonctionne même quand le CMS retire les scripts qui ne sont pas enveloppés dans une fonction.

3. Placer le script sur votre site​

L'emplacement recommandé est juste avant la balise fermante </body>. De cette manière le widget se charge de façon asynchrone après le reste de votre page, sans aucun impact sur le temps d'affichage perçu par vos visiteurs.

<!DOCTYPE html>
<html>
  <head>
    <!-- contenu normal du head -->
  </head>
  <body>
    <!-- contenu normal de la page -->

    <!-- Deskbolt Chat Widget -->
    <script src="https://www.deskbolt.com/widget.js" data-deskbolt-widget-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Placer le script dans <head> fonctionne aussi, mais ce n'est pas recommandé — il se charge alors plus tôt et peut légèrement ralentir le premier affichage de la page sur connexion lente.

Le snippet du widget fonctionne sur toutes les pages de votre site. Ajoutez-le une seule fois dans votre template global (fichier header/footer, layout component, theme include, container GTM, etc.) et le widget apparaîtra sur l'ensemble du site.

4. Guides par plateforme​

WordPress​

La méthode recommandée pour installer le widget sur WordPress est le plugin officiel Deskbolt. Pas de code, pas d'édition de thème, pas de plugin tiers à maintenir.

Option 1 — Plugin officiel Deskbolt (recommandé)​

  1. Dans votre dashboard Deskbolt, allez dans Settings → Widget et faites défiler jusqu'à la carte WordPress Integration.

  2. Cliquez sur Download Plugin (ZIP). Vous récupérez un petit fichier .zip.

  3. Dans votre admin WordPress, allez dans Plugins → Add New → Upload Plugin.

  4. Choisissez le ZIP que vous venez de télécharger et cliquez sur Install Now, puis Activate Plugin.

  5. Le plugin apparaît maintenant dans votre liste de plugins installés :

    Plugin Deskbolt Chat Widget dans la liste des plugins WordPress

  6. Dans la sidebar WordPress, allez dans Settings → Deskbolt Widget :

    Page de réglages Deskbolt Widget dans l&#39;admin WordPress

  7. Collez votre Agency ID (c'est la même valeur que le Widget ID — copiez-la depuis votre dashboard Deskbolt, Settings → Widget → Website Integration).

  8. Vérifiez que Enable Widget est coché, puis cliquez sur Save Settings.

Le badge de statut en haut doit basculer sur Active and Running, et le widget apparaîtra sur toutes les pages de votre site WordPress en quelques secondes. L'option Show in Admin Area est utile si vous voulez tester le widget directement depuis l'admin WordPress sans quitter le dashboard.

Le plugin est signé et maintenu par Deskbolt, suit les bonnes pratiques de sécurité WordPress, et se met à jour depuis votre dashboard à chaque nouvelle version.

Option 2 — Installation manuelle (sans plugin Deskbolt)​

Si vous préférez ne pas ajouter de plugin, vous avez deux chemins manuels :

  • Plugin de scripts header/footer — installez l'un de Insert Headers and Footers (WPCode), Header Footer Code Manager, ou un équivalent. Collez le script d'intégration Deskbolt dans la section Footer (ou "scripts before </body>") du plugin et sauvegardez.
  • Modifier votre thème directement — collez le snippet dans le footer.php de votre thème, juste avant </body>. Nous recommandons d'utiliser un thème enfant pour que la modification survive aux mises à jour du thème.

Webflow​

  1. Ouvrez votre projet Webflow.
  2. Allez dans Project Settings → Custom Code.
  3. Collez le script d'intégration Deskbolt dans le champ Footer Code.
  4. Cliquez sur Save Changes, puis Publish votre site.

Le widget apparaîtra sur toutes les pages de votre site Webflow publié. Il n'apparaît pas dans la preview du Designer (Webflow retire les scripts personnalisés à cet endroit).

Wix​

  1. Ouvrez votre Wix Editor.
  2. Allez dans Settings → Custom Code (sous "Advanced" sur certains plans).
  3. Cliquez sur + Add Custom Code.
  4. Collez le script d'intégration Deskbolt.
  5. Choisissez Add Code to Pages → All Pages, placez en Body — End.
  6. Cliquez sur Apply, puis publiez votre site.

Custom Code est disponible sur les plans Wix payants. Le widget n'apparaîtra pas sur les sites Wix gratuits.

Squarespace​

  1. Ouvrez votre dashboard Squarespace.
  2. Allez dans Settings → Advanced → Code Injection.
  3. Collez le script d'intégration Deskbolt dans le champ Footer.
  4. Sauvegardez.

Code Injection nécessite un plan Business ou supérieur.

Shopify​

  1. Ouvrez votre admin Shopify.
  2. Allez dans Online Store → Themes.
  3. Sur votre thème actif, cliquez sur ... → Edit code.
  4. Ouvrez le fichier layout/theme.liquid.
  5. Collez le script d'intégration Deskbolt juste avant la balise fermante </body>.
  6. Sauvegardez.

Le widget apparaîtra sur toutes les pages de la boutique, y compris produit, collection et panier.

Framer​

  1. Ouvrez votre projet Framer.
  2. Allez dans Site Settings → General → Custom Code → End of <body> tag.
  3. Collez le script d'intégration Deskbolt.
  4. Publiez.

Google Tag Manager (GTM)​

Si vous gérez déjà vos scripts via GTM, vous pouvez déployer le widget Deskbolt sans toucher au code de votre site :

  1. Dans GTM, Tags → New → Custom HTML.
  2. Collez le script d'intégration Deskbolt.
  3. Définissez le Trigger sur All Pages (ou restreignez à des URLs spécifiques si vous ne voulez le widget que sur certaines pages).
  4. Save → Submit → Publish.

Applications single-page (React, Vue, Next.js, Nuxt, Angular, etc.)​

Ajoutez le script dans le HTML shell de votre app (typiquement index.html pour React/Vue, _document.tsx/_document.js pour Next.js, le champ head de nuxt.config.ts pour Nuxt, etc.) — pas à l'intérieur d'un composant. Les applications single-page montent et démontent les composants à chaque navigation, mais le widget doit persister à travers les changements de route.

Pour Next.js (pages/_document.tsx) :

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <script
          src="https://www.deskbolt.com/widget.js"
          data-deskbolt-widget-id="YOUR_WIDGET_ID"
        />
      </body>
    </Html>
  );
}

HTML statique / sites simples​

Collez le snippet dans votre fichier de layout / template global juste avant </body>. Si vous n'avez pas de template et que votre site est un seul index.html, collez-le là.

iframe / sous-pages embarquées​

Le widget fonctionne dans une iframe classique tant que cette iframe est sur un domaine que vous contrôlez (pour que le stockage cross-origin fonctionne correctement). Il n'est pas supporté quand l'iframe tourne dans un outil tiers qui sandboxe les scripts (par exemple certains previewers de newsletters email).

5. Vérifier l'intégration​

  1. Visitez votre site dans un navigateur classique (pas la preview du CMS).
  2. Attendez 2-3 secondes que la page finisse de charger.
  3. Vous devriez voir le bouton de chat Deskbolt apparaître en bas à droite. Cliquez : l'agent IA vous accueille dans la langue de votre navigateur.

Si le widget ne s'affiche pas, voici la check-list de debug dans l'ordre :

  • Ouvrez les DevTools du navigateur → onglet Console. Toute erreur mentionnant widget.js ou deskbolt est le point d'entrée du diagnostic.
  • Onglet Network → cherchez widget.js. Il doit retourner HTTP 200. Si vous obtenez 403 ou 404, votre data-deskbolt-widget-id est probablement faux — recopiez-le depuis votre dashboard.
  • Bloqueurs de pubs et de tracking (uBlock Origin, Brave Shields, Privacy Badger) bloquent parfois les widgets de chat tiers par défaut. Désactivez le bloqueur sur votre site pour confirmer. Une fois confirmé, vous pouvez demander à vos visiteurs de whitelister deskbolt.com, ou ajouter une règle d'exception dans le bloqueur.
  • Content Security Policy (CSP) stricte — si votre site utilise des en-têtes CSP, vous devez autoriser :
    • script-src https://www.deskbolt.com
    • connect-src https://www.deskbolt.com
    • frame-src https://www.deskbolt.com (uniquement si vous utilisez le mode plein écran du widget sur mobile)
  • Double-encodage du CMS. Certains site builders échappent les caractères < et > quand vous collez le snippet. Recollez via le bloc "Custom HTML" ou "Embed" de votre CMS, pas dans son éditeur de texte enrichi.
  • Plusieurs widgets sur la même page. Un seul widget Deskbolt par page. Si vous avez collé le snippet deux fois par mégarde, supprimez le doublon.

6. Personnaliser l'apparence et le comportement​

Une fois le widget en ligne, toute la configuration visuelle et comportementale se passe depuis votre dashboard, pas dans la balise script. Vous n'avez plus jamais besoin de toucher au code d'intégration.

Depuis Settings → Widget, un Admin ou un Manager peut modifier :

  • Couleurs et branding — couleur primaire, couleur du bouton, bordure, couleur du texte, accents par canal.
  • Position sur la page — bas-droit (par défaut), bas-gauche, haut-droit, haut-gauche.
  • Apparence mobile vs desktop — styling séparé pour le bouton mobile (avatar / icône, mode plein écran / compact, marges custom).
  • Langues — l'UI du widget est disponible en 13 langues et détecte automatiquement la langue du navigateur du visiteur. L'agent IA lui-même converse en 159+ langues, également auto-détectées.
  • Règles de marges par URL — décaler le widget sur certaines pages (par exemple au-dessus de votre cookie banner existant, à l'écart d'un bouton add-to-cart sticky).
  • Affectation de l'agent IA — choisir quel agent IA (avec quelle personnalité, quel flow de qualification, quel ton) gère les conversations sur ce widget.

Les modifications faites depuis le dashboard s'appliquent en direct sur votre site — vos visiteurs voient le nouveau rendu au prochain chargement de page. Pas de rebuild, pas de purge de cache, pas de redéploiement.

FAQ​

Le widget ralentit-il mon site ?​

Non. Le script est chargé de façon asynchrone (il ne bloque jamais le rendu de la page), il est servi depuis un CDN, et il pèse environ 488 KB compressés — soit l'équivalent d'une seule grande image sur une page d'annonce immobilière. Nous mesurons en continu l'impact du widget sur les Core Web Vitals et optimisons le bundle pour rester invisible dans votre score de vitesse.

Le widget est-il RGPD-compatible ?​

Oui. Le widget est conçu en pensant aux frameworks de privacy européens et américains :

  • Consentement granulaire collecté avant toute conversation, via un prompt de consentement personnalisable par votre agence.
  • RGPD européen : support complet des DSAR (Data Subject Access Request), journal de consentement granulaire, audit trail et suppression en cascade sur demande.
  • États-Unis : California (CCPA / CPRA), Virginia (VCDPA), Colorado (CPA), Connecticut (CTDPA), Utah (UCPA) et le reste des 50 frameworks d'État. La juridiction du visiteur est auto-détectée par géolocalisation IP, et le bon flow de consentement est appliqué sans que votre équipe n'ait à y penser.
  • Toutes les données sensibles sont chiffrées au repos (AES-256-GCM) et en transit (TLS 1.3). Les données client ne sont jamais vendues, transmises ou partagées avec des tiers.

Pour votre politique de confidentialité / DPA, lien vers notre Data Processing Agreement disponible sur www.deskbolt.com/data-processing-agreement.

Puis-je faire tourner plusieurs widgets Deskbolt sur le même site ?​

Un seul widget Deskbolt par page est supporté. Si vous avez plusieurs sites distincts (site principal de l'agence + microsite pour un programme, par exemple), vous pouvez faire tourner un widget différent sur chacun — voir l'astuce dans la section Trouver votre Widget ID ci-dessus.

Comment désactiver temporairement le widget ?​

Deux options :

  • Depuis votre dashboard → Settings → Widget, basculez le widget en inactif. La balise script reste sur votre site mais l'UI du widget ne s'affiche plus.
  • Depuis votre site, retirez le snippet <script>. Le widget disparaît en quelques secondes au prochain chargement de page.

Les deux options sont réversibles à tout moment.

Et pour les visiteurs mobiles ?​

Le widget est conçu mobile-first. Sur smartphone, il apparaît par défaut comme un bouton circulaire (avec l'avatar de votre agent IA), et s'ouvre soit en modal plein écran, soit dans une feuille compacte en bas de l'écran — votre choix dans le dashboard. Pas de "snippet mobile" séparé : la même balise <script> gère desktop et mobile.

Le widget apparaît-il dans la preview du CMS / staging ?​

Cela dépend du CMS :

  • Preview Webflow Designer : non, les scripts personnalisés sont retirés.
  • Éditeur de blocs / preview WordPress : dépend du mode de preview — les scripts personnalisés tournent généralement dans "Preview in new tab" mais pas dans l'éditeur inline.
  • La plupart des autres environnements de staging CMS : oui, à condition de publier/déployer aussi le build de staging.

Pour prévisualiser le widget sans publier, utilisez le bouton Preview Widget à l'intérieur des paramètres Widget du dashboard Deskbolt — il ouvre votre widget sur une URL de preview publique que vous pouvez partager avec votre équipe.

Besoin d'aide ?​

Si vous avez suivi toutes les étapes ci-dessus et que le widget n'apparaît toujours pas, écrivez à support@deskbolt.com avec :

  • Le nom de votre agence et votre Widget ID.
  • L'URL complète de la page où le widget devrait apparaître.
  • Un screenshot de la console DevTools du navigateur (les éventuelles erreurs).

Nous traitons les tickets d'intégration en priorité et nous pouvons aider votre développeur ou webmaster directement si besoin.

Dernière mise à jour le