Clientseitige Integration
Das Widget ist ein kleines Paket, @caputchin/widget, das die Custom Elements <caputchin-widget> und <caputchin-game> registriert. Es gibt zwei Wege, es auf deine Seite zu bekommen. Wähl danach, ob deine Seite einen Build-Schritt hat.
Script-Tag (CDN)
Kein Build-Schritt, eine reine HTML- oder serverseitig gerenderte Seite? Lad es direkt vom jsDelivr-CDN:
<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>Das @3 pinnt die aktuelle Major-Version, sodass du Fixes und neue Spiele ohne überraschende Breaking Changes bekommst. Setz diese eine Zeile in deinen <head> (oder direkt vor </body>), und die Elemente sind für die ganze Seite registriert.
npm (ESM)
Hast du einen Bundler (Vite, webpack, Next.js und so weiter)? Installier das Paket und importier es einmal beim Start:
npm install @caputchin/widgetimport "@caputchin/widget";Der Import stellt nichts zum Aufrufen bereit; er läuft für seinen Nebeneffekt, die Custom Elements zu registrieren. Setz ihn in deinen App-Einstieg, damit er läuft, bevor irgendein <caputchin-widget> rendert.
Welcher von beiden?
- Kein Build-Schritt (reines HTML, ein serverseitig gerendertes Template): nimm das Script-Tag. Es ist die ganze Integration in einer Zeile.
- Eine gebündelte App (React, Vue und der Rest): nimm den npm-Import. Er versioniert mit deinem Lockfile und vermeidet eine render-blockierende externe Anfrage.
So oder so sind das Element und alles Nachgelagerte (das eingefügte Token, deine Server-Prüfung) identisch. Das Einzige, was sich ändert, ist, wie das Paket ankommt.
Siehe auch
- Frontend-Integrationsbeispiele für das Element in jedem Framework.
- Das Widget zu deiner Seite hinzufügen für die vollständige Anleitung.