--- type: how-to title: Clientseitige Integration summary: Wie du das Widget auf deine Seite bekommst, per CDN-Script-Tag oder npm-Import, und welcher Weg wann passt. --- Das Widget ist ein kleines Paket, `@caputchin/widget`, das die Custom Elements `` und `` registriert. Es gibt zwei Wege, es auf deine Seite zu bekommen. Wähl danach, ob deine Seite einen Build-Schritt hat. Die beiden Elemente sind nicht austauschbar, wenn ein Key ein Spiel verlangt. Hat ein Site-Key das Spiel-Gate eingeschaltet (seine Einstellung **Ein Spiel zur Verifizierung verlangen**), kann das Checkbox-`` darauf nicht durchkommen und wirft einen `gate-unavailable`-Fehler; nur `` funktioniert dort. Das ist Absicht, weil das Gate auf Caputchins Seite durchgesetzt wird. Sieh dir [das Spiel-Gate](/docs/site-keys/games) an. ## Script-Tag (CDN) Kein Build-Schritt, eine reine HTML- oder serverseitig gerenderte Seite? Lad es direkt vom jsDelivr-CDN: ```html ``` Das `@3` pinnt die aktuelle Major-Version, sodass du Fixes und neue Spiele ohne überraschende Breaking Changes bekommst. Setz diese eine Zeile in deinen `` (oder direkt vor ``), 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: ```bash npm install @caputchin/widget ``` ```js import "@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 `` 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](/docs/integration-guides/frontend-examples) für das Element in jedem Framework. - [Das Widget zu deiner Seite hinzufügen](/docs/getting-started/add-the-widget) für die vollständige Anleitung.