# Un bloc et HubSpot CRM : afficher un score de lead directement dans l’éditeur

> Un bloc dynamique interroge l'API HubSpot pour afficher, dans le panneau latéral de l'éditeur, le score du lead associé à une fiche prospect gérée sous WordPress.

- Auteur : WordPress Développement
- Publié le : 2024-01-27
- Mis à jour le : 2024-01-27
- Catégorie : Blocs Gutenberg
- URL : https://www.wpmoderne.fr/blocs/bloc-hubspot-crm-score-lead-editeur/

## L’essentiel

- Le score s'affiche côté éditeur, jamais côté public
- L'appel API passe par un point de terminaison REST interne à WordPress
- Le panneau se rafraîchit sans recharger la page grâce à useSelect

`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.

> L'essentiel à retenir : Le score s'affiche côté éditeur, jamais côté public ; L'appel API passe par un point de terminaison REST interne à WordPress ; Le panneau se rafraîchit sans recharger la page grâce à useSelect

```
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.