Webflow

O Caputchin entra num site Webflow com código personalizado. Não há um app de marketplace para instalar: você adiciona o widget do mesmo jeito que adiciona qualquer script de terceiros e o liga ao seu formulário. O widget completo e os jogos funcionam ambos.

Abra o Site Settings → Custom Code do seu projeto e cole o carregador no campo Head Code:

<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>

O @3 fixa a versão major atual, então você recebe correções e novos jogos sem uma mudança que quebre de surpresa. Essa única linha registra os elementos <caputchin-widget> e <caputchin-game> para o site inteiro. (Veja Integração no lado do cliente para a opção de npm se o seu site tem uma etapa de build.)

2. Ponha-o no seu formulário

No Designer, adicione um elemento Embed (Add panel → Components → Embed) dentro do <form> que você quer proteger e coloque o widget nele. Use a sua chave de site pública do painel:

<caputchin-widget sitekey="cpt_pub_..." trigger="form-submit"></caputchin-widget>

trigger="form-submit" roda a conferência quando o formulário é enviado e segura o envio até ela passar. A checkbox também é clicável: um visitante pode clicá-la para verificar antes de enviar, o que injeta o token ali mesmo sem enviar o formulário. Ao passar (seja por clique, seja por envio), o widget injeta um <input name="caputchin-token"> oculto no formulário que o envolve, e é isso que a sua etapa de verificação lê.

Para um jogo no lugar da checkbox, use <caputchin-game>:

<caputchin-game sitekey="cpt_pub_..." game="caputchin/games/leaf-memory" layout="inline"></caputchin-game>

3. Verifique o token

O widget prova que um humano passou no navegador; você ainda confirma o token no servidor antes de confiar no envio. Escolha o modo que combina com o seu arranjo.

O seu próprio backend (recomendado quando você tem um)

Abra as configurações do formulário no Designer, ponha Send to → Custom action e aponte para o seu endpoint. O seu servidor lê o campo caputchin-token e o confirma com /siteverify. Veja Integração no lado do servidor e Migre do reCAPTCHA para a chamada de servidor exata.

Verificação hospedada do Caputchin (sem backend)

Se você não roda um servidor, aponte o Custom action do formulário para a URL do seu encaminhador de verificação hospedada, aquela que o painel te mostra. O Caputchin verifica o token e entrega o envio ao seu webhook ou e-mail. Esse é um recurso pago, e ele substitui a caixa de envios nativa do Webflow (o formulário posta para o Caputchin em vez do Webflow). Veja Verificação hospedada.

Portão no cliente (um freio, não verificado no servidor)

Deixe o formulário no tratador nativo do Webflow e conte com trigger="form-submit" para bloquear o envio até a conferência passar. Isso eleva a barra para os bots, mas não é uma garantia verificada no servidor, então use só onde isso for aceitável.