A Provedly é instalada com uma única tag de script, de cerca de 6 KB compactada com gzip, renderizada dentro de um Shadow DOM para não brigar com os seus estilos. Isso a torna ideal para um agente de programação com IA: entregue o snippet, diga onde fica o seu layout e peça que ele verifique o resultado. Este post traz um prompt para colar e um checklist do que confirmar depois.
O que o agente precisa de você
Agentes vão bem com informações concretas e mal com suposições. Antes de começar, reúna:
- O snippet de script do seu site, no painel da Provedly. Ele contém o identificador do seu site; não deixe o agente inventar um.
- Onde fica o seu layout compartilhado. O arquivo que envolve todas as páginas: um root layout no Next.js, um layout Blade no Laravel, um template base no Django, o
header.phpem um tema WordPress. - Quais páginas devem exibir prova. A segmentação é configurada na Provedly, não no código, mas o agente precisa saber que não deve adicionar lógica condicional por conta própria.
- Se você usa Stripe. Se usar, vai querer configurar também o endpoint de webhook para que as compras cheguem verificadas.
Lojas Shopify não precisam de nada disso. O app da Provedly para Shopify usa uma extensão de app de tema que você ativa no editor de temas, sem editar código.
Um prompt para colar
Ajuste as partes entre colchetes e entregue ao seu 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.
O último bloco é importante. Pedir que o agente verifique e relate impede que ele declare sucesso depois de uma única edição.
Notas por framework
Next.js (App Router). O agente deve colocar a tag no root layout, normalmente usando next/script com uma estratégia lazy ou after-interactive para nunca bloquear a hidratação. Uma única inserção cobre todas as rotas.
Laravel com Blade ou Inertia. O layout Blade raiz que envolve o app é o lugar certo, logo antes de </body>. Em um app Inertia continua existindo uma única view raiz, então uma edição cobre tudo.
WordPress. O template de rodapé do tema ou um pequeno plugin que enfileira o script no rodapé. Evite colar em templates de páginas individuais.
Sites estáticos e HTML puro. O include de rodapé compartilhado. Se as páginas não compartilham um include, o agente deve adicionar a tag em cada página, mas isso é sinal de que vale criar um include compartilhado antes.
Shopify. Não mexa no código do tema. Instale o app, aprove o Shopify Billing e ative o embed da Provedly no painel de incorporações de app do editor de temas. O app registra os webhooks de pedidos para você.
Os detalhes de instalação de cada caminho ficam atualizados na /docs.
O que conferir quando o agente terminar
Agentes entregam relatórios cheios de confiança, então confira algumas coisas você mesmo.
| Verificação | Como |
|---|---|
| A tag está no layout compartilhado, uma vez | Busque o snippet no código; deve haver uma ocorrência |
| Ela aparece em páginas reais | Veja o código-fonte de duas páginas, incluindo uma interna |
| Ela não bloqueia | Carrega depois do conteúdo principal; sem layout shift |
| O Shadow DOM está ativo | Inspecione a notificação; ela fica dentro de um shadow root |
| A segmentação funciona | Abra uma página excluída e confirme que nada aparece |
| O tamanho é o esperado | O painel Network mostra um script pequeno com gzip |
Se o agente adicionou renderização condicional, checagens de ambiente ou wrappers que você não pediu, remova. O script foi feito para ser colocado como está, e a segmentação por URL e por dispositivo da Provedly decide quais páginas mostram o quê. As regras de segmentação estão em /blog/where-to-show-social-proof-page-targeting.
Fazendo as compras verificadas chegarem
O script exibe a prova; ele não a cria. Para que as notificações levem a marca de Compra verificada, as compras precisam chegar por um webhook assinado.
No Stripe, isso significa adicionar um endpoint de webhook no painel do Stripe apontando para o endereço que a Provedly fornece e colar o signing secret na Provedly. Um agente também pode ajudar aqui, mas cuidado com o que você entrega a ele: o signing secret é sensível e pertence às configurações da Provedly, não ao seu repositório. Os eventos exatos que você deve assinar estão na /docs, e o caminho completo do checkout até a notificação está em /blog/how-verified-purchase-notifications-work.
Até o primeiro webhook chegar, o widget não tem nada verificado para mostrar. Resista à tentação de pedir ao agente que crie registros. Tudo o que é adicionado à mão recebe o rótulo Sample e tudo o que vem de um CSV recebe o rótulo Imported. Samples em um site no ar servem para pré-visualização, e importações servem para pedidos reais do passado, não para preencher o silêncio. Veja /blog/sample-records-labelled-honestly.
O que os agentes erram nesta tarefa
Alguns padrões para observar, com base em como agentes de programação costumam se comportar:
- Inventar um site id quando o snippet não foi fornecido. Sempre cole o snippet real.
- Adicionar a tag em vários templates em vez do compartilhado, gerando carregamentos duplicados.
- Envolver o script em checagens de ambiente para que ele só rode em produção, o que torna impossível verificar localmente. O plano grátis e a segmentação da Provedly tornam seguro rodá-lo localmente.
- Escrever um componente de notificação falso em vez de instalar o script, porque o agente entendeu a tarefa como "construir uma notificação". O prompt acima evita isso ao pedir que o snippet seja usado exatamente como está.
- Declarar sucesso sem renderizar uma página. Peça evidências.
Nada disso é difícil de perceber se você olhar. A instalação em si é uma linha; o cuidado está em confirmá-la.
Perguntas frequentes
O widget precisa de alguma configuração no código?
Não. Todas as configurações de segmentação, tempo e aparência ficam no painel da Provedly. A mudança no código é a única tag de script.
O agente pode configurar o webhook do Stripe para mim?
Ele pode guiar você pelos passos no painel do Stripe, mas o signing secret deve ser inserido na Provedly por você e mantido fora do repositório e, sempre que possível, fora do contexto do agente.
O script vai afetar o desempenho da página?
Ele tem cerca de 6 KB com gzip e carrega sem bloquear a renderização quando colocado como descrito. O Shadow DOM mantém os estilos dele isolados dos seus.
Pegue o seu snippet no painel depois de se cadastrar em /register e mantenha a /docs aberta para os detalhes de cada framework.