# Editor de widgets > Crea tu propio widget para tu stream de Kick con HTML, CSS y JavaScript en el Editor de widgets de KickBot, pruébalo con eventos de prueba y publícalo. Source: https://kickbot.com/es/docs/widgets/widget-builder El Editor de widgets te permite crear tu propio overlay para tu stream de Kick con HTML, CSS y JavaScript. KickBot envía a tu código los eventos de Kick en vivo (follows, subs, subs regalados, KICKs, raids, mensajes del chat y más), así que no necesitas conectarte a ninguna API. Puedes usar el widget en tu propio stream y también publicarlo para que otros streamers lo instalen desde la Biblioteca de widgets. Ábrelo en [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder). El editor es para quien sabe escribir algo de código. Si solo quieres un overlay listo para usar, usa la [Biblioteca de widgets](https://kickbot.com/es/docs/widgets/widget-library). Para la referencia del código (eventos, datos y ajustes), consulta [Referencia del Editor de widgets](https://kickbot.com/es/docs/widgets/widget-builder-reference). ![La página principal del Editor de widgets de KickBot con el botón Nuevo widget, un widget con la URL oculta y la sección Referencia](https://kickbot.com/docs/images/widgets/widget-builder/01-home.webp "El Editor de widgets muestra tus widgets y sus URL para OBS.") ## Crea un widget nuevo 1. Abre [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder) y haz clic en **Nuevo widget**. 2. Elige **En blanco** o empieza desde una plantilla: **Viewer Count**, **Simple Follower Goal** o **Basic Chat Widget**. Una plantilla copia el código de ese widget de KickBot para que puedas cambiarlo. 3. Escribe un **Nombre del widget**. Para un widget en blanco, ajusta también el **Ancho** y el **Alto** en píxeles (800 × 600 por defecto). 4. Haz clic en **Crear widget**. Se abre el editor. ![La ventana Nuevo widget con En blanco y las plantillas Viewer Count y Simple Follower Goal](https://kickbot.com/docs/images/widgets/widget-builder/02-new-widget.webp "Empieza con un widget en blanco o con una plantilla.") > **Note:** Con el plan Gratis, puedes tener hasta 10 widgets en el Editor de widgets. Con Premium no hay límite. Los widgets que instalas desde la biblioteca no cuentan. ## El editor El editor tiene tres partes: los ajustes a la izquierda, el código en el centro y una vista previa en vivo a la derecha. ![El editor del Editor de widgets con Ajustes básicos y Variables de usuario a la izquierda, la pestaña de código HTML en el centro y la vista previa a la derecha](https://kickbot.com/docs/images/widgets/widget-builder/03-editor.webp "Ajustes, código y vista previa en el editor.") - **Ajustes básicos**: el nombre, y el ancho y el alto con los que se muestra el widget. - **Variables de usuario**: ajustes que los streamers pueden cambiar sin tocar el código, como un color, un texto o un número de meta. Consulta [Variables de usuario](https://kickbot.com/es/docs/widgets/widget-builder-reference#user-variables). - **Enviar eventos de prueba**: botones que envían un evento falso (Sub, Sub regalado, KICKs, Follow, Raid, Mensaje y más) a la vista previa. - **Visibilidad**: indica si el widget es privado o está publicado, y tiene el botón **Publicar widget**. - **Código**: pestañas para **HTML**, **CSS** y **JavaScript**. Usa **Diseño del editor**, en la parte de arriba, para ver un archivo (**Único**) o dos archivos a la vez (**Lado a lado** o **Apilado**). - **Vista previa**: muestra el widget a su tamaño, escalado para que quepa. Se actualiza mientras escribes. Usa el botón de recargar para iniciarlo de nuevo, o el botón de ventana aparte para abrirlo en su propia ventana (útil para abrir la consola del navegador). El editor guarda tu trabajo solo mientras escribes. **Guardar** guarda todo a la vez, y el texto de debajo indica cuándo se guardó por última vez. **Salir** vuelve a la lista de widgets. El editor necesita una pantalla ancha. En un teléfono, KickBot te pide que lo abras en tu PC. Tu widget queda guardado, así que puedes seguir desde ahí. ## Prueba tu widget 1. Abre **Enviar eventos de prueba**. 2. Haz clic en un evento, por ejemplo **Follow** o **Mensaje**. 3. Mira cómo reacciona la vista previa. Los eventos de prueba tienen la misma forma que los eventos reales, con datos de ejemplo. Solo llegan a la vista previa de esta página, nunca a OBS ni a tu stream. Para probar con eventos reales, añade el widget a OBS y sal en vivo, o pídele a un amigo que siga tu canal. ## Usa tu widget en el stream Cada widget que creas aparece también en [Widgets guardados](https://kickbot.com/dashboard/saved-widgets) con "Tu propio widget" debajo del nombre. Su URL siempre ejecuta tu código más reciente. 1. En la página del Editor de widgets, haz clic en **Copiar URL** en tu widget. 2. En OBS, añade una fuente **Browser** (Navegador), pega la URL y ajusta el ancho y el alto al tamaño del widget. 3. Haz clic en **OK** (Aceptar). Si cambias el código mientras el widget está en OBS, actualiza la fuente de navegador para cargar el código nuevo. Cuando cambias el valor de una variable de usuario en Widgets guardados y haces clic en **Guardar**, OBS recarga el widget solo. Para más ayuda, consulta [Añade una fuente de navegador a OBS](https://kickbot.com/es/docs/getting-started/add-browser-source-obs). > **Caution:** No compartas la URL. Cualquiera que la tenga puede mostrar tu widget en su pantalla. ## Publica en la Biblioteca de widgets Publica un widget cuando quieras que otros streamers lo encuentren y lo instalen. 1. En el editor, abre **Visibilidad** y haz clic en **Publicar widget**. 2. Añade una **Imagen principal** y al menos una imagen más. Puedes añadir hasta 10 imágenes en total, de hasta 10 MB cada una. Lo mejor es 1920 × 1080. 3. Escribe una **Descripción**: qué muestra el widget y cómo se configura. 4. Envíalo. La ventana confirma que se envió a revisión. El equipo de KickBot revisa cada widget. Si se aprueba, aparece en la Biblioteca de widgets con tu nombre de Kick como creador. La revisión suele tardar menos de 24 horas. > **Caution:** Solo puedes publicar un widget una vez. Después, el editor muestra "El widget ya está publicado. Contacta con soporte para hacer cambios". Prueba bien tu widget antes de publicarlo. ## Elimina un widget En la página del Editor de widgets, abre el menú **⋯** de un widget y haz clic en **Eliminar**. Esto borra su código y sus ajustes, y no se puede deshacer. ## Miembros del equipo Los miembros del equipo necesitan el permiso **Editor de widgets** para abrir el editor y crear widgets. Necesitan **Configurar widgets** para ver las URL de los widgets. Consulta [Gestionar equipo](https://kickbot.com/es/docs/account/team). ## Preguntas frecuentes **¿Tengo que saber programar?** Sí, algo de HTML, CSS y JavaScript. Si no programas, instala un widget de la [Biblioteca de widgets](https://kickbot.com/es/docs/widgets/widget-library) y cambia sus ajustes. **¿Puedo editar un widget de KickBot de la biblioteca?** No puedes cambiar el código de un widget de la biblioteca. Empieza un widget nuevo desde la plantilla **Viewer Count**, **Simple Follower Goal** o **Basic Chat Widget** para tener una copia de su código que sí puedes cambiar. **¿Mi widget puede cargar fuentes, imágenes u otros scripts?** Sí. Tu HTML, CSS y JavaScript se ejecutan en una página web normal dentro de OBS, así que puedes enlazar fuentes web, imágenes y scripts de otros sitios. Usa variables de usuario de tipo **Imagen/GIF**, **Vídeo** o **Audio** para que los streamers suban sus propios archivos. **¿Puedo crear widgets con la API de KickBot?** Sí. La API de KickBot puede listar, crear y actualizar tus widgets. Consulta la [referencia de la API de widgets](https://kickbot.com/docs/api/reference/widgets).