Integración del lado del cliente
El widget es un paquete pequeño, @caputchin/widget, que registra los custom elements <caputchin-widget> y <caputchin-game>. Hay dos formas de ponerlo en tu página. Elige según si tu sitio tiene un paso de build.
Etiqueta de script (CDN)
¿Sin paso de build, una página HTML plana o renderizada en el servidor? Cárgalo directo desde el CDN de jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>El @3 fija la versión major actual, así que obtienes fixes y juegos nuevos sin un breaking change sorpresa. Suelta esa única línea en tu <head> (o justo antes de </body>) y los elementos quedan registrados para toda la página.
npm (ESM)
¿Tienes un bundler (Vite, webpack, Next.js, etcétera)? Instala el paquete e impórtalo una vez al arranque:
npm install @caputchin/widgetimport "@caputchin/widget";El import no expone nada que llamar; corre por su efecto secundario de registrar los custom elements. Ponlo en el punto de entrada de tu app para que corra antes de que se renderice cualquier <caputchin-widget>.
¿Cuál de los dos?
- Sin paso de build (HTML plano, una plantilla renderizada en el servidor): usa la etiqueta de script. Es la integración entera en una línea.
- Una app empaquetada (React, Vue y el resto): usa el import de npm. Versiona con tu lockfile y evita una petición externa que bloquee el render.
De una forma u otra, el elemento y todo lo que va después (el token inyectado, tu comprobación de servidor) son idénticos. Lo único que cambia es cómo llega el paquete.
Véase también
- Ejemplos de integración de frontend para el elemento en cada framework.
- Añade el widget a tu sitio para el recorrido completo.