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.
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.