Créez une carte CRM HubSpot personnalisée sans coder grâce à Claude Code.

Découvrez comment créer facilement une carte CRM HubSpot personnalisée sans aucune programmation grâce à APIANT.

Public cible : Administrateur HubSpot

Comprendre les cartes CRM HubSpot

Les cartes CRM HubSpot sont des outils dynamiques qui optimisent votre flux de travail en offrant un accès rapide aux informations et interactions essentielles provenant de diverses sources, directement dans HubSpot. Conçues pour s'intégrer parfaitement aux applications externes et à l'écosystème HubSpot, ces cartes permettent aux utilisateurs de consulter des données clés telles que les tickets d'assistance, les informations de facturation ou les statistiques personnalisées des applications, sans quitter leur CRM. Concrètement, elles interagissent avec les API.

Dans ce tutoriel, nous allons créer une fiche CRM qui récupère les informations météorologiques de votre contact et renvoie vers une carte météo. OpenWeatherMap.org API.

Créer votre propre application publique HubSpot

Avant de pouvoir créer une carte CRM personnalisée, vous devez Créez votre propre application publique HubSpotVous n’êtes pas obligé de le rendre public si vous ne le souhaitez pas, mais vous pouvez le faire ! 🤑 Cela vous permettra de connecter le HubSpot Hub de votre client à la plateforme APIANT.

Pour créer votre propre application publique, suivez ces étapes simples :

Si vous n'avez pas de compte développeur HubSpot, créez-en un sur développeurs.hubspot.com

Vous souhaitez créer une application :

Cliquez sur Gérer les applications

Cliquez sur Créer une application en haut à droite

Donnez un nom, une description et un logo à l'application si vous le souhaitez, puis cliquez sur Authentification.

Saisissez votre URL de redirection. Si vous utilisez un forfait HubSpot Admin Free ou HubSpot Admin Pro sur APIANT, vous pouvez saisir apiant.com/oauth. Si vous utilisez un hébergement mutualisé ou un serveur dédié, saisissez l'URL de votre serveur. Si vous ne la connaissez pas, saisissez votre nom de domaine pour le moment ; le système vous le communiquera lorsque vous connecterez l'application au serveur APIANT. Vous pourrez alors le saisir ultérieurement.

Saisissez vos autorisations. Votre compte APIANT vous permettra de faire bien plus que de simples cartes CRM ! (Comme créer des applications API complètes). Voici donc les autorisations (voir ci-dessous) que nous recommandons en fonction de… 24 déclencheurs et 73 actions nous avons actuellement disponibles (au 17 mars 2024).

Les autorisations déterminent les permissions dont dispose votre application pour accéder aux données ou effectuer des actions dans HubSpot. Les utilisateurs qui installent votre application doivent approuver les autorisations demandées. Il est fortement recommandé de limiter au maximum le nombre d'autorisations requises pour le bon fonctionnement de votre application.

Enregistrez votre application en bas de l'écran :

Commencez à configurer l'automatisation dans APIANT pour obtenir votre URL de récupération de données.

Avez-vous besoin d'un compte APIANT ? Cliquez ici pour demander un compte administrateur HubSpot gratuit.

Si vous préférez installer l'automatisation plutôt que de la créer de toutes pièces, vous pouvez l'installer depuis ici.

Commençons maintenant à mettre en place l'automatisation dans votre compte APIANT qui interagira avec une carte CRM.

Dans l'éditeur d'automatisation, cliquez sur Créer une automatisation :

Cliquez sur la croix de déclenchement et choisissez Trouver un déclencheur :

Recherchez « Requête HTTP » et sélectionnez le déclencheur intitulé « Requête HTTP reçue (instantanée) ».

Cliquez sur le + pour saisir un nouveau paramètre de requête

Saisissez hs_object_id comme paramètre

Cliquez sur « Récupérer les champs de données »

L'URL du service Web à coller dans HubSpot s'affichera alors. Cliquez sur l'icône de copie pour la copier dans votre presse-papiers.

Cliquez sur « Enregistrer le déclencheur » en bas à droite de la fenêtre :

Ajoutez une action temporaire pour enregistrer l'automatisation appelée Majuscule :

Vous pouvez laisser le champ « Majuscules » vide ; nous le supprimerons lors de la modification de l’automatisation.

Donnez un nom à l'automatisation et enregistrez-la :

Nous disposons désormais de tous les éléments nécessaires pour créer la carte CRM dans HubSpot. Retournez à votre compte développeur HubSpot pour créer la carte :

Création d'une carte CRM dans votre application publique

Maintenant que votre application publique HubSpot est configurée, il est temps de créer une carte CRM. Celle-ci définira la mise en page et le contenu de votre carte.

Cliquez sur les cartes CRM sous Fonctionnalités :

Cliquez sur Créer une carte CRM

Saisissez le nom de votre carte CRM. Nous l'appellerons « Météo ». Il s'agira d'une fiche contact, et nous enverrons simplement l'identifiant hs_object_id de cette fiche depuis HubSpot vers votre compte APIANT.

Collez l'URL de votre service Web depuis votre automatisation APIANT dans le champ URL de récupération des données.

Cliquez sur Propriétés de la carte et saisissez ces propriétés en cliquant sur Ajouter une propriété :

Assurez-vous de faire correspondre le type de propriété à chaque élément, comme indiqué ci-dessus.

Et voilà ! Cliquez sur Créer pour créer votre carte CRM :

Connexion de votre nouvelle application publique HubSpot à votre compte APIANT

Avant de finaliser la mise en place de l'automatisation, nous devons connecter votre nouvelle application publique HubSpot à votre compte APIANT.

Cliquez sur Connexions dans le menu

Cliquez sur le bouton Connecter l'application

Choisissez HubSpot

Choisissez mon application publique

Suivez les instructions à l'écran (Ouvrez votre console développeur HubSpot, etc.) - Cliquez sur OK

Vous allez maintenant obtenir l'URL à saisir dans le champ URL de récupération des données de votre application publique.

Copiez votre ID client et votre secret client, puis l'URL d'installation dans la boîte de dialogue :

Choisissez le compte HubSpot auquel vous souhaitez connecter votre application publique et cliquez sur Choisir un compte :

Approuvez la connexion et votre application publique devrait maintenant être connectée à votre compte APIANT :

Finalisez la configuration de l'automatisation dans APIANT pour interagir avec votre carte CRM.

Modifiez votre automatisation dans APIANT :

Cliquez ensuite pour supprimer l'action « Majuscules », qui n'était qu'un espace réservé pour l'enregistrement.

Tout ce que nous avons actuellement dans l'automatisation, c'est un déclencheur (service Web) :

Dans notre exemple, nous devons maintenant ajouter les éléments suivants pour recevoir des données de HubSpot, récupérer des données de l'API openweathermap et les renvoyer à HubSpot :

1. Récupérez le contact depuis HubSpot pour obtenir le code postal.

2. Convertissez le code postal en géocodage avec openweathermap

3. Obtenez les conditions météorologiques actuelles d'OpenWeatherMap en fonction du géocode.

4. Remplissez les propriétés de la carte CRM avec les données d'OpenWeatherMap

5. Créez une option de menu pour la carte CRM permettant d'accéder à la carte météo.

6. Renvoyer le JSON à la carte CRM HubSpot

Commençons !

1. Ajoutez l'action HubSpot appelée « Obtenir un contact » :

Associez l'identifiant hs_object_id du déclencheur au champ ID du contact :

2. Ajoutez l'action « Géocoder par code postal »

Associez le code postal du contact HubSpot dans le champ « Code postal » de l’action « Géocoder par code postal ». Si vous préférez utiliser l’outil de sélection par diagramme (comme moi !), voici comment procéder :

3. Ajoutez maintenant l'action « Obtenir les conditions actuelles » depuis Openweathermap et associez la longitude et la latitude de l'action précédente :

4. Ajoutez l'action HubSpot appelée « Carte CRM » : définissez les valeurs d'affichage :

Ajoutez les 5 propriétés que nous avons créées dans la carte CRM et mappez-les (à l'aide du + encerclé) aux valeurs respectives provenant de l'action ci-dessus « Obtenir les conditions actuelles ».

Nom de la propriété de la carte CRM	Données cartographiques issues d'OpenWeatherMap
conditions	description météorologique
temp	température principale
temp_max	température maximale principale
temp_min	température principale min
vent	vitesse du vent

Notez que ce sont les mêmes propriétés que celles ajoutées dans notre fiche CRM :

Choisissez le nom que vous souhaitez donner à la carte ; ici, je l’appelle « Conditions météorologiques pour [prénom sur la carte] ». Voici où cela apparaîtra sur la carte :

6. Ajoutons maintenant la dernière action HubSpot appelée « Carte CRM » : ajouter une option de menu iframe :

Cartographiez tous les champs requis dans l'action et enregistrez-la.

Fiche CRM : ajouter le nom du champ de l’option de menu iframe	Saisir / Carte dans le champ
Carte CRM JSON	Carte: Carte CRM JSON à partir d'une action précédente Carte CRM : définir les valeurs d’affichage
Étiquette du menu	Carte météorologique
URL	https://openweathermap.org/city/ [identifiant émis par l'action Obtenir les conditions actuelles] Voici ce qui permettra d'afficher l'identifiant de la ville météo sur le site web d'OpenWeatherMap dans une iframe.
Largeur	1200
Hauteur	1000

7. Enfin, ajoutez l'action appelée « Renvoyer la réponse HTTP » à la fin de l'automatisation pour renvoyer toutes les données à HubSpot :

Associez le JSON de la carte CRM émis par l'action ci-dessus aux données de réponse et enregistrez l'action.

Enregistrez l'automatisation et activez-la. C'est terminé ! 🙌

Exécution et test de votre nouvelle carte CRM HubSpot

Pour tester la carte, il suffit d'actualiser le contact dans HubSpot et de regarder l'automatisation s'exécuter automatiquement :

Vous pouvez désormais créer votre propre carte CRM avec n'importe quelle logique et API…

Apprenez des autres et partagez votre création avec les autres administrateurs HubSpot sur forum.apiant.com

Êtes-vous administrateur HubSpot et souhaitez-vous un compte APIANT gratuit pour administrateurs HubSpot ? Si oui, vous pouvez soumettre une demande ci-dessous :

Prénom*

Nom de famille*

Titre d'emploi*

E-mail*

Numéro de téléphone portable*

Nom de l'entreprise*

Solutions cibles

Fred Lumière Cofondateur et PDG d'APIANT