No necesitas otro plugin de WordPress para mostrar notificaciones de compra. Un hook wp_footer de cuatro líneas carga el script de Provedly, y un segundo hook en woocommerce_payment_complete envía cada pedido pagado a la Records API. Lo único que conviene entender desde el principio es qué pedidos pueden llevar la marca de "Compra verificada", porque la respuesta depende de cómo se comunica tu checkout con Stripe.
¿Prefieres un plugin? Provedly ya está en WordPress.org. Carga el widget y las barras, crea por ti el webhook firmado de WooCommerce (para que cada pedido pagado obtenga la marca de verificado) y pasa el ID de visitante para la atribución, sin código. Consulta Provedly ya está en WordPress.org. El camino manual de abajo sigue funcionando si prefieres no añadir un plugin.
Instala el script con wp_footer
Añade esto al functions.php de tu tema hijo. Si no tienes un tema hijo, créalo primero; si editas el tema padre, perderás el cambio en la siguiente actualización del tema.
add_action('wp_footer', function () {
echo '<script src="https://provedly.app/w/widget.js" data-token="pp_your_token" async defer></script>';
});
Esa es toda la instalación. El script pesa unos 6 KB comprimido con gzip, carga de forma asíncrona y se muestra en un Shadow DOM, así que el CSS de tu tema y el del widget nunca se cruzan. Los plugins de caché no son problema; la etiqueta en sí es estática y el widget descarga su propia configuración desde Provedly al cargar.
Si tu hosting bloquea functions.php, la mayoría de los temas de bloques te permiten pegar la misma etiqueta en una parte de plantilla del footer como bloque HTML personalizado. En cualquier caso, la etiqueta debe aparecer una sola vez por página.
Decide dónde se muestra
La segmentación por URL de Provedly resuelve lo de "no en la página de checkout" sin condicionales en PHP. En el panel, configura el widget en "todas excepto" y añade /checkout/*, /my-account/* y /cart/. Mostrarle la compra de un desconocido a alguien que está a mitad del pago es una distracción, no un estímulo.
La segmentación por dispositivo está en el mismo sitio. En pantallas estrechas, una notificación compite con el botón de añadir al carrito, así que algunas tiendas muestran las notificaciones solo en escritorio y mantienen el contador en vivo en ambos.
Envía los pedidos de WooCommerce a la Records API
WooCommerce dispara woocommerce_payment_complete cuando se paga un pedido. Engánchate a ese hook, construye el contenido y envíalo de servidor a servidor. La clave de API es propia de cada widget y está en la pestaña Data; guárdala en wp-config.php, no en el 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,
]);
});
Algunas notas sobre los campos. country tiene que ser el código ISO de dos letras, que es lo que guarda WooCommerce de todos modos. external_id hace que la llamada sea idempotente; si el hook se dispara dos veces para un mismo pedido, la segunda petición devuelve 422 y no se duplica nada. El nombre que envías se reformatea con tu ajuste de formato de nombre antes de que nadie lo vea, así que enviar el nombre completo está bien; por defecto el widget muestra "Sarah M.".
Qué pedidos obtienen la marca de verificado
Aquí viene la parte honesta. Provedly solo marca una compra como "Verified" cuando llega por un webhook firmado de Stripe, Shopify o WooCommerce. El propio webhook de pedidos de WooCommerce, firmado con un secreto compartido con Provedly a través de la conexión de WooCommerce, cumple el requisito. Los pedidos que envías a la Records API desde tu propio hook, por reales que sean, llevan la etiqueta "Imported" porque Provedly no puede demostrar que ocurrieron.
| Cómo llega el pedido a Provedly | Etiqueta que se muestra |
|---|---|
Webhook de Stripe, checkout.session.completed, firma válida |
Compra verificada |
| Webhook de pedidos de WooCommerce firmado, firma válida | Compra verificada |
Records API desde woocommerce_payment_complete |
Imported |
| Importación por CSV de pedidos pasados | Imported |
Que tu tienda WooCommerce pueda usar el webhook de Stripe depende de tu pasarela. La fuente de Stripe de Provedly escucha checkout.session.completed, el evento que envía Stripe cuando termina una Checkout Session alojada. Algunas integraciones de Stripe para WooCommerce usan Checkout alojado; muchas usan campos de tarjeta en el propio sitio basados en Payment Intents, que no emiten ese evento. Revisa la configuración de tu pasarela. Si genera Checkout Sessions, registra https://provedly.app/api/hooks/stripe/{token} como endpoint de webhook en tu panel de Stripe y pega el secreto whsec_ en la pestaña Data del widget; la guía completa está en Webhooks de Stripe para compras verificadas. Si no, usa la conexión de WooCommerce, o el hook de la Records API de arriba y acepta la etiqueta Imported. Tus visitantes pueden seguir haciendo clic en la insignia y ver exactamente de dónde salen los datos en la página de verificación pública.
Relleno histórico con CSV
Un widget nuevo sin historial no muestra nada durante las primeras horas. Exporta los pedidos del último mes desde WooCommerce (Pedidos, Exportar, o cualquier herramienta de exportación de pedidos), renombra las columnas como name,city,state,country,product_name,price,occurred_at e impórtalas en la pestaña Data. Solo name es obligatorio. Las filas más antiguas que tu ventana de antigüedad se guardan pero no se muestran. Los detalles están en Cómo importar pedidos pasados desde un CSV.
Atribución
Si quieres que el panel cuente los pedidos asistidos por la prueba social, añade el ID de visitante al contenido. En la página de checkout, window.Provedly?.visitorId() lo devuelve; guárdalo en un campo oculto o en la sesión y envíalo como visitor en la llamada a la Records API. La atribución se basa en el ID de visitante con una ventana de 30 días y nunca se estima, así que sin el ID el panel simplemente no muestra nada en lugar de una suposición.
Preguntas frecuentes
¿Esto ralentizará mi sitio de WordPress?
La etiqueta es async defer, el paquete pesa unos 6 KB comprimido con gzip y el widget espera 3 segundos por defecto antes de la primera notificación. No bloquea el renderizado ni provoca saltos de diseño.
¿Puedo usar un plugin de fragmentos de código en lugar de functions.php?
Sí. Cualquier mecanismo que imprima la etiqueta en el footer una vez por página funciona. Lo de "sin plugin" significa que no necesitas un plugin de prueba social dedicado con sus propias tablas en la base de datos y sus pantallas de administración.
¿Por qué no escribir algunas compras a mano para empezar?
Puedes hacerlo. Las filas añadidas a mano se muestran como Sample, y las enviadas por CSV o por la API se muestran como Imported. Los números escritos a mano presentados como actividad real son justo lo que los reguladores han empezado a señalar; la norma de la FTC sobre reseñas y testimonios falsos entró en vigor a finales de 2024. Las etiquetas te mantienen al margen de eso.
El plan Free cubre un sitio, un widget y 2.000 impresiones al mes, con compras verificadas incluidas: ver planes.