Aller au contenu
Tous les articles

Guides produit

Preuve sociale sur WordPress et WooCommerce sans extension

Installez Provedly sur WordPress avec un simple hook wp_footer, envoyez les commandes WooCommerce à la Records API et sachez lesquelles peuvent être marquées Verified.

L'équipe Provedly··6 min de lecture

Vous n'avez pas besoin d'une extension WordPress de plus pour afficher des notifications d'achat. Un hook wp_footer de quatre lignes charge le script Provedly, et un second hook sur woocommerce_payment_complete envoie chaque commande payée à la Records API. La seule chose à comprendre dès le départ, c'est lesquelles de ces commandes peuvent porter la mention « Achat vérifié », car la réponse dépend de la façon dont votre checkout communique avec Stripe.

Vous préférez une extension ? Provedly est désormais sur WordPress.org. Elle charge le widget et les barres, crée pour vous le webhook WooCommerce signé (chaque commande payée obtient donc la mention Vérifié) et transmet l'identifiant du visiteur pour l'attribution, sans aucun code. Voir Provedly is now on WordPress.org. La méthode manuelle ci-dessous fonctionne toujours si vous préférez ne pas ajouter d'extension.

Installer le script avec wp_footer

Ajoutez ceci au functions.php de votre thème enfant. Si vous n'avez pas de thème enfant, créez-en un d'abord ; modifier le thème parent, c'est perdre la modification à la prochaine mise à jour du thème.

add_action('wp_footer', function () {
    echo '<script src="https://provedly.app/w/widget.js" data-token="pp_your_token" async defer></script>';
});

C'est toute l'installation. Le script pèse environ 6 Ko compressés en gzip, se charge de façon asynchrone et s'affiche dans un Shadow DOM : le CSS de votre thème et celui du widget ne se croisent jamais. Les extensions de cache ne posent pas de problème ; la balise elle-même est statique et le widget récupère sa propre configuration auprès de Provedly au chargement.

Si votre hébergeur verrouille functions.php, la plupart des thèmes à blocs vous permettent de coller la même balise dans une partie de template de pied de page, sous forme de bloc HTML personnalisé. Dans tous les cas, la balise doit apparaître une seule fois par page.

Décider où elle s'affiche

Le ciblage par URL de Provedly règle la question « pas sur la page de paiement » sans conditions PHP. Dans le dashboard, réglez le widget sur « all except » et listez /checkout/*, /my-account/* et /cart/. Montrer l'achat d'un inconnu à quelqu'un qui est en train de payer est une distraction, pas un encouragement.

Le ciblage par appareil se règle au même endroit. Sur petit écran, une notification entre en concurrence avec le bouton d'ajout au panier ; certaines boutiques affichent donc les notifications uniquement sur ordinateur et gardent le compteur en direct sur les deux.

Envoyer les commandes WooCommerce à la Records API

WooCommerce déclenche woocommerce_payment_complete dès qu'une commande est payée. Accrochez-vous à ce hook, construisez le payload et envoyez-le de serveur à serveur. La clé d'API est propre à chaque widget et se trouve dans l'onglet Data ; conservez-la dans wp-config.php, pas dans le thème.

add_action('woocommerce_payment_complete', function (int $order_id) {
    $order = wc_get_order($order_id);
    if (! $order) {
        return;
    }

    $item = current($order->get_items());

    wp_remote_post('https://provedly.app/api/v1/widgets/pp_your_token/records', [
        'headers' => [
            'Authorization' => 'Bearer ' . PROVEDLY_API_KEY,
            'Content-Type'  => 'application/json',
        ],
        'body' => wp_json_encode([
            'name'         => $order->get_billing_first_name() . ' ' . $order->get_billing_last_name(),
            'city'         => $order->get_shipping_city() ?: $order->get_billing_city(),
            'state'        => $order->get_shipping_state() ?: $order->get_billing_state(),
            'country'      => $order->get_shipping_country() ?: $order->get_billing_country(),
            'product_name' => $item ? $item->get_name() : null,
            'price'        => wp_strip_all_tags($order->get_formatted_order_total()),
            'external_id'  => (string) $order->get_id(),
            'occurred_at'  => $order->get_date_paid()->format(DATE_ATOM),
        ]),
        'timeout' => 5,
    ]);
});

Quelques remarques sur les champs. country doit être le code ISO à deux lettres, ce que WooCommerce stocke de toute façon. external_id rend l'appel idempotent ; si le hook se déclenche deux fois pour une même commande, la seconde requête renvoie une erreur 422 et rien n'est dupliqué. Le nom que vous envoyez est reformaté selon votre réglage de format de nom avant que quiconque ne le voie ; envoyer le nom complet ne pose donc pas de problème. Par défaut, le widget affiche « Sarah M. ».

Quelles commandes obtiennent la mention Vérifié

Voici la partie honnête. Provedly ne marque un achat « Verified » que lorsqu'il arrive par un webhook signé de Stripe, Shopify ou WooCommerce. Le webhook de commande de WooCommerce, signé avec un secret partagé avec Provedly via la connexion WooCommerce, remplit cette condition. Les commandes que vous envoyez à la Records API depuis votre propre hook, aussi réelles soient-elles, sont étiquetées « Imported », parce que Provedly ne peut pas prouver qu'elles ont eu lieu.

Comment la commande arrive chez Provedly Étiquette affichée
Webhook Stripe, checkout.session.completed, signature valide Achat vérifié
Webhook de commande WooCommerce signé, signature valide Achat vérifié
Records API depuis woocommerce_payment_complete Imported
Import CSV de commandes passées Imported

La possibilité pour votre boutique WooCommerce d'utiliser le webhook Stripe dépend de votre passerelle de paiement. La source Stripe de Provedly écoute checkout.session.completed, l'événement que Stripe envoie quand une Checkout Session hébergée se termine. Certaines intégrations Stripe pour WooCommerce utilisent le Checkout hébergé ; beaucoup utilisent des champs de carte sur le site, reposant sur des Payment Intents, qui n'émettent pas cet événement. Vérifiez les réglages de votre passerelle. Si elle produit des Checkout Sessions, enregistrez https://provedly.app/api/hooks/stripe/{token} comme endpoint de webhook dans votre dashboard Stripe et collez le secret whsec_ dans l'onglet Data du widget ; la marche à suivre est dans Stripe webhooks for verified purchases. Sinon, utilisez la connexion WooCommerce, ou le hook Records API ci-dessus en acceptant l'étiquette Imported. Vos visiteurs peuvent toujours cliquer sur le badge et voir exactement d'où viennent les données sur la page de vérification publique.

Compléter l'historique avec un CSV

Un nouveau widget sans historique n'affiche rien pendant les premières heures. Exportez les commandes du mois dernier depuis WooCommerce (Commandes, Exporter, ou n'importe quel outil d'export de commandes), renommez les colonnes en name,city,state,country,product_name,price,occurred_at et importez le fichier dans l'onglet Data. Seul name est obligatoire. Les lignes plus anciennes que votre période de référence sont conservées mais pas affichées. Détails dans Importing past orders from CSV.

Attribution

Si vous voulez que le dashboard compte les commandes assistées par la preuve, ajoutez l'identifiant du visiteur au payload. Sur la page de paiement, window.Provedly?.visitorId() le renvoie ; stockez-le dans un champ caché ou dans la session et envoyez-le en tant que visitor dans l'appel à la Records API. L'attribution repose sur l'identifiant du visiteur avec une fenêtre de 30 jours et n'est jamais estimée : sans identifiant, le dashboard n'affiche simplement rien plutôt qu'une supposition.

Questions fréquentes

Est-ce que cela va ralentir mon site WordPress ?

La balise est en async defer, le bundle pèse environ 6 Ko compressés en gzip, et le widget attend 3 secondes par défaut avant la première notification. Il ne bloque pas le rendu et n'ajoute pas de décalage de mise en page.

Puis-je utiliser une extension de snippets de code à la place de functions.php ?

Oui. Tout mécanisme qui affiche la balise dans le pied de page une fois par page fonctionne. L'idée de « sans extension », c'est que vous n'avez pas besoin d'une extension de preuve sociale dédiée avec ses propres tables de base de données et ses écrans d'administration.

Pourquoi ne pas simplement saisir quelques achats pour commencer ?

Vous pouvez. Les lignes ajoutées à la main s'affichent comme Sample, et celles envoyées par CSV ou par l'API comme Imported. Des chiffres tapés à la main présentés comme une activité en direct, c'est précisément ce que les autorités ont commencé à pointer du doigt ; la règle de la FTC sur les faux avis et témoignages est entrée en vigueur fin 2024. Les étiquettes vous mettent à l'abri.

Le plan Free couvre un site, un widget et 2 000 impressions par mois, achats vérifiés inclus : voir les plans.

wordpresswoocommerceinstallation

Recevez les nouveaux articles par e-mail

Preuve sociale honnête, achats vérifiés et ce qui fait vraiment bouger la conversion. Quelques e-mails par mois au maximum ; désinscription en un clic.

Nous vous envoyons un e-mail de confirmation. Votre adresse sert uniquement à cette newsletter ; consultez la politique de confidentialité (en anglais).

Affichez des preuves que vous pouvez assumer.

Formule gratuite, un site, 2,000 impressions par mois, achats vérifiés inclus. Sur la formule gratuite, le badge renvoie vers votre page de vérification, et c'est tout l'intérêt.