← Retour au blog

Comment personnaliser votre widget avec l'App Builder

· 8 min de lecture · Heedback Team


Le widget Heedback par défaut fait le travail, mais l’App Builder vous permet de le rendre vraiment vôtre. Au lieu d’une bulle de chat générique, vous pouvez concevoir un onglet d’accueil qui guide les visiteurs vers la bonne ressource : démarrer une conversation, parcourir la FAQ, prendre rendez-vous ou suivre un lien personnalisé. Le tout sans écrire une seule ligne de code.

Ce guide couvre tout, de l’accès au constructeur à la publication de votre widget personnalisé.

Prérequis

Avant d’utiliser l’App Builder, assurez-vous que :

  • Vous avez une organisation Heedback active avec un forfait Pro.
  • Votre compte dispose des permissions administrateur ou propriétaire.
  • Le widget Heedback est déjà installé sur votre site web (voir Paramètres > Widget pour le code d’intégration).
  • Vous avez une idée générale des actions que vous souhaitez proposer aux visiteurs — cela vous aidera à choisir les bons blocs.

Accéder à l’App Builder

  1. Ouvrez votre tableau de bord Heedback et rendez-vous dans Widget > App Builder dans la barre latérale gauche.
  2. Vous verrez un éditeur visuel avec votre agencement actuel de l’onglet d’accueil à gauche et une palette de blocs à droite.
  3. Le panneau de prévisualisation à droite se met à jour en temps réel au fur et à mesure de vos modifications — ce que vous voyez est exactement ce que vos visiteurs obtiendront.

L’App Builder fonctionne sur un système de blocs. Chaque bloc représente une action ou section de contenu distincte qui apparaît sur l’onglet d’accueil du widget.

Les blocs disponibles

Heedback propose plusieurs types de blocs, chacun conçu pour un usage spécifique :

  • Conversation : le classique point d’entrée « Démarrer une conversation ». Les visiteurs cliquent dessus pour ouvrir une nouvelle conversation de support ou reprendre une conversation existante. C’est le bloc le plus courant et il se place généralement en haut.
  • FAQ / Base de connaissances : affiche vos articles d’aide les plus consultés directement dans le widget. Les visiteurs peuvent rechercher et parcourir sans quitter votre site. Nécessite des articles de base de connaissances publiés.
  • Prise de rendez-vous : permet aux visiteurs de planifier un appel avec votre équipe. Connectez votre fournisseur de calendrier (Calendly, Cal.com ou une URL personnalisée) et l’interface de réservation apparaît en ligne.
  • Lien personnalisé : un bloc flexible qui renvoie vers n’importe quelle URL — votre site de documentation, un tableau de feedback, une page d’atterrissage spécifique ou un outil externe. Ajoutez un titre, une description et une icône pour le rendre visuellement distinct.
  • Changelog : affiche vos dernières mises à jour produit directement dans le widget pour que les utilisateurs voient les nouveautés sans naviguer ailleurs.

Chaque bloc a ses propres options de configuration. Par exemple, le bloc FAQ vous permet de choisir les collections à mettre en avant, tandis que le bloc Lien personnalisé accepte une URL externe et une icône personnalisée.

Organiser les blocs par glisser-déposer

Construire l’agencement de votre onglet d’accueil est simple :

  1. Ajouter un bloc : cliquez sur un type de bloc dans la palette pour l’ajouter à votre agencement.
  2. Réordonner : glissez n’importe quel bloc vers le haut ou le bas pour changer sa position. L’ordre compte — les blocs en haut obtiennent le plus de visibilité et de clics.
  3. Configurer : cliquez sur l’icône engrenage d’un bloc pour ouvrir ses paramètres. Remplissez les titres, descriptions et options spécifiques au bloc.
  4. Supprimer : cliquez sur l’icône corbeille d’un bloc pour le retirer de l’agencement.

Un agencement pratique pour la plupart des produits SaaS : bloc Conversation en haut (pour les urgences), suivi de la FAQ (pour le libre-service), puis du Changelog (pour la visibilité), et un Lien personnalisé vers votre communauté ou documentation en bas.

Prévisualiser et tester

Avant de publier, prévisualisez toujours vos modifications :

  1. La prévisualisation en direct dans l’App Builder se met à jour automatiquement pendant l’édition. Vérifiez que les blocs apparaissent dans le bon ordre et que les titres sont clairs.
  2. Cliquez sur Prévisualiser sur le site pour ouvrir une prévisualisation temporaire sur votre vrai site web. Cela montre le widget exactement comme les visiteurs le verront, incluant votre branding, couleurs et positionnement.
  3. Testez l’interaction de chaque bloc : cliquez sur le bloc Conversation pour vérifier qu’il ouvre le chat, vérifiez que les articles FAQ se chargent correctement, et confirmez que les liens personnalisés mènent aux bonnes URL.

Tester sur les formats bureau et mobile est recommandé — le widget s’adapte à la taille de l’écran, et votre agencement de blocs doit paraître naturel sur les petits écrans.

Publier vos modifications

Une fois satisfait de l’agencement :

  1. Cliquez sur le bouton Enregistrer dans l’App Builder.
  2. Les modifications sont publiées immédiatement sur votre widget en production. Il n’y a pas d’étape de déploiement séparée — les visiteurs verront l’onglet d’accueil mis à jour dès leur prochaine visite.
  3. Vous pouvez revenir dans l’App Builder à tout moment pour ajouter, supprimer ou réorganiser les blocs. Chaque sauvegarde remplace l’agencement précédent.

Si vous souhaitez revenir en arrière, il n’y a pas d’historique de versions intégré, pensez donc à faire une capture d’écran de votre agencement actuel avant d’effectuer des modifications importantes.

Conseils et bonnes pratiques

  • Restez concentré. Trois à quatre blocs est le nombre idéal. Trop d’options créent une paralysie décisionnelle — les visiteurs finissent par ne cliquer sur rien.
  • Placez l’action la plus importante en premier. Si la plupart des visiteurs ont besoin d’aide, commencez par Conversation. Si la majorité des questions trouvent réponse dans la documentation, commencez par FAQ.
  • Utilisez des titres descriptifs. « Obtenir de l’aide » est vague. « Discuter avec notre équipe » ou « Parcourir les articles d’aide » indique clairement aux visiteurs ce qui les attend.
  • Revoyez chaque trimestre. Votre produit évolue, votre widget aussi devrait évoluer. Nouveau lancement de fonctionnalité ? Ajoutez un bloc Changelog temporairement. Campagne de recrutement ? Ajoutez un Lien personnalisé vers votre page carrières.
  • Restez fidèle à votre marque. L’App Builder respecte les paramètres de couleur et de branding de votre widget dans Paramètres > Widget. Assurez-vous que vos titres et descriptions de blocs correspondent à votre ton de marque.

Fonctionnalités associées

  • Configuration du widget : définissez les couleurs, la position, le branding et le code d’intégration qui charge le widget sur votre site.
  • Base de connaissances : alimente le bloc FAQ. Plus d’articles signifie une meilleure expérience de libre-service dans le widget.
  • Changelog : le bloc Changelog tire ses données de vos entrées publiées — maintenez votre changelog actif pour un impact maximal dans le widget.
  • Réponse automatique IA : quand les visiteurs ouvrent une conversation depuis le widget, la réponse automatique IA peut gérer les premières réponses instantanément.