Plantillas

Al crear un widget eliges con qué diseño empieza. Todas se editan después con su código.

En blanco

El código mínimo: la conexión con tu Streamer.bot y un ejemplo que saluda a cada seguidor nuevo.

const app = document.querySelector("#app");

Widget.status.onChange((state) => {
  Widget.dom.text(app, Widget.t(state === "connected" ? "connected" : "connecting"));
});

Widget.on("Twitch.Follow", ({ user }) => {
  Widget.dom.text(app, Widget.t("follow", { name: user }));
});

Usa Widget.status, Widget.dom.text, Widget.t y Widget.on. El manifest.json declara "events": ["Twitch.Follow"] y los textos connected, connecting y follow en español e inglés.

Chat

Un overlay de chat de Twitch, Kick y YouTube con emotes, insignias y borrado de mensajes. Trae un menú de parámetros (burbuja, fuente, colores, tamaño, máximo de mensajes y tiempo para ocultarlos) que lee con Widget.parameters. Pinta los mensajes con Widget.dom.renderMessage y las insignias con Widget.dom.image, y quita los mensajes que borra un moderador, un baneo o un ChatCleared.

Contador

Cuenta follows, subs o las dos cosas desde que se conecta. Es un buen ejemplo de varias piezas juntas: parámetros de todos los tipos, un sonido propio con Widget.assets y un aviso de agradecimiento que usa Widget.queue para que dos eventos seguidos no se pisen.

Alertas

Follow, sub, cheers y raid, sin código: lo diseñas arrastrando capas en el lienzo. Nace con el diseño Clásica y después añades alertas, cantidades, animaciones y tus propios archivos. El editor genera la parte de index.html, style.css y script.js marcada con ⟦estudio⟧; lo que escribas fuera de esa marca es tuyo.