Amplie seu alcance incorporando widgets do SidewaysData diretamente no seu próprio site. Exiba seus eventos e resultados ao vivo onde seu público já visita — com apenas uma linha de código.

Por que usar widgets?

• Uma linha de código - Simplesmente cole uma tag de script no seu site
• Sempre atualizados - Eventos e resultados sincronizam automaticamente com o SidewaysData
• Sem necessidade de manutenção - Nós cuidamos de todas as atualizações e melhorias
• Aparência profissional - Design polido e responsivo que funciona em qualquer dispositivo
• Gratuito - Incluído no SidewaysData sem custo adicional

Widgets disponíveis

Find Events Widget

Exiba uma lista filtrável dos seus eventos. Os visitantes podem navegar por ano, status de inscrição, tipo de evento e mais. Perfeito para a sua página de eventos ou página inicial.

Saiba mais sobre o Find Events widget

Live Results Widget

Mostre resultados de corrida em tempo real durante seus eventos. Inclui chat ao vivo para espectadores e alterna automaticamente entre "Live Results" e "Final Results" com base no horário do evento.

Saiba mais sobre o Live Results widget

Primeiros passos

1. Encontre seu organizer ID ou os IDs dos eventos (veja Como obter seus IDs)
2. Escolha qual widget você precisa
3. Copie o código de incorporação e cole-o no seu site
4. Personalize com atributos de configuração opcionais

Requisitos

Os widgets funcionam em qualquer site que suporte JavaScript. Isso inclui WordPress, Squarespace, Wix, sites em HTML personalizado e a maioria dos construtores de site. Você precisará da capacidade de adicionar HTML personalizado ou tags de script às suas páginas.

Para configurar widgets, você precisará do seu ID do organizador e, opcionalmente, de IDs específicos de eventos. Veja como encontrá-los.

Encontrando seu ID do organizador

Seu ID do organizador aparece na URL ao visualizar sua página do organizador no SidewaysData.

1. Vá para sidewaysdata.com
2. Navegue até sua página do organizador
3. Veja a URL — estará no formato: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

Por exemplo, se sua URL for sidewaysdata.com/organizer/example-motorsports, seu ID do organizador é example-motorsports.

Encontrando os IDs de Evento

Os IDs de evento aparecem nas URLs dos eventos e no painel do seu organizador.

Pela URL do Evento

1. Navegue até qualquer um dos seus eventos no SidewaysData
2. Veja a URL — ela conterá o ID do evento após /events/

Por exemplo: sidewaysdata.com/events/12345 significa que o ID do evento é 12345.

Pelo seu Painel

1. Faça login no SidewaysData
2. Vá para sua Página de Eventos
3. O ID do evento é exibido na lista de eventos ou visível em links

Usando as Ferramentas de Desenvolvedor do Navegador

Se você estiver tendo dificuldade para encontrar os IDs:

1. Clique com o botão direito na sua página do organizador ou do evento
2. Selecione "Inspecionar" ou "Inspecionar elemento"
3. Procure por atributos de dados ou URLs que contenham o ID

Precisa de ajuda?

Se você não conseguir localizar seus IDs, entre em contato com o suporte do SidewaysData e nós ajudaremos você a encontrá-los.

O widget Find Events exibe uma lista filtrável de eventos no seu site. Os visitantes podem navegar por eventos futuros, filtrar por vários critérios e clicar para se registrar ou ver detalhes no SidewaysData.

O que ele exibe

• Cartões de evento com nome, data, local e status de inscrição
• Dropdowns de filtro para ano, tipo de evento, status de inscrição e oportunidades de voluntariado
• Links diretos para páginas de eventos no SidewaysData
• Layout responsivo que se adapta a qualquer tamanho de tela

Código básico de incorporação

Adicione esta tag script ao seu site no local onde deseja que os eventos apareçam:

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

Substitua your-organizer-id pelo seu organizer ID real (veja Obtendo seus IDs).

Comportamento padrão

Sem configuração adicional, o widget irá:

• Mostrar todos os eventos dos organizadores especificados
• Exibir dropdowns de filtro para ano, tipo de evento, status de inscrição e voluntários
• Ordenar eventos por data (do mais antigo para o mais novo)
• Incluir eventos com qualquer status de inscrição

Como funciona

O widget cria um iframe responsivo que carrega conteúdo do SidewaysData. O iframe ajusta automaticamente sua altura para acomodar o conteúdo, portanto não há rolagem dentro do próprio widget. Os eventos permanecem sincronizados com sua conta SidewaysData—quaisquer alterações que você fizer serão refletidas automaticamente.

Próximos passos

• Configure o widget com atributos opcionais
• Veja exemplos comuns para diferentes casos de uso

Personalize o widget Find Events usando atributos data na tag script. Todos os atributos são opcionais, exceto o de especificar quais eventos exibir.

Specifying Events

You must include at least one of these attributes to specify which events to display:

data-organizer-ids

Exibe todos os eventos de organizadores específicos. Use valores separados por vírgula para múltiplos organizadores.

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

Multiple organizers:

<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

Exibe apenas eventos específicos pelos seus IDs. Use valores separados por vírgula para múltiplos eventos.

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

Filtering Options

data-event-status

Filtre eventos pelo status de inscrição. Valores: open, closed, ou any.

data-event-status="open"

data-default-reg-status

Define o valor padrão para o dropdown de status de inscrição. Isso pré-seleciona uma opção de filtro, mas ainda permite que os visitantes a alterem.

data-default-reg-status="open"

data-limit-organizer-event-types

Quando definido como true, mostra apenas tipos de evento que o organizador realmente usa, em vez de todos os tipos de evento disponíveis no dropdown.

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

data-hide-volunteers-dropdown

Quando definido como true, oculta o dropdown de filtro de oportunidades de voluntariado.

data-hide-volunteers-dropdown="true"

Display Options

data-is-results-mode

Quando definido como true, exibe eventos que têm resultados disponíveis em vez de eventos futuros. Útil para uma página "Resultados Anteriores".

data-is-results-mode="true"

data-newest-first

Quando definido como true, ordena os eventos com os mais recentes primeiro em vez da ordenação padrão do mais antigo para o mais recente.

data-newest-first="true"

Advanced Options

data-origin

Use um domínio personalizado em vez do padrão sidewaysdata.com. Só é necessário se você tiver um domínio personalizado configurado com SidewaysData.

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

Complete Example

Here's an example using multiple configuration options:

<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>

Isso exibe eventos com inscrições abertas de "example-motorsports", mostra apenas os tipos de evento relevantes no filtro, oculta o dropdown de voluntariado e ordena os eventos com os mais recentes primeiro.

Configurações comuns para o widget Find Events para corresponder a diferentes casos de uso.

Exibir todos os seus eventos

Exiba todos os eventos da sua organização com todas as opções de filtro disponíveis:

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

Exibir apenas inscrições abertas

Exiba eventos que atualmente estão aceitando inscrições:

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

Exibir eventos com resultados

Crie uma página "Resultados Anteriores" exibindo eventos que possuem resultados de cronometragem:

<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>

Exibir eventos específicos

Exiba somente eventos específicos, como uma série de campeonatos:

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

Exibir eventos de vários organizadores

Exiba eventos de várias organizações em uma página regional ou de série:

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

Visualização simplificada (Filtros mínimos)

Exiba eventos com uma interface mais limpa ocultando filtros menos usados:

<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 da página inicial (Eventos abertos, mais recentes primeiro)

Uma configuração comum para a página inicial do seu site:

<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>

Filtro padrão para inscrições abertas

Exiba todos os eventos, mas faça com que o filtro de inscrição seja padrão para "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>

Isso difere de data-event-status="open" porque os visitantes ainda podem alterar o filtro para ver eventos fechados.

O widget Live Results exibe resultados de corrida em tempo real no seu site. Os espectadores podem acompanhar durante os eventos e ver os resultados finais depois — tudo sem sair do seu site.

What It Displays

• Resultados de cronometragem em tempo real durante eventos ao vivo
• Indicador "Resultados ao Vivo" ou "Resultados Finais" com base no tempo do evento
• Chat ao vivo integrado alimentado por FastComments para interação dos espectadores
• Atualizações automáticas à medida que novos tempos são registrados

Basic Embed Code

Adicione esta tag script ao seu site onde você quer que os resultados apareçam:

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

Substitua your-organizer-id pelo seu ID de organizador real (veja Getting Your IDs).

Observação: O widget Live Results requer o atributo data-organizer-id. O widget não será carregado sem ele.

How It Works

O widget cria um iframe responsivo que se conecta ao sistema de cronometragem ao vivo da SidewaysData. Durante um evento ativo:

• Os resultados são atualizados em tempo real conforme os tempos são registrados
• O widget mostra "Resultados ao Vivo" para indicar que a cronometragem está em andamento
• O chat ao vivo permite que os espectadores discutam o evento

Depois que o evento termina:

• Os resultados permanecem disponíveis para visualização
• O widget muda para o indicador "Resultados Finais"
• O histórico do chat é preservado

Use Cases

• Dia do evento - Incorpore na sua página inicial para que os espectadores possam acompanhar ao vivo
• Página dedicada de resultados - Crie uma página permanente de resultados no seu site
• Página de destino para redes sociais - Compartilhe um link para sua página de resultados durante os eventos

Next Steps

• Configure the widget com atributos opcionais

O widget Live Results tem configuração mínima—apenas o seu organizer ID é necessário.

Required Attribute

data-organizer-id

Seu ID de organizador do SidewaysData. Isso é obrigatório para o funcionamento do widget.

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

Veja Como obter seus IDs para obter ajuda para encontrar seu organizer ID.

Optional Attribute

data-origin

Use um domínio personalizado em vez do padrão sidewaysdata.com. Só é necessário se você tiver um domínio personalizado configurado com o 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

Um exemplo típico de incorporação do Live Results:

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

Error Handling

Se o atributo data-organizer-id estiver ausente, o widget registrará um erro no console do navegador e não será renderizado. Certifique-se de incluir esse atributo obrigatório.

Placement Tips

• Coloque o widget em um contêiner com largura adequada (recomenda-se pelo menos 320px)
• O widget ajusta automaticamente sua altura para se adequar ao conteúdo
• Considere posicioná-lo acima da dobra nos dias do evento para máxima visibilidade
• Funciona bem como o conteúdo principal de uma página dedicada "Live Results"

Os widgets da SidewaysData são incorporados como iframes, o que limita a estilização direta com CSS. No entanto, você pode controlar como os widgets se ajustam ao layout da sua página.

Estilização do Contêiner

Envolva o widget em um elemento contêiner para controlar seu posicionamento e largura 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>

Controle de Largura

Os widgets se expandem automaticamente para 100% da largura do contêiner. Controle a largura estilizando o elemento pai:

<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>

Comportamento da Altura

A altura do widget se ajusta automaticamente com base no conteúdo. O iframe usa postMessage para comunicar a altura necessária à sua página, eliminando barras de rolagem dentro do widget.

Design Responsivo

Os widgets foram projetados para serem responsivos e funcionarem bem em dispositivos móveis. Eles se adaptam automaticamente a telas mais estreitas. Para melhores resultados:

• Use larguras de contêiner baseadas em porcentagem ou flexíveis
• Evite definir larguras fixas em pixels que possam causar rolagem horizontal em dispositivos móveis
• Teste em vários tamanhos de tela

Compatibilidade de Fundo

Os widgets têm um fundo claro e foram projetados para funcionar bem em páginas de cor clara. Se o seu site tem um fundo escuro, considere colocar o widget em um contêiner de cor clara:

<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>

Limitações de Estilização do Iframe

Como os widgets usam iframes, você não pode estilizar diretamente o conteúdo dentro deles (como fontes, cores ou estilos de botões). O conteúdo do widget usa o estilo padrão da SidewaysData para garantir uma aparência consistente e profissional.

Se você tiver requisitos específicos de marca, entre em contato com o suporte da SidewaysData para discutir opções.

Adicionando Margens e Espaçamento

Adicione espaçamento ao redor do widget usando CSS padrão no contêiner:

<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 comuns e soluções ao usar os widgets do SidewaysData.

Widget Não Aparece

Verifique a URL do script

Verifique se o atributo src do script aponta para a URL correta:

• 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

Verifique atributos obrigatórios

• Widget Find Events requer data-organizer-ids ou data-event-ids
• Widget Live Results requer data-organizer-id

Verifique se há erros de JavaScript

Abra o console de desenvolvedor do seu navegador (normalmente F12 ou clique com o botão direito → Inspecionar → Console) e procure mensagens de erro. O widget Live Results registra um erro se data-organizer-id estiver ausente.

Verifique se seus IDs estão corretos

Confira se os IDs de organizador e de evento correspondem ao que é exibido no SidewaysData. Veja Como obter seus IDs.

Eventos Exibidos Incorretamente

Verifique a grafia do ID do organizador

Os IDs de organizador diferenciam maiúsculas de minúsculas. Certifique-se de que o ID corresponda exatamente ao que aparece na URL do SidewaysData.

Verifique as configurações do filtro

Se você está usando data-event-status="open" mas não vê eventos, talvez não haja eventos com inscrição aberta. Tente remover esse filtro para ver todos os eventos.

Verifique o modo de resultados

Se data-is-results-mode="true" estiver definido, o widget mostra eventos com resultados, não eventos futuros. Remova esse atributo para ver eventos futuros.

Problemas de Altura do Widget

Widget parece cortado

O widget deve ajustar automaticamente sua altura. Se o conteúdo parecer cortado:

1. Verifique se nenhum elemento pai tem overflow: hidden definido
2. Garanta que nenhum CSS esteja definindo uma altura fixa no iframe
3. Verifique se o JavaScript está habilitado no seu navegador

Espaço vazio excessivo

Se houver espaço vazio demais abaixo do widget, o ajuste automático de altura deve corrigir isso. Se não, o widget pode estar carregando mas não ter eventos para mostrar.

Conteúdo Não Sendo Atualizado

Eventos não exibindo alterações recentes

Os widgets carregam conteúdo atualizado do SidewaysData a cada carregamento de página. Se as alterações não estiverem aparecendo:

1. Recarregue a página forçando o cache (Ctrl+F5 ou Cmd+Shift+R)
2. Limpe o cache do seu navegador
3. Aguarde alguns minutos—algumas alterações podem demorar um pouco para propagar

Resultados ao vivo não sendo atualizados

Durante a cronometragem ao vivo, os resultados devem atualizar automaticamente. Se não estiverem:

1. Verifique se o evento está sendo cronometrado ativamente no SidewaysData
2. Recarregue a página
3. Verifique sua conexão com a internet

Problemas com Construtores de Sites

WordPress

Se estiver usando WordPress, você pode precisar:

• Usar um bloco ou widget "HTML Personalizado"
• Desativar temporariamente plugins que bloqueiam scripts
• Verificar se o seu tema remove tags de script do conteúdo

Squarespace

Use um elemento "Code Block" ou "Embed" e cole a tag do script diretamente.

Wix

Use o recurso "HTML iframe" ou "Custom Element" para adicionar o script.

Problemas de Origem Cruzada

Os widgets carregam conteúdo dos servidores do SidewaysData. Se você vir erros de origem cruzada:

1. Garanta que você está usando https:// (não http://) para a URL do script
2. Se estiver usando data-origin, verifique se o domínio está configurado corretamente

Ainda com problemas?

Se você tentou essas soluções e o widget ainda não está funcionando corretamente, entre em contato com o suporte do SidewaysData com:

• A URL da página onde você está incorporando o widget
• A tag de script completa que você está usando
• Quaisquer mensagens de erro do console do navegador
• Uma descrição do que você espera vs. o que está acontecendo