hubspotscore : c’est le nom exact de la propriété HubSpot qui contient le score de qualification d’un contact, calculé automatiquement par HubSpot à partir de son comportement (ouvertures d’e-mails, visites de pages, téléchargements). Une équipe commerciale a demandé à ce que cette donnée soit visible directement dans l’éditeur WordPress, sur la fiche d’un prospect géré comme type de contenu personnalisé, sans obliger les commerciaux à ouvrir un second onglet vers HubSpot pour vérifier une priorité.
Contrairement au bloc qui synchronise un lead vers HubSpot en écriture, celui-ci ne fait que lire une donnée existante, et uniquement dans l’éditeur : aucune information de score n’est exposée côté public, la fiche affichée aux visiteurs du site restant strictement inchangée.
Un panneau latéral plutôt qu’un bloc de contenu
Le choix technique s’est porté sur un panneau PluginDocumentSettingPanel plutôt que sur un bloc inséré dans le contenu de l’article : cette donnée est une information de travail pour l’équipe commerciale, pas un contenu destiné à apparaître dans la structure éditoriale de la fiche. Le panneau s’enregistre côté JavaScript avec registerPlugin :
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/editor';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
const ScoreLeadPanel = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ emailContact ] = useEntityProp( 'postType', postType, 'meta_email_contact' );
return (
<PluginDocumentSettingPanel name="acme-score-lead" title="Score HubSpot">
<ScoreAffiche email={ emailContact } />
</PluginDocumentSettingPanel>
);
};
registerPlugin( 'acme-score-lead-panel', { render: ScoreLeadPanel } );
Récupérer le score via un point de terminaison REST interne
Le composant ScoreAffiche n’appelle jamais directement l’API HubSpot depuis le navigateur : il interroge un point de terminaison REST WordPress dédié, qui lui-même contacte HubSpot côté serveur, gardant ainsi le jeton d’application privée HubSpot hors du JavaScript exécuté dans l’éditeur.
import { useEffect, useState } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
const ScoreAffiche = ( { email } ) => {
const [ score, setScore ] = useState( null );
const [ chargement, setChargement ] = useState( false );
useEffect( () => {
if ( ! email ) {
return;
}
setChargement( true );
apiFetch( { path: `/acme/v1/score-lead?email=${ encodeURIComponent( email ) }` } )
.then( ( data ) => setScore( data.score ) )
.catch( () => setScore( null ) )
.finally( () => setChargement( false ) );
}, [ email ] );
if ( chargement ) {
return <p>Chargement du score…</p>;
}
return score !== null
? <p>Score HubSpot : <strong>{ score }</strong> / 100</p>
: <p>Score indisponible pour ce contact.</p>;
};
Côté PHP, le point de terminaison acme/v1/score-lead vérifie la capacité de l’utilisateur connecté (current_user_can( 'edit_posts' )) avant d’appeler HubSpot, puis interroge https://api.hubapi.com/crm/v3/objects/contacts/{email} avec le paramètre idProperty=email et properties=hubspotscore, en réutilisant la même application privée HubSpot déjà en place pour la synchronisation des leads.
Ce que ce panneau évite délibérément
- Aucune modification du score ou des propriétés HubSpot n’est possible depuis ce panneau : il est strictement en lecture seule.
- Le panneau n’affiche rien tant qu’aucune adresse e-mail de contact n’est renseignée sur la fiche, pour éviter un appel API systématique sans donnée exploitable.
- Aucune donnée de score n’est stockée en base WordPress : elle est récupérée à la demande, à chaque ouverture de l’éditeur, garantissant une valeur toujours à jour plutôt qu’une copie qui se périmerait silencieusement.
Pour une donnée qui change en continu comme un score de lead, je préfère toujours un appel à la demande plutôt qu’une synchronisation périodique stockée en base : la fraîcheur de l’information prime ici sur l’économie d’un appel réseau.
En résumé
Ce panneau reste volontairement circonscrit à un affichage de lecture, pensé pour un usage commercial interne plutôt que pour piloter quoi que ce soit dans HubSpot. Cette limite de périmètre, assumée dès la conception, a permis de livrer une fonctionnalité utile en quelques heures de développement, sans ouvrir la porte à des effets de bord sur les workflows marketing gérés par ailleurs dans HubSpot.
