--- type: how-to title: Integrasi sisi klien summary: Cara menaruh widget di halamanmu, lewat tag script CDN atau impor npm, dan mana yang dipakai. --- Widget adalah satu paket kecil, `@caputchin/widget`, yang mendaftarkan elemen kustom `` dan ``. Ada dua cara menaruhnya di halamanmu. Pilih berdasarkan apakah situsmu punya langkah build. Kedua elemen itu tak bisa dipertukarkan saat sebuah key mewajibkan game. Jika sebuah kunci situs punya gerbang game menyala (pengaturan **Wajibkan game untuk verifikasi**-nya), `` checkbox tak bisa lolos padanya dan memunculkan galat `gate-unavailable`; hanya `` yang berfungsi di sana. Ini disengaja, karena gerbang ditegakkan di sisi Caputchin. Lihat [gerbang game](/docs/site-keys/games). ## Tag script (CDN) Tanpa langkah build, sebuah halaman HTML murni atau yang dirender server? Muat langsung dari CDN jsDelivr: ```html ``` `@3` itu memin versi major saat ini, jadi kamu dapat perbaikan dan game baru tanpa breaking change yang mengejutkan. Taruh satu baris itu di ``-mu (atau tepat sebelum ``) dan elemen-elemennya terdaftar untuk seluruh halaman. ## npm (ESM) Punya bundler (Vite, webpack, Next.js, dan seterusnya)? Pasang paketnya dan impor sekali saat startup: ```bash npm install @caputchin/widget ``` ```js import "@caputchin/widget"; ``` Impor itu tak memaparkan apa pun untuk dipanggil; ia berjalan untuk efek sampingnya, mendaftarkan elemen kustom. Taruh di entry aplikasimu agar ia berjalan sebelum `` mana pun dirender. ## Yang mana? - **Tanpa langkah build** (HTML murni, sebuah template yang dirender server): pakai **tag script**. Itu seluruh integrasi dalam satu baris. - **Aplikasi terbundel** (React, Vue, dan sisanya): pakai **impor npm**. Ia berversi dengan lockfile-mu dan menghindari permintaan eksternal yang memblokir render. Bagaimanapun caranya, elemen dan segala yang di hilir (token yang disuntikkan, pemeriksaan servermu) identik. Satu-satunya yang berubah adalah cara paketnya tiba. ## Lihat juga - [Contoh integrasi frontend](/docs/integration-guides/frontend-examples) untuk elemen di tiap framework. - [Tambahkan widget ke situsmu](/docs/getting-started/add-the-widget) untuk panduan lengkapnya.