--- type: how-to title: Integración del lado del cliente summary: Cómo poner el widget en tu página, por una etiqueta de script de CDN o un import de npm, y cuál usar. --- El widget es un paquete pequeño, `@caputchin/widget`, que registra los custom elements `` y ``. 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 `` de checkbox no puede pasar en ella y lanza un error `gate-unavailable`; solo `` funciona ahí. Esto es a propósito, porque el gate se impone del lado de Caputchin. Mira [el gate de juego](/docs/site-keys/games). ## 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: ```html ``` 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 `` (o justo antes de ``) 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: ```bash npm install @caputchin/widget ``` ```js import "@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 ``. ## ¿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](/docs/integration-guides/frontend-examples) para el elemento en cada framework. - [Añade el widget a tu sitio](/docs/getting-started/add-the-widget) para el recorrido completo.