Integración del lado del cliente
El widget es un paquete pequeño, @caputchin/widget, que registra los custom elements <caputchin-widget> y <caputchin-game>. Hay dos formas de ponerlo en tu página. Elige según si tu sitio tiene un paso de build.
Los dos elementos no son intercambiables cuando una clave exige un juego. Si una clave de sitio tiene el gate de juego activado (su ajuste Exigir un juego para verificar), el <caputchin-widget> de checkbox no puede pasar en ella y lanza un error gate-unavailable; solo <caputchin-game> funciona ahí. Esto es a propósito, porque el gate se impone del lado de Caputchin. Mira el gate de juego.
Etiqueta de script (CDN)
¿Sin paso de build, una página HTML plana o renderizada en el servidor? Cárgalo directo desde el CDN de jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>El @3 fija la versión major actual, así que obtienes fixes y juegos nuevos sin un breaking change sorpresa. Suelta esa única línea en tu <head> (o justo antes de </body>) y los elementos quedan registrados para toda la página.
npm (ESM)
¿Tienes un bundler (Vite, webpack, Next.js, etcétera)? Instala el paquete e impórtalo una vez al arranque:
npm install @caputchin/widgetimport "@caputchin/widget";El import no expone nada que llamar; corre por su efecto secundario de registrar los custom elements. Ponlo en el punto de entrada de tu app para que corra antes de que se renderice cualquier <caputchin-widget>.
¿Cuál de los dos?
- Sin paso de build (HTML plano, una plantilla renderizada en el servidor): usa la etiqueta de script. Es la integración entera en una línea.
- Una app empaquetada (React, Vue y el resto): usa el import de npm. Versiona con tu lockfile y evita una petición externa que bloquee el render.
De una forma u otra, el elemento y todo lo que va después (el token inyectado, tu comprobación de servidor) son idénticos. Lo único que cambia es cómo llega el paquete.
Véase también
- Ejemplos de integración de frontend para el elemento en cada framework.
- Añade el widget a tu sitio para el recorrido completo.