Prova social no WordPress e no WooCommerce sem plugin

Você não precisa de mais um plugin de WordPress para mostrar notificações de compra. Um hook wp_footer de quatro linhas carrega o script da Provedly, e um segundo hook em woocommerce_payment_complete envia cada pedido pago para a Records API. A única coisa a entender logo de início é quais desses pedidos podem levar a marca de "Compra verificada", porque a resposta depende de como o seu checkout conversa com o Stripe.

Prefere um plugin? A Provedly agora está no WordPress.org. Ele carrega o widget e as barras, cria o webhook assinado do WooCommerce para você (para que todo pedido pago receba a marca de verificado) e repassa o ID de visitante para a atribuição, sem código. Veja A Provedly agora está no WordPress.org. O caminho escrito à mão abaixo continua funcionando se você preferir não adicionar um plugin.

Instale o script com wp_footer

Adicione isto ao functions.php do seu tema filho. Se você não tem um tema filho, crie um antes; editar o tema pai significa perder a mudança na próxima atualização do tema.

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

Essa é a instalação inteira. O script tem cerca de 6 KB com gzip, carrega de forma assíncrona e renderiza num Shadow DOM, então o CSS do seu tema e o CSS do widget nunca se encontram. Plugins de cache não são problema; a tag em si é estática, e o widget busca a própria configuração na Provedly ao carregar.

Se a sua hospedagem bloqueia o functions.php, a maioria dos temas de blocos permite colar a mesma tag numa parte de template do rodapé como um bloco HTML personalizado. De qualquer forma, a tag deve aparecer uma vez por página.

Decida onde ela aparece

A segmentação por URL da Provedly resolve a questão do "não na página de checkout" sem condicionais em PHP. No painel, configure o widget como "todas exceto" e liste /checkout/*, /my-account/* e /cart/. Mostrar a compra de um desconhecido a alguém no meio do pagamento é uma distração, não um incentivo.

A segmentação por dispositivo fica no mesmo lugar. Em telas estreitas, uma notificação disputa espaço com o botão de adicionar ao carrinho, então algumas lojas mostram notificações só no desktop e mantêm o contador ao vivo nos dois.

Envie os pedidos do WooCommerce para a Records API

O WooCommerce dispara woocommerce_payment_complete quando um pedido é pago. Engate nesse hook, monte o payload e envie de servidor para servidor. A chave de API é por widget e fica na aba Data; guarde-a no wp-config.php, não no tema.

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,
    ]);
});

Algumas observações sobre os campos. country deve ser o código ISO de duas letras, que é o que o WooCommerce já armazena. external_id torna a chamada idempotente; se o hook disparar duas vezes para o mesmo pedido, a segunda requisição retorna 422 e nada é duplicado. O nome que você envia é reformatado pela sua configuração de formato de nome antes que alguém o veja, então enviar o nome completo não é problema; por padrão, o widget mostra "Sarah M.".

Quais pedidos recebem a marca de verificado

Esta é a parte honesta. A Provedly só marca uma compra como verificada quando ela chega por um webhook assinado do Stripe, da Shopify ou do WooCommerce. O próprio webhook de pedidos do WooCommerce, assinado com um segredo compartilhado com a Provedly pela conexão WooCommerce, se qualifica. Pedidos que você envia para a Records API a partir do seu próprio hook, por mais reais que sejam, recebem o rótulo "Imported", porque a Provedly não consegue provar que eles aconteceram.

Se a sua loja WooCommerce pode usar o webhook do Stripe depende do seu gateway. A fonte Stripe da Provedly escuta checkout.session.completed, o evento que o Stripe envia quando uma Checkout Session hospedada é concluída. Algumas integrações do Stripe com o WooCommerce usam o Checkout hospedado; muitas usam campos de cartão no próprio site baseados em Payment Intents, que não emitem esse evento. Confira as configurações do seu gateway. Se ele gera Checkout Sessions, registre https://provedly.app/api/hooks/stripe/{token} como endpoint de webhook no painel do Stripe e cole o segredo whsec_ na aba Data do widget; o passo a passo está em Webhooks do Stripe para compras verificadas. Se não gera, use a conexão WooCommerce, ou o hook da Records API acima, e aceite o rótulo Imported. Os seus visitantes ainda podem clicar no selo e ver exatamente de onde vieram os dados na página de verificação pública.

Preenchimento retroativo com CSV

Um widget novo sem histórico não mostra nada nas primeiras horas. Exporte os pedidos do mês passado no WooCommerce (Orders, Export, ou qualquer ferramenta de exportação de pedidos), renomeie as colunas para name,city,state,country,product_name,price,occurred_at e importe na aba Data. Só name é obrigatório. Linhas mais antigas que a sua janela de retroatividade são armazenadas, mas não exibidas. Detalhes em Como importar pedidos antigos via CSV.

Atribuição

Se você quer que o painel conte os pedidos assistidos pela prova, adicione o ID de visitante ao payload. Na página de checkout, window.Provedly?.visitorId() o retorna; guarde-o num campo oculto ou na sessão e envie-o como visitor na chamada à Records API. A atribuição é baseada no ID de visitante, com janela de 30 dias, e nunca é estimada, então sem o ID o painel simplesmente não mostra nada em vez de um palpite.

Perguntas frequentes

Isso vai deixar o meu site WordPress mais lento?

A tag é async defer, o pacote tem cerca de 6 KB com gzip e o widget espera 3 segundos por padrão antes da primeira notificação. Ele não bloqueia a renderização e não causa layout shift.

Posso usar um plugin de snippets de código em vez do functions.php?

Sim. Qualquer mecanismo que coloque a tag no rodapé uma vez por página funciona. A ideia do "sem plugin" é que você não precisa de um plugin dedicado de prova social, com as próprias tabelas no banco de dados e telas de administração.

Por que não digitar algumas compras para começar?

Você pode. Linhas adicionadas à mão aparecem como Sample, e linhas enviadas por CSV ou pela API aparecem como Imported. Números digitados apresentados como atividade ao vivo são justamente o que os órgãos reguladores começaram a citar; a regra da FTC sobre avaliações e depoimentos falsos entrou em vigor no fim de 2024. Os rótulos mantêm você longe disso.

O plano Free cobre um site, um widget e 2.000 impressões por mês, com compras verificadas incluídas: veja os planos.