--- type: how-to title: Client side integration summary: How to get the widget onto your page, by a CDN script tag or an npm import, and which to use. --- The widget is one small package, `@caputchin/widget`, that registers the `` and `` custom elements. There are two ways to get it onto your page. Pick by whether your site has a build step. The two elements are not interchangeable when a key requires a game. If a site key has the game gate turned on (its **Require a game to verify** setting), the checkbox `` cannot pass on it and raises a `gate-unavailable` error; only `` works there. This is by design, because the gate is enforced on Caputchin's side. See [the game gate](/docs/site-keys/games). ## Script tag (CDN) No build step, a plain HTML or server-rendered page? Load it straight from the jsDelivr CDN: ```html ``` The `@3` pins the current major version, so you get fixes and new games without a surprise breaking change. Drop that one line in your `` (or just before ``) and the elements are registered for the whole page. ## npm (ESM) Have a bundler (Vite, webpack, Next.js, and so on)? Install the package and import it once at startup: ```bash npm install @caputchin/widget ``` ```js import "@caputchin/widget"; ``` The import exposes nothing to call; it runs for its side effect of registering the custom elements. Put it in your app entry so it runs before any `` renders. ## Which one? - **No build step** (plain HTML, a server-rendered template): use the **script tag**. It is the whole integration in one line. - **A bundled app** (React, Vue, and the rest): use the **npm import**. It versions with your lockfile and avoids a render-blocking external request. Either way, the element and everything downstream (the injected token, your server check) are identical. The only thing that changes is how the package arrives. ## See also - [Frontend integration examples](/docs/integration-guides/frontend-examples) for the element in each framework. - [Add the widget to your site](/docs/getting-started/add-the-widget) for the full walkthrough.