Integração no lado do cliente
O widget é um pequeno pacote, @caputchin/widget, que registra os elementos personalizados <caputchin-widget> e <caputchin-game>. Há duas formas de pô-lo na sua página. Escolha conforme seu site ter ou não uma etapa de build.
Os dois elementos não são intercambiáveis quando uma chave exige um jogo. Se uma chave de site tem o portão de jogo ligado (sua configuração Exigir um jogo para verificar), o <caputchin-widget> de checkbox não passa nela e lança um erro gate-unavailable; só o <caputchin-game> funciona ali. Isso é proposital, porque o portão é imposto do lado do Caputchin. Veja o portão de jogo.
Tag de script (CDN)
Sem etapa de build, uma página HTML pura ou renderizada no servidor? Carregue-o direto do CDN jsDelivr:
<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. Solte essa única linha no seu <head> (ou logo antes de </body>) e os elementos ficam registrados para a página inteira.
npm (ESM)
Tem um bundler (Vite, webpack, Next.js e por aí vai)? Instale o pacote e importe-o uma vez na inicialização:
npm install @caputchin/widgetimport "@caputchin/widget";O import não expõe nada para chamar; ele roda pelo efeito colateral de registrar os elementos personalizados. Coloque-o no ponto de entrada do seu app para que rode antes de qualquer <caputchin-widget> renderizar.
Qual deles?
- Sem etapa de build (HTML puro, um template renderizado no servidor): use a tag de script. É a integração inteira em uma linha.
- Um app empacotado (React, Vue e o resto): use o import npm. Ele versiona com seu lockfile e evita uma requisição externa que bloqueia a renderização.
De um jeito ou de outro, o elemento e tudo o que vem depois (o token injetado, a conferência no seu servidor) são idênticos. A única coisa que muda é como o pacote chega.
Veja também
- Exemplos de integração de frontend para o elemento em cada framework.
- Adicionar o widget ao seu site para o passo a passo completo.