Un tag HTML. Datos en tiempo real. La identidad de tu medio.
Integrá el Mundial en cualquier CMS en menos de cinco minutos.
Cada widget es un Web Component autónomo. Se actualizan solos. Se adaptan a tu marca.
Cinta infinita que muestra todos los partidos del fixture con horarios en la zona horaria del lector. Ideal para el header de cualquier sección. Se pausa al pasar el mouse.
<!-- 1. Pegá el script una sola vez --> <script src="https://mundial.pages.dev/widgets.js"></script> <!-- 2. Ticker completo --> <mundial-ticker></mundial-ticker> <!-- Solo un grupo --> <mundial-ticker group="J"></mundial-ticker> <!-- Solo un equipo --> <mundial-ticker team="Argentina"></mundial-ticker>
Grilla completa con pestañas por grupo. Los horarios se muestran en la zona horaria del lector. Al publicar una nota sobre un grupo, filtrá solo esos partidos.
<!-- Fixture completo, todos los grupos --> <mundial-fixture></mundial-fixture> <!-- Pre-seleccionado en Grupo J (Argentina) --> <mundial-fixture group="J" ></mundial-fixture> <!-- Solo partidos de un equipo --> <mundial-fixture team="France" ></mundial-fixture>
Los 12 grupos con sus 4 equipos cada uno. Los dos clasificados a octavos se marcan en verde automáticamente. Los puntos se calculan en tiempo real desde el JSON de resultados.
<!-- Tabla abre en Grupo A por defecto --> <mundial-tabla></mundial-tabla> <!-- Pre-seleccionado en Grupo J --> <mundial-tabla group="J" ></mundial-tabla>
El widget de mayor impacto para los lectores. Cuenta hacia el próximo partido de cualquier selección con horario en tiempo real. Cuando el partido comienza, muestra "EN VIVO" automáticamente.
<!-- Cuenta regresiva para Argentina --> <mundial-countdown team="Argentina" ></mundial-countdown> <!-- Para cualquier selección --> <mundial-countdown team="Brazil" ></mundial-countdown>
Diseñado para que los redactores lo inserten dentro del cuerpo de una nota. Muestra el enfrentamiento limpio: banderas, equipos, horario y estadio. Si el partido tiene resultado, lo muestra automáticamente.
<!-- Insertar en el cuerpo de una nota --> <mundial-partido team1="Argentina" team2="Algeria" ></mundial-partido> <!-- Otro enfrentamiento --> <mundial-partido team1="France" team2="Iraq" ></mundial-partido>
Los widgets usan variables CSS estándar. Cambiá colores con tres líneas de código. Sin tocar el widget.
/* Por defecto — sin cambios */ mundial-partido { --wm-primary: #1d4e2f; --wm-accent: #f5c518; }
mundial-partido { --wm-bg: #ffffff; --wm-surface: #f5f5f5; --wm-primary: #1a1a2e; --wm-accent: #e63946; --wm-text: #1a1a2e; }
mundial-partido { --wm-bg: #1a0505; --wm-surface: #2a0a0a; --wm-primary: #7f0000; --wm-accent: #ff4444; }
Sin npm. Sin webpack. Sin desarrollador. Cualquier redactor puede agregarlo.
Una sola línea en el <head> o antes del </body> de tu sitio. Una vez y ya.
<script src="https://mundial.pages.dev/widgets.js" defer ></script>
Elegí el widget que querés y pegá el tag HTML donde necesitás que aparezca — en tu template, en el cuerpo de una nota, en un sidebar.
<!-- En la home --> <mundial-ticker></mundial-ticker> <!-- En una nota de Argentina --> <mundial-countdown team="Argentina" ></mundial-countdown>
Agregá variables CSS para adaptar los colores a tu marca. El widget respeta tu identidad visual sin que tus estilos lo afecten a él.
mundial-fixture { --wm-accent: #tu-color; --wm-primary: #tu-color; --wm-bg: #tu-fondo; }