クライアント側の連携

ウィジェットは 1 つの小さなパッケージ @caputchin/widget で、<caputchin-widget> と <caputchin-game> のカスタム要素を登録します。それをページに載せる方法は 2 つあります。サイトにビルド手順があるかどうかで選んでください。

script タグ（CDN）

ビルド手順がなく、素の HTML またはサーバーレンダリングのページですか？jsDelivr CDN から直接読み込みます：

<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>

@3 は現在のメジャーバージョンを固定するので、不意の破壊的変更なしに修正と新しいゲームを受け取れます。その 1 行を <head> の中（または </body> の直前）に置けば、要素はページ全体に登録されます。

バンドラー（Vite、webpack、Next.js など）がありますか？パッケージをインストールし、起動時に一度インポートします：

npm install @caputchin/widget

import "@caputchin/widget";

このインポートは呼び出すものを何も公開しません。カスタム要素を登録するという副作用のために実行されます。どの <caputchin-widget> がレンダリングされるより前に走るよう、アプリのエントリーポイントに置いてください。

ビルド手順なし（素の HTML、サーバーレンダリングのテンプレート）：script タグ を使います。これは連携全体を 1 行で済ませます。
バンドルされたアプリ（React、Vue、その他）：npm インポート を使います。lockfile とともにバージョン管理され、レンダリングをブロックする外部リクエストを避けられます。

どちらにしても、要素と、その下流のすべて（注入されるトークン、サーバーの確認）は同一です。変わるのは、パッケージがどう届くかだけです。