Client side integration
The widget is one small package, @caputchin/widget, that registers the <caputchin-widget> and <caputchin-game> 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 <caputchin-widget> cannot pass on it and raises a gate-unavailable error; only <caputchin-game> works there. This is by design, because the gate is enforced on Caputchin's side. See the game gate.
Script tag (CDN)
No build step, a plain HTML or server-rendered page? Load it straight from the jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>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 <head> (or just before </body>) 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:
npm install @caputchin/widgetimport "@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 <caputchin-widget> 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 for the element in each framework.
- Add the widget to your site for the full walkthrough.