Vos clients ne devraient pas avoir à chercher une page « Nous contacter » enfouie à trois clics de profondeur. Le widget intégrable de Heedback place le support, les conversations et le contenu en libre-service directement là où les utilisateurs se trouvent — sur votre site web ou votre application. Dans ce guide, nous couvrons l’installation, la configuration et les tests pour une mise en production en moins de dix minutes.

Prérequis

Avant de commencer, assurez-vous d’avoir :

Un compte Heedback avec au moins une organisation configurée
Un accès au HTML de votre site web, ou la possibilité de modifier le point d’entrée de votre framework frontend (React, Vue, Next.js, etc.)
Le code d’intégration de votre organisation, disponible dans Paramètres → Widget du tableau de bord Heedback

Étape 1 : Copier le code d’intégration

Rendez-vous dans Paramètres → Widget dans votre tableau de bord Heedback. Vous trouverez une balise script prête à l’emploi qui ressemble à ceci :

<script
  src="https://widget.heedback.com/embed.js"
  data-org-id="your-org-id"
  async
></script>

Ce code charge le widget de manière asynchrone, il ne bloquera donc pas le rendu de votre page. Copiez-le — vous le collerez dans votre site à l’étape suivante.

HTML simple : collez le code juste avant la balise fermante </body> dans votre fichier HTML principal. C’est tout — le widget apparaîtra sur chaque page qui inclut ce script.

React / Next.js : ajoutez le script à votre layout racine ou utilisez un hook useEffect pour l’injecter dynamiquement. Si vous utilisez Next.js App Router, placez-le dans app/layout.tsx en utilisant le composant <Script> avec strategy="afterInteractive".

Vue / Nuxt : dans Nuxt, ajoutez le script dans nuxt.config.ts sous le tableau app.head.script. Dans une application Vue standard, injectez-le dans votre index.html ou montez-le dans le hook onMounted de App.vue.

Applications monopage : le widget persiste automatiquement entre les changements de route. Aucune gestion spéciale n’est nécessaire pour la navigation côté client.

Étape 3 : Configurer l’apparence

De retour dans Paramètres → Widget, vous pouvez personnaliser l’apparence et le comportement du widget :

Couleur de marque : définissez une couleur principale qui correspond à votre marque. Le bouton du widget, les en-têtes et les éléments d’accentuation adopteront cette couleur.
Position : choisissez un placement en bas à droite ou en bas à gauche. Le bas à droite est la convention que la plupart des utilisateurs attendent, mais choisissez celle qui évite le chevauchement avec d’autres éléments d’interface.
Message d’accueil : rédigez une courte salutation qui apparaît lorsque les utilisateurs ouvrent le widget pour la première fois. Gardez-le chaleureux et incitatif — quelque chose comme « Bonjour ! Comment pouvons-nous vous aider ? »
Logo : téléchargez le logo de votre entreprise pour qu’il apparaisse dans l’en-tête du widget, garantissant la cohérence de marque.

Les modifications sont enregistrées instantanément et reflétées sur votre site en production sans redéploiement.

Le widget n’est pas qu’une simple boîte de chat. Selon votre forfait et votre configuration, les clients peuvent :

Démarrer ou poursuivre des conversations : messagerie en temps réel avec votre équipe support, avec un historique complet préservé entre les sessions.
Parcourir votre base de connaissances : les articles de votre centre d’aide s’affichent directement dans le widget, permettant aux utilisateurs de trouver des réponses sans quitter votre application.
Rechercher des réponses : une barre de recherche intégrée interroge votre base de connaissances pour que les clients trouvent les articles pertinents avant d’ouvrir une conversation.
Soumettre des demandes de fonctionnalités : si vous avez activé les tableaux de fonctionnalités, les utilisateurs peuvent consulter et voter pour des idées sans quitter votre site.
Consulter les annonces : les entrées de changelog peuvent apparaître dans le widget, tenant les clients informés des nouvelles fonctionnalités et corrections.

Étape 5 : Identifier les utilisateurs connectés

Par défaut, les visiteurs du widget sont anonymes. Pour associer les conversations à des utilisateurs connus — afin que votre équipe voie les noms, emails et historiques — transmettez les données utilisateur via l’API JavaScript :

<script>
  window.heedbackSettings = {
    user: {
      id: "usr_abc123",
      email: "marie@example.com",
      name: "Marie Dupont",
    },
  };
</script>

Placez ce code avant le script d’intégration. Quand un utilisateur connecté ouvre le widget, ses conversations sont liées à son profil dans Heedback. Cela évite aux utilisateurs de devoir s’identifier manuellement et donne à vos agents le contexte complet dès le premier message.

Étape 6 : Tester avant la mise en production

Avant de déployer en production, vérifiez que le widget fonctionne correctement :

Ouvrez votre site dans une fenêtre de navigation privée pour simuler un visiteur qui découvre le site. Le bouton du widget doit apparaître à la position configurée.
Envoyez un message test et confirmez qu’il arrive dans votre boîte de réception Heedback.
Répondez depuis le tableau de bord et vérifiez que la réponse apparaît dans le widget en temps réel.
Testez sur mobile — le widget est responsive et s’adapte automatiquement aux petits écrans.
Vérifiez les conflits de z-index — si le widget apparaît derrière des modales ou des en-têtes fixes, contactez le support pour obtenir des conseils de surcharge CSS.

Conseils et bonnes pratiques

Ne cachez pas le widget derrière un menu. L’intérêt est l’accès instantané. Laissez-le visible en permanence sur chaque page.
Utilisez les utilisateurs identifiés autant que possible. Les conversations anonymes créent des frictions quand les utilisateurs reviennent — ils perdent leur historique et vos agents perdent le contexte.
Maintenez votre base de connaissances à jour. La valeur du libre-service du widget dépend directement de la qualité du contenu derrière. Des articles obsolètes érodent la confiance.
Surveillez l’engagement du widget dans votre tableau de bord analytique Heedback. Suivez combien d’utilisateurs l’ouvrent, combien trouvent des réponses via les articles, et combien démarrent des conversations.

Fonctionnalités associées

Base de connaissances — les articles affichés dans votre widget proviennent d’ici. Un centre d’aide bien organisé rend le widget considérablement plus utile.
Réponse automatique IA — activez les réponses alimentées par l’IA pour que les clients obtiennent des réponses instantanées même quand votre équipe est hors ligne.
Support multilingue — servez le widget dans la langue préférée de vos clients automatiquement.
Notifications — assurez-vous que votre équipe est alertée dès qu’un client envoie un message via le widget.

Comment ajouter le widget intégrable à votre site web