Integrasi sisi klien
Widget adalah satu paket kecil, @caputchin/widget, yang mendaftarkan elemen kustom <caputchin-widget> dan <caputchin-game>. Ada dua cara menaruhnya di halamanmu. Pilih berdasarkan apakah situsmu punya langkah build.
Tag script (CDN)
Tanpa langkah build, sebuah halaman HTML murni atau yang dirender server? Muat langsung dari CDN jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>@3 itu memin versi major saat ini, jadi kamu dapat perbaikan dan game baru tanpa breaking change yang mengejutkan. Taruh satu baris itu di <head>-mu (atau tepat sebelum </body>) dan elemen-elemennya terdaftar untuk seluruh halaman.
npm (ESM)
Punya bundler (Vite, webpack, Next.js, dan seterusnya)? Pasang paketnya dan impor sekali saat startup:
npm install @caputchin/widgetimport "@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 <caputchin-widget> 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 untuk elemen di tiap framework.
- Tambahkan widget ke situsmu untuk panduan lengkapnya.