Développement front-end
Publié le 03/07/2025

Comment créer un annuaire dynamique dans HubSpot ?

                Écrit par Luc Benayoun
              
Comment créer un annuaire dynamique dans HubSpot ?

Un annuaire dynamique dans HubSpot permet de centraliser et organiser efficacement les contacts, partenaires ou prestataires sans nécessiter de mise à jour manuelle. Contrairement à un annuaire statique, il se met à jour en temps réel en fonction des informations stockées dans le CRM, garantissant ainsi des données toujours actualisées et exploitables.

L’objectif est d’offrir un accès rapide et précis aux bonnes informations, d’améliorer la recherche des contacts et d’éviter les doublons ou erreurs de saisie. Pour cela, deux approches sont possibles : une première accessible aux utilisateurs non techniques en exploitant les fonctionnalités natives de HubSpot, et une seconde plus avancée nécessitant le développement d’une API pour enrichir l’annuaire avec des données externes.

Dans cette première partie, nous allons voir comment configurer un annuaire dynamique en utilisant uniquement les outils natifs de HubSpot.

1. Créer un annuaire dynamique dans HubSpot sans compétences techniques

Un annuaire dynamique basé sur HubSpot CRM offre une solution efficace pour structurer les données et simplifier l’accès aux informations. Il garantit une mise à jour automatique des enregistrements, permet un filtrage avancé et assure une synchronisation fluide entre les différentes fiches du CRM.

1.1. Pourquoi utiliser un annuaire dynamique ?

L’intérêt principal d’un annuaire dynamique réside dans sa capacité à s’actualiser automatiquement en fonction des données du CRM. Lorsqu’un contact ou une entreprise est ajouté ou mis à jour, l’annuaire reflète instantanément ces modifications sans nécessiter d’intervention manuelle.

Grâce aux options de filtrage avancées, il devient possible de rechercher un contact selon des critères spécifiques comme sa localisation, son domaine d’activité ou son niveau de certification. Cela permet de gagner un temps précieux dans la gestion des relations professionnelles.

L’intégration directe avec le CRM garantit également une base de données propre et structurée, évitant ainsi la multiplication des doublons ou la présence d’informations obsolètes.

1.2. Configurer un annuaire dynamique dans HubSpot

La mise en place d’un annuaire dans HubSpot repose sur trois éléments principaux : l’organisation des fiches d’enregistrement, l’utilisation des listes dynamiques et l’exploitation de HubDB pour structurer l’affichage.

1.2.1. Structurer les fiches d’enregistrement dans HubSpot CRM

Avant de configurer l’annuaire, il est essentiel de définir les propriétés clés des contacts et entreprises.

Chaque fiche doit inclure des informations pertinentes comme le nom, la catégorie, la localisation, le niveau de certification ou encore les coordonnées de contact.

L’organisation des données passe également par la création de relations entre les fiches. Un prestataire peut être lié à plusieurs entreprises, tout comme un partenaire peut être associé à différents projets. Une bonne structuration garantit une navigation fluide et une gestion efficace des informations.

1.2.2. Créer une liste dynamique pour automatiser l’annuaire

Les listes dynamiques permettent d’afficher uniquement les enregistrements répondant à certains critères définis par l’utilisateur. Pour créer une liste dynamique, il faut accéder à l’onglet CRM, sélectionner "Listes", puis "Créer une liste".

Il est ensuite possible d’ajouter des filtres pour afficher uniquement les contacts pertinents. Par exemple, une liste peut être configurée pour ne regrouper que les partenaires certifiés d’une région donnée. Une fois créée, la liste se met à jour automatiquement dès qu’un contact entre ou sort des critères définis.

1.2.3. Utiliser HubDB pour structurer et afficher l’annuaire

HubDB permet d’organiser les données sous forme de tableau interactif et dynamique. Contrairement aux listes dynamiques qui restent internes au CRM, un tableau HubDB peut être affiché directement sur un site HubSpot.

La création d’un tableau HubDB se fait en accédant à l’onglet "Contenu", puis "HubDB". Une fois le tableau créé, il faut ajouter des colonnes correspondant aux informations clés des contacts, comme le nom, la certification ou la localisation. Des options de filtrage avancé permettent d’améliorer la recherche et l’accessibilité des données.

1.2.4. Intégrer l’annuaire sur un site HubSpot

L’annuaire peut être directement intégré sur un site web HubSpot pour une consultation simplifiée. En créant une page dédiée via l’onglet "Marketing", puis "Site Web", il est possible d’ajouter un module HubDB pour afficher dynamiquement les résultats de l’annuaire.

L’expérience utilisateur peut être optimisée en intégrant une barre de recherche, des boutons d’action permettant de contacter directement les partenaires et une mise en page responsive adaptée aux mobiles et tablettes.

1.3. Limites et cas d’usage

Un annuaire basé sur les fonctionnalités natives de HubSpot convient aux entreprises souhaitant structurer un réseau de contacts sans nécessiter d’intégration complexe. Il est particulièrement utile pour gérer un répertoire interne, un réseau de partenaires ou une base de fournisseurs.

Cependant, cette approche présente certaines limites. Elle ne permet pas d’intégrer des bases externes ni de récupérer des données en temps réel depuis une API. Si l’objectif est de connecter l’annuaire à une source de données externe et d’automatiser les mises à jour avec des informations issues d’une autre plateforme, il est préférable d’opter pour une solution plus avancée, que nous aborderons dans la deuxième partie de cet article.

2. Développer un annuaire dynamique avec une API - Cas If/Else Agency x Hellio

L’approche native de HubSpot permet de structurer un annuaire de manière efficace, mais elle présente des limites dès lors qu’il s’agit d’intégrer des données externes et d’assurer une mise à jour automatique. Pour aller plus loin, if/else agency, agence HubSpot a développé un annuaire dynamique sur mesure pour Hellio, exploitant une API connectée à une base de données externe, garantissant ainsi un accès en temps réel à des informations fiables et actualisées.

2.1. Pourquoi aller plus loin avec une API ?

L’utilisation d’une API permet d’intégrer des données provenant de sources externes et d’automatiser les mises à jour, évitant ainsi tout travail manuel fastidieux. Dans le cas de Hellio, les informations des artisans RGE (Reconnus Garants de l’Environnement) proviennent de l’ADEME, l’Agence de la transition écologique. En récupérant ces données directement via une API, l’annuaire est constamment actualisé, offrant ainsi un contenu fiable et pertinent.

L’un des atouts majeurs de cette approche est la mise en place d’un moteur de recherche avancée. Contrairement aux filtres de HubSpot qui restent limités, une API permet d’effectuer des requêtes dynamiques selon plusieurs critères simultanément. L’utilisateur peut ainsi rechercher un artisan par type de prestation, code postal ou domaine d’expertise, garantissant une navigation rapide et intuitive.

Enfin, l’affichage de l’annuaire est optimisé pour gérer un grand volume de données. Grâce à un développement sur mesure, les résultats s’affichent rapidement, même lorsque des milliers d’entrées doivent être traitées simultanément. Cette approche offre une expérience utilisateur fluide et performante, sur desktop comme sur mobile.

2.2. Développement d’un annuaire dynamique pour Hellio

2.2.1. Besoin client

Hellio souhaitait mettre à disposition de ses utilisateurs un annuaire des artisans RGE constamment à jour, permettant aux particuliers et aux entreprises de trouver facilement un prestataire qualifié.

L’entreprise faisait face à deux problématiques :

  • L’absence d’une base de données interne fiable et mise à jour automatiquement.
  • Un manque de ressources techniques en interne pour développer une solution connectée à l’API de l’ADEME.

La solution devait être robuste, simple d’utilisation et intégrée à HubSpot pour bénéficier des fonctionnalités CRM de suivi des interactions et de gestion des contacts.

2.2.2. Solution développée par if/else agency

Connexion API avec l’ADEME

L’équipe if/else agency a mis en place un script automatisé permettant de récupérer les données des artisans directement depuis l’API de l’ADEME. Chaque nuit, une synchronisation est effectuée, mettant à jour les nouvelles entrées et supprimant celles devenues obsolètes. Cette automatisation garantit un annuaire constamment à jour sans intervention manuelle.

Stockage et structuration des données dans HubSpot

Les informations sont ensuite intégrées dans HubSpot, où elles sont organisées sous forme d’enregistrements structurés dans le CRM. Chaque artisan possède une fiche détaillée associée aux propriétés nécessaires (nom, prestations proposées, certification, localisation, etc.).

Développement d’un moteur de recherche avancé

L’un des défis majeurs du projet était de permettre une recherche efficace et intuitive. If/Else Agency a développé un moteur de recherche optimisé permettant de filtrer les artisans selon plusieurs critères combinables :

  • Type de prestation (isolation, chauffage, menuiserie…).
  • Localisation par code postal pour trouver un artisan proche de chez soi.
  • Domaine d’expertise pour affiner la sélection des professionnels.
Optimisation de l’affichage et de l’expérience utilisateur

L’interface de l’annuaire a été conçue pour être fluide, ergonomique et rapide. L’objectif était de garantir une expérience utilisateur optimale avec un temps de chargement minimal, quelle que soit la taille de la base de données.

Le design et la navigation ont été pensés pour s’adapter parfaitement aux mobiles et tablettes, garantissant un accès optimal aux utilisateurs où qu’ils soient.

2.2.3. Résultat et impact

Grâce à cette solution développée sur mesure, Hellio bénéficie désormais d’un annuaire dynamique, précis et fiable, accessible directement depuis son site web.

  • Mise à jour automatique : plus besoin de gérer manuellement l’intégration de nouvelles données.
  • Recherche instantanée : les utilisateurs trouvent en quelques secondes l’artisan qui correspond à leurs besoins.
  • Gain de temps opérationnel : les équipes de Hellio peuvent se concentrer sur leur cœur de métier plutôt que sur la maintenance de la base de données.

Le projet a reçu des retours très positifs de la part des équipes Hellio, qui ont particulièrement apprécié l’accompagnement d’If/Else Agency et la qualité du développement technique mis en place.

2.3. Comment appliquer cette approche à d’autres entreprises ?

La mise en place d’un annuaire dynamique via une API ne se limite pas à Hellio. De nombreuses entreprises peuvent tirer parti de cette approche pour structurer et centraliser leurs données de manière fluide et efficace.

  • Intégration d’API tierces : Connexion avec des bases de données externes pour récupérer et mettre à jour automatiquement des informations.
  • Moteur de recherche avancé : Développement de filtres dynamiques adaptés aux besoins spécifiques de chaque entreprise.
  • Personnalisation UX/UI : Création d’une interface optimisée pour une navigation fluide et intuitive.

Que ce soit pour afficher un réseau de prestataires, structurer un catalogue de produits ou centraliser des données clients, l’automatisation via API permet un gain de temps considérable et une meilleure exploitation des données.

Si votre entreprise a besoin d’un annuaire dynamique connecté à une base de données externe, If/Else Agency vous accompagne dans la conception et l’optimisation d’une solution sur mesure.

3. Comparaison des deux approches : laquelle choisir ?

Tableau FR-1

À retenir

Créer un annuaire dynamique dans HubSpot permet d’optimiser la gestion des contacts, partenaires et prestataires en centralisant les informations et en facilitant leur mise à jour.

L’approche native de HubSpot est idéale pour les entreprises cherchant une solution simple et rapide à mettre en place. Grâce aux listes dynamiques et à HubDB, il est possible de structurer un répertoire interactif, sans compétences techniques.

Cependant, pour des besoins plus complexes, notamment lorsqu’il s’agit d’intégrer des bases externes et de garantir une mise à jour automatisée, l’approche API offre une flexibilité inégalée. L’exemple de l’annuaire développé pour Hellio par If/Else Agency démontre comment une solution sur mesure permet d’automatiser la gestion des données, d’optimiser l’expérience utilisateur et de simplifier l’accès à des informations constamment actualisées.

Quelle approche choisir ?

Tout dépend des besoins et des ressources de votre entreprise. Une solution hybride combinant les fonctionnalités natives de HubSpot et une intégration API spécifique peut également être envisagée pour tirer le meilleur parti des deux méthodes.

Si vous souhaitez déployer un annuaire dynamique performant et adapté à vos contraintes métiers, if/else agency vous accompagne dans la mise en place de solutions sur mesure, alliant expertise HubSpot et développement avancé.

Bannière : Photo de Creatvise sur Unsplash

Notre blog

Restez à jour !

Comme tout développeur qui se respecte, on reste à l'écoute du marché, des bonnes pratiques et des nouvelles techniques et outils pour rester performants. On vous partage toutes nos trouvailles.