--- type: how-to title: クライアント側の連携 summary: CDN の script タグまたは npm インポートで、ウィジェットをページに載せる方法と、どちらを使うか。 --- ウィジェットは 1 つの小さなパッケージ `@caputchin/widget` で、`` と `` のカスタム要素を登録します。それをページに載せる方法は 2 つあります。サイトにビルド手順があるかどうかで選んでください。キーがゲームを必須にしているとき、2 つの要素は入れ替え可能ではありません。サイトキーでゲームゲートがオン（その **検証にゲームを必須にする** 設定）になっていると、チェックボックスの `` はその上で通れず、`gate-unavailable` エラーを出します。そこで動くのは `` だけです。これは設計どおりで、ゲートが Caputchin 側で強制されるからです。[ゲームゲート](/docs/site-keys/games) を参照してください。 ## script タグ（CDN）ビルド手順がなく、素の HTML またはサーバーレンダリングのページですか？jsDelivr CDN から直接読み込みます： ```html ``` `@3` は現在のメジャーバージョンを固定するので、不意の破壊的変更なしに修正と新しいゲームを受け取れます。その 1 行を `` の中（または `` の直前）に置けば、要素はページ全体に登録されます。 ## npm（ESM）バンドラー（Vite、webpack、Next.js など）がありますか？パッケージをインストールし、起動時に一度インポートします： ```bash npm install @caputchin/widget ``` ```js import "@caputchin/widget"; ``` このインポートは呼び出すものを何も公開しません。カスタム要素を登録するという副作用のために実行されます。どの `` がレンダリングされるより前に走るよう、アプリのエントリーポイントに置いてください。 ## どちらを？ - **ビルド手順なし**（素の HTML、サーバーレンダリングのテンプレート）：**script タグ** を使います。これは連携全体を 1 行で済ませます。 - **バンドルされたアプリ**（React、Vue、その他）：**npm インポート** を使います。lockfile とともにバージョン管理され、レンダリングをブロックする外部リクエストを避けられます。どちらにしても、要素と、その下流のすべて（注入されるトークン、サーバーの確認）は同一です。変わるのは、パッケージがどう届くかだけです。 ## あわせて読む - 各フレームワークでの要素については [フロントエンド連携の例](/docs/integration-guides/frontend-examples)。 - 完全な手順については [サイトにウィジェットを追加する](/docs/getting-started/add-the-widget)。