Provedly se instala con una sola etiqueta script, de unos 6 KB comprimida con gzip, que se muestra dentro de un Shadow DOM para no pelearse con tus estilos. Eso la hace ideal para un agente de programación con IA: le das el snippet, le dices dónde está tu layout y le pides que lo verifique. En este artículo tienes un prompt para pegar y una lista de lo que conviene confirmar después.
Lo que el agente necesita de ti
A los agentes les va bien con datos concretos y mal con suposiciones. Antes de empezar, reúne:
- El snippet de tu sitio desde el panel de Provedly. Contiene el identificador de tu sitio; no dejes que el agente se invente uno.
- Dónde está tu layout compartido. El archivo que envuelve todas las páginas: un root layout en Next.js, un layout de Blade en Laravel, una plantilla base en Django,
header.phpen un tema de WordPress. - Qué páginas deben mostrar prueba social. La segmentación se configura en Provedly, no en el código, pero el agente debe saber que no tiene que añadir lógica condicional por su cuenta.
- Si usas Stripe. En ese caso, también querrás configurar el endpoint del webhook para que las compras lleguen verificadas.
Las tiendas Shopify no necesitan nada de esto. La app de Provedly para Shopify usa una extensión de tema que activas en el editor del tema, sin tocar código.
Un prompt que puedes pegar
Ajusta las partes entre corchetes y pásaselo a tu agente.
Add the Provedly social proof script to this project.
Snippet (use exactly as given, do not modify the site id):
[paste the script tag from the Provedly dashboard]
Requirements:
- Add it once, in the shared layout so it loads on every page:
[path to your layout file]
- Place it before the closing </body> tag, or use the framework's
standard mechanism for third-party scripts (for example next/script
with a non-blocking strategy).
- Do not add page-level conditions; targeting is configured in Provedly.
- Do not add any other analytics or tracking.
- Do not create sample data or placeholder records anywhere.
Then verify:
- Start the dev server and confirm the script tag is present in the
rendered HTML of two different pages.
- Confirm there are no console errors from the script.
- Confirm the script does not block rendering.
Report what you changed and the result of each check.
El último bloque es importante. Pedirle al agente que verifique y te informe evita que dé la tarea por terminada después de una sola edición.
Notas por framework
Next.js (App Router). El agente debe poner la etiqueta en el root layout, normalmente con next/script y una estrategia lazy o after-interactive para que nunca bloquee la hidratación. Una sola ubicación cubre todas las rutas.
Laravel con Blade o Inertia. El lugar correcto es el layout raíz de Blade que envuelve la app, justo antes de </body>. En una app con Inertia sigue habiendo una única vista raíz, así que una sola edición lo cubre todo.
WordPress. La plantilla del footer del tema o un pequeño plugin que cargue el script en el footer. Evita pegarlo en plantillas de páginas individuales.
Sitios estáticos y HTML plano. El include compartido del footer. Si las páginas no comparten ningún include, el agente debería añadirlo a cada página, pero eso es señal de que primero conviene crear un include compartido.
Shopify. No toques el código del tema. Instala la app, aprueba Shopify Billing y activa el embed de Provedly en el panel de app embeds del editor del tema. La app registra los webhooks de pedidos por ti.
Los detalles de instalación de cada caso se mantienen al día en /docs.
Qué revisar cuando el agente termine
Los agentes entregan informes muy seguros de sí mismos, así que revisa algunas cosas tú mismo.
| Comprobación | Cómo |
|---|---|
| La etiqueta está en el layout compartido, una vez | Busca el snippet en el código; una sola coincidencia |
| Se muestra en páginas reales | Mira el código fuente de dos páginas, una de ellas profunda |
| No bloquea | Carga después del contenido principal; sin saltos de diseño |
| El Shadow DOM está activo | Inspecciona la notificación; vive dentro de un shadow root |
| La segmentación funciona | Abre una página excluida y comprueba que no aparece nada |
| El tamaño es el esperado | El panel Network muestra un script pequeño comprimido |
Si el agente añadió renderizado condicional, comprobaciones de entorno o envoltorios que no pediste, quítalos. El script está pensado para pegarse tal cual, y la segmentación por URL y dispositivo de Provedly decide qué páginas muestran qué. Las reglas de segmentación se explican en /blog/where-to-show-social-proof-page-targeting.
Cómo empezar a recibir compras verificadas
El script muestra la prueba social; no la crea. Para que las notificaciones lleven la marca de Compra verificada, las compras tienen que llegar por un webhook firmado.
En Stripe, eso significa añadir en tu panel de Stripe un endpoint de webhook que apunte a la dirección que te da Provedly y pegar el secreto de firma en Provedly. Un agente también puede ayudarte aquí, pero ten cuidado con lo que le entregas: el secreto de firma es sensible y su lugar es la configuración de Provedly, no tu repositorio. Los eventos exactos a los que suscribirte están en /docs, y el recorrido completo del checkout a la notificación está en /blog/how-verified-purchase-notifications-work.
Hasta que llegue el primer webhook, el widget no tiene nada verificado que mostrar. No caigas en la tentación de pedirle al agente que cree registros de relleno. Todo lo que se añade a mano lleva la etiqueta "Sample" y todo lo que viene de un CSV lleva la etiqueta "Imported". Los ejemplos en un sitio en producción sirven para previsualizar, y las importaciones son para pedidos pasados reales, no para llenar el silencio. Consulta /blog/sample-records-labelled-honestly.
Errores típicos de los agentes en esta tarea
Algunos patrones a vigilar, según cómo suelen comportarse los agentes de programación:
- Inventarse un site id cuando no se les dio el snippet. Pega siempre el snippet real.
- Añadir la etiqueta a varias plantillas en lugar de a la compartida, lo que provoca cargas duplicadas.
- Envolver el script en comprobaciones de entorno para que solo se ejecute en producción, lo que hace imposible verificarlo en local. El plan gratuito y la segmentación de Provedly hacen que sea seguro ejecutarlo en local.
- Escribir un componente de notificación falso en lugar de instalar el script, porque el agente entendió la tarea como "crear una notificación". El prompt de arriba lo evita al pedir que use el snippet tal cual.
- Dar la tarea por terminada sin renderizar ninguna página. Pide pruebas.
Ninguno de estos errores es difícil de detectar si miras. La instalación en sí es una línea; el cuidado está en confirmarla.
Preguntas frecuentes
¿El widget necesita alguna configuración en el código?
No. Toda la segmentación, los tiempos y la apariencia se configuran en el panel de Provedly. El cambio en el código es solo la etiqueta script.
¿Puede el agente configurar el webhook de Stripe por mí?
Puede guiarte por los pasos en el panel de Stripe, pero el secreto de firma deberías introducirlo tú en Provedly y mantenerlo fuera del repositorio y, en lo posible, fuera del contexto del agente.
¿El script afecta al rendimiento de la página?
Pesa unos 6 KB comprimido con gzip y carga sin bloquear el renderizado si lo colocas como se describe. El Shadow DOM mantiene sus estilos aislados de los tuyos.
Consigue tu snippet en el panel después de registrarte en /register y ten /docs a mano para los detalles de cada framework.