Editor de widgets
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.
El editor es para quien sabe escribir algo de código. Si solo quieres un overlay listo para usar, usa la Biblioteca de widgets. Para la referencia del código (eventos, datos y ajustes), consulta Referencia del Editor de widgets.
Crea un widget nuevo
Sección titulada «Crea un widget nuevo»- Abre kickbot.com/dashboard/widget-builder y haz clic en Nuevo widget.
- 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.
- 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).
- Haz clic en Crear widget. Se abre el editor.
El editor
Sección titulada «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.
- 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.
- 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
Sección titulada «Prueba tu widget»- Abre Enviar eventos de prueba.
- Haz clic en un evento, por ejemplo Follow o Mensaje.
- 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
Sección titulada «Usa tu widget en el stream»Cada widget que creas aparece también en Widgets guardados con “Tu propio widget” debajo del nombre. Su URL siempre ejecuta tu código más reciente.
- En la página del Editor de widgets, haz clic en Copiar URL en tu widget.
- En OBS, añade una fuente Browser (Navegador), pega la URL y ajusta el ancho y el alto al tamaño del widget.
- 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.
Publica en la Biblioteca de widgets
Sección titulada «Publica en la Biblioteca de widgets»Publica un widget cuando quieras que otros streamers lo encuentren y lo instalen.
- En el editor, abre Visibilidad y haz clic en Publicar widget.
- 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.
- Escribe una Descripción: qué muestra el widget y cómo se configura.
- 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.
Elimina un widget
Sección titulada «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
Sección titulada «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.
Preguntas frecuentes
Sección titulada «Preguntas frecuentes»¿Tengo que saber programar?
Sí, algo de HTML, CSS y JavaScript. Si no programas, instala un widget de la Biblioteca de widgets 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.