Amplía tu alcance incrustando los widgets de SidewaysData directamente en tu propio sitio web. Muestra tus eventos y resultados en vivo donde tu audiencia ya visita—con solo una línea de código.

¿Por qué usar los widgets?

• Una línea de código - Simplemente pega una etiqueta script en tu sitio web
• Siempre actualizado - Los eventos y resultados se sincronizan automáticamente desde SidewaysData
• Sin mantenimiento - Nos encargamos de todas las actualizaciones y mejoras
• Apariencia profesional - Diseño pulido y responsive que funciona en cualquier dispositivo
• Gratis - Incluido con SidewaysData sin coste adicional

Widgets disponibles

Widget Buscar eventos

Muestra una lista filtrable de tus eventos. Los visitantes pueden navegar por año, estado de inscripción, tipo de evento y más. Perfecto para la página de eventos o la página principal.

Más información sobre el widget Buscar eventos

Widget Resultados en vivo

Muestra resultados de carrera en tiempo real durante tus eventos. Incluye chat en vivo para espectadores y cambia automáticamente entre "Resultados en vivo" y "Resultados finales" según la programación del evento.

Más información sobre el widget Resultados en vivo

Primeros pasos

1. Encuentra tu ID de organizador o los ID de evento (ver Obtener tus IDs)
2. Elige qué widget necesitas
3. Copia el código de incrustación y pégalo en tu sitio web
4. Personalízalo con atributos de configuración opcionales

Requisitos

Los widgets funcionan en cualquier sitio web que soporte JavaScript. Esto incluye WordPress, Squarespace, Wix, sitios HTML personalizados y la mayoría de los creadores de sitios web. Necesitarás la capacidad de agregar HTML personalizado o etiquetas script a tus páginas.

Para configurar los widgets, necesitará su ID de organizador y, opcionalmente, IDs de eventos específicos. Aquí se explica cómo encontrarlos.

Encontrar su ID de organizador

Su ID de organizador aparece en la URL cuando visualiza la página de su organizador en SidewaysData.

1. Vaya a sidewaysdata.com
2. Navegue a la página de su organizador
3. Mire la URL—estará en el formato: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

Por ejemplo, si su URL es sidewaysdata.com/organizer/example-motorsports, su ID de organizador es example-motorsports.

Encontrar los IDs de eventos

Los IDs de eventos aparecen en las URLs de los eventos y en el panel de su organizador.

Desde la URL del evento

1. Vaya a cualquiera de sus eventos en SidewaysData
2. Mire la URL—contendrá el ID del evento después de /events/

Por ejemplo: sidewaysdata.com/events/12345 significa que el ID del evento es 12345.

Desde su panel

1. Inicie sesión en SidewaysData
2. Vaya a su página de Eventos
3. El ID del evento se muestra en la lista de eventos o es visible en los enlaces

Usar las herramientas de desarrollo del navegador

Si tiene problemas para encontrar los IDs:

1. Haga clic derecho en la página de su organizador o evento
2. Seleccione "Inspeccionar" o "Inspeccionar elemento"
3. Busque atributos de datos o URLs que contengan el ID

¿Necesita ayuda?

Si no puede localizar sus IDs, contacte con SidewaysData support y le ayudaremos a encontrarlos.

El widget Find Events muestra una lista filtrable de eventos en tu sitio web. Los visitantes pueden navegar por los próximos eventos, filtrar por varios criterios y hacer clic para registrarse o ver detalles en SidewaysData.

Qué Muestra

• Tarjetas de eventos con nombre, fecha, ubicación y estado de inscripción
• Desplegables de filtro para año, tipo de evento, estado de inscripción y oportunidades de voluntariado
• Enlaces directos a las páginas de eventos en SidewaysData
• Diseño adaptable que se ajusta a cualquier tamaño de pantalla

Código de inserción básico

Añade esta etiqueta script a tu sitio web donde quieras que aparezcan los eventos:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id">
</script>

Sustituye your-organizer-id por tu identificador de organizador real (ver Obtener tus IDs).

Comportamiento predeterminado

Sin configuración adicional, el widget:

• Muestra todos los eventos de los organizadores especificados
• Muestra desplegables de filtro para año, tipo de evento, estado de inscripción y oportunidades de voluntariado
• Ordena los eventos por fecha (los más antiguos primero)
• Incluye eventos con cualquier estado de inscripción

Cómo funciona

El widget crea un iframe adaptable que carga contenido desde SidewaysData. El iframe ajusta automáticamente su altura para adaptarse al contenido, por lo que no hay desplazamiento dentro del propio widget. Los eventos se mantienen sincronizados con tu cuenta de SidewaysData: cualquier cambio que realices se refleja automáticamente.

Próximos pasos

• Configura el widget con atributos opcionales
• Consulta ejemplos comunes para diferentes casos de uso

Personalice el widget Find Events usando atributos de datos en la etiqueta script. Todos los atributos son opcionales excepto especificar qué eventos mostrar.

Especificar eventos

Debe incluir al menos uno de estos atributos para especificar qué eventos mostrar:

data-organizer-ids

Muestra todos los eventos de organizadores específicos. Use valores separados por comas para múltiples organizadores.

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="example-motorsports">
</script>

Múltiples organizadores:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="org-one,org-two,org-three">
</script>

data-event-ids

Muestra solo eventos específicos por sus IDs. Use valores separados por comas para múltiples eventos.

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-event-ids="12345,67890">
</script>

Opciones de filtrado

data-event-status

Filtre los eventos por estado de inscripción. Valores: open, closed o any.

data-event-status="open"

data-default-reg-status

Establezca el valor predeterminado para el desplegable de estado de inscripción. Esto preselecciona una opción de filtro pero aún permite a los visitantes cambiarla.

data-default-reg-status="open"

data-limit-organizer-event-types

Cuando se establece en true, muestra solo los tipos de evento que el organizador realmente utiliza, en lugar de todos los tipos disponibles en el desplegable.

data-limit-organizer-event-types="true"

data-hide-volunteers-dropdown

Cuando se establece en true, oculta el desplegable del filtro de oportunidades de voluntariado.

data-hide-volunteers-dropdown="true"

Opciones de visualización

data-is-results-mode

Cuando se establece en true, muestra eventos que tienen resultados disponibles en lugar de eventos próximos. Útil para una página de "Resultados pasados".

data-is-results-mode="true"

data-newest-first

Cuando se establece en true, ordena los eventos con los más recientes primero en lugar del orden predeterminado de más antiguos primero.

data-newest-first="true"

Opciones avanzadas

data-origin

Use un dominio personalizado en lugar del predeterminado sidewaysdata.com. Solo es necesario si tiene un dominio personalizado configurado con SidewaysData.

data-origin="https://events.yourdomain.com"

Ejemplo completo

Aquí hay un ejemplo que utiliza varias opciones de configuración:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="example-motorsports"
  data-event-status="open"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true"
  data-newest-first="true">
</script>

Esto muestra eventos con inscripción abierta de "example-motorsports", muestra solo los tipos de evento relevantes en el filtro, oculta el desplegable de voluntariado y ordena los eventos más recientes primero.

Configuraciones comunes para el widget Find Events para ajustarse a diferentes casos de uso.

Mostrar todos los eventos de tu organización

Mostrar todos los eventos de tu organización con todas las opciones de filtro disponibles:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id">
</script>

Mostrar solo inscripciones abiertas

Mostrar eventos que actualmente están aceptando inscripciones:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-event-status="open">
</script>

Mostrar eventos con resultados

Crear una página "Past Results" que muestre eventos que tengan resultados de cronometraje:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-is-results-mode="true"
  data-newest-first="true">
</script>

Mostrar eventos específicos

Mostrar solo eventos específicos, como una serie de campeonatos:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-event-ids="12345,12346,12347,12348">
</script>

Mostrar eventos de varios organizadores

Mostrar eventos de varias organizaciones en una página regional o de serie:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="org-one,org-two,org-three">
</script>

Vista simplificada (Filtros mínimos)

Mostrar eventos con una interfaz más limpia ocultando filtros de uso menos frecuente:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true">
</script>

Widget para la página principal (Eventos abiertos, más recientes primero)

Una configuración común para la página principal de tu sitio web:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-event-status="open"
  data-newest-first="true"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true">
</script>

Predeterminar el filtro a 'open' (Registro abierto)

Mostrar todos los eventos pero hacer que el filtro de registro tenga por defecto 'open':

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-default-reg-status="open">
</script>

Esto difiere de data-event-status="open" porque los visitantes aún pueden cambiar el filtro para ver eventos cerrados.

El widget Live Results muestra los resultados de carrera en tiempo real en tu sitio web. Los espectadores pueden seguir la acción durante los eventos y ver los resultados finales después —todo sin salir de tu sitio.

Qué muestra

• Resultados de cronometraje en tiempo real durante eventos en vivo
• Indicador de "Resultados en vivo" o "Resultados finales" según el momento del evento
• Chat en vivo integrado impulsado por FastComments para la interacción de los espectadores
• Actualizaciones automáticas cuando se registran nuevos tiempos

Código de inserción básico

Agrega esta etiqueta script a tu sitio web donde quieras que aparezcan los resultados:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="your-organizer-id">
</script>

Reemplaza your-organizer-id con tu ID de organizador real (ver Obtener tus IDs).

Nota: El widget Live Results requiere el atributo data-organizer-id. El widget no se cargará sin él.

Cómo funciona

El widget crea un iframe responsive que se conecta al sistema de cronometraje en vivo de SidewaysData. Durante un evento activo:

• Los resultados se actualizan en tiempo real a medida que se registran los tiempos
• El widget muestra "Resultados en vivo" para indicar que el cronometraje está en curso
• El chat en vivo permite a los espectadores comentar el evento

Después de que termine el evento:

• Los resultados permanecen disponibles para su visualización
• El widget cambia al indicador de "Resultados finales"
• El historial del chat se conserva

Casos de uso

• Día del evento - Incrústalo en tu página de inicio para que los espectadores puedan seguir en vivo
• Página de resultados dedicada - Crea una página de resultados permanente en tu sitio web
• Página de destino en redes sociales - Comparte un enlace a tu página de resultados durante los eventos

Siguientes pasos

• Configurar el widget con atributos opcionales

El widget Live Results tiene una configuración mínima: solo se requiere su ID de organizador.

Required Attribute

data-organizer-id

Su ID de organizador de SidewaysData. Esto es necesario para que el widget funcione.

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports">
</script>

Consulte Obtener sus IDs para obtener ayuda para encontrar su ID de organizador.

Optional Attribute

data-origin

Use un dominio personalizado en lugar del predeterminado sidewaysdata.com. Solo es necesario si tiene un dominio personalizado configurado con SidewaysData.

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports"
  data-origin="https://events.yourdomain.com">
</script>

Complete Example

Un ejemplo típico de incrustación de Live Results:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports">
</script>

Error Handling

Si falta el atributo data-organizer-id, el widget registrará un error en la consola del navegador y no se mostrará. Asegúrese de incluir este atributo obligatorio.

Placement Tips

• Coloque el widget en un contenedor con un ancho adecuado (se recomienda al menos 320px)
• El widget ajusta automáticamente su altura para adaptarse al contenido
• Considere colocarlo en la parte superior visible de la página en los días del evento para máxima visibilidad
• Funciona bien como contenido principal de una página dedicada a "Live Results"

Los widgets de SidewaysData se insertan como iframes, lo que limita el estilado directo con CSS. Sin embargo, puedes controlar cómo encajan los widgets en el diseño de tu página.

Container Styling

Envuelve el widget en un elemento contenedor para controlar su colocación y anchura máxima:

<div style="max-width: 1200px; margin: 0 auto;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

Width Control

Los widgets se expanden automáticamente al 100% del ancho de su contenedor. Controla el ancho estilando el elemento padre:

<div style="width: 100%; max-width: 800px;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

Height Behavior

La altura del widget se ajusta automáticamente según el contenido. El iframe usa postMessage para comunicar la altura requerida a tu página, eliminando las barras de desplazamiento dentro del widget.

Responsive Design

Los widgets están diseñados para ser responsive y funcionar bien en dispositivos móviles. Se adaptan automáticamente a pantallas más estrechas. Para mejores resultados:

• Usa anchos de contenedor basados en porcentajes o flexibles
• Evita establecer anchos fijos en píxeles que puedan causar desplazamiento horizontal en móviles
• Prueba en varios tamaños de pantalla

Background Compatibility

Los widgets tienen un fondo claro y están diseñados para funcionar bien en páginas de color claro. Si tu sitio tiene un fondo oscuro, considera colocar el widget en un contenedor de color claro:

<div style="background: #ffffff; padding: 20px; border-radius: 8px;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

Iframe Styling Limitations

Debido a que los widgets usan iframes, no puedes estilizar directamente el contenido dentro de ellos (como fuentes, colores o estilos de botones). El contenido del widget usa el estilado estándar de SidewaysData para garantizar una apariencia profesional y coherente.

Si tienes requisitos de marca específicos, contacta con el soporte de SidewaysData para discutir las opciones.

Adding Margins and Spacing

Añade espacio alrededor del widget usando CSS estándar en el contenedor:

<div style="margin: 40px 0;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

Problemas comunes y soluciones al usar los widgets de SidewaysData.

Widget No Aparece

Comprueba la URL del script

Asegúrate de que el atributo src del script apunte a la URL correcta:

• Find Events: https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js
• Live Results: https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js

Comprueba los atributos requeridos

• Find Events widget requiere data-organizer-ids o data-event-ids
• Live Results widget requiere data-organizer-id

Comprueba si hay errores de JavaScript

Abre la consola de desarrollador de tu navegador (generalmente F12 o clic derecho → Inspeccionar → Consola) y busca mensajes de error. El Live Results widget registra un error si falta data-organizer-id.

Verifica que tus IDs sean correctos

Revisa que los IDs de organizador y de evento coincidan con lo que aparece en SidewaysData. Ver Obtener tus IDs.

Se muestran eventos equivocados

Comprueba la ortografía del ID del organizador

Los IDs de organizador distinguen mayúsculas de minúsculas. Asegúrate de que el ID coincida exactamente con lo que aparece en la URL de SidewaysData.

Comprueba la configuración de filtros

Si estás usando data-event-status="open" pero no ves eventos, puede que no tengas eventos con inscripción abierta. Intenta quitar este filtro para ver todos los eventos.

Comprueba el modo de resultados

Si data-is-results-mode="true" está establecido, el widget muestra eventos con resultados, no eventos próximos. Elimina este atributo para ver los eventos próximos.

Problemas con la altura del widget

El widget aparece cortado

El widget debería ajustar su altura automáticamente. Si el contenido aparece cortado:

1. Comprueba que ningún elemento padre tenga overflow: hidden establecido
2. Asegúrate de que ningún CSS esté fijando una altura en el iframe
3. Verifica que JavaScript esté habilitado en tu navegador

Espacio vacío excesivo

Si hay demasiado espacio vacío debajo del widget, el ajuste automático de altura debería solucionarlo. Si no, puede que el widget se esté cargando pero no tenga eventos que mostrar.

El contenido no se actualiza

Los eventos no muestran cambios recientes

Los widgets cargan contenido nuevo desde SidewaysData en cada carga de página. Si los cambios no aparecen:

1. Forza la recarga de la página (Ctrl+F5 o Cmd+Shift+R)
2. Borra la caché de tu navegador
3. Espera unos minutos—algunos cambios pueden tardar en propagarse

Los resultados en vivo no se actualizan

Durante el cronometraje en vivo, los resultados deberían actualizarse automáticamente. Si no lo hacen:

1. Verifica que el evento esté siendo cronometrado activamente en SidewaysData
2. Actualiza la página
3. Comprueba tu conexión a Internet

Problemas con constructores de sitios web

WordPress

Si usas WordPress, puede que necesites:

• Usar un bloque o widget "Custom HTML"
• Desactivar temporalmente cualquier plugin que bloquee scripts
• Comprobar si tu tema elimina etiquetas