Amplia la tua portata incorporando i widget di SidewaysData direttamente sul tuo sito web. Visualizza i tuoi eventi e i risultati in tempo reale dove il tuo pubblico visita già — con una sola riga di codice.

Perché usare i widget?

• Una riga di codice - Basta incollare un tag script nel tuo sito web
• Sempre aggiornato - Gli eventi e i risultati si aggiornano automaticamente da SidewaysData
• Nessuna manutenzione - Ci occupiamo noi di tutti gli aggiornamenti e miglioramenti
• Aspetto professionale - Design raffinato e responsive che funziona su qualsiasi dispositivo
• Gratuito - Incluso con SidewaysData senza costi aggiuntivi

Widget disponibili

Widget Trova Eventi

Mostra un elenco filtrabile dei tuoi eventi. I visitatori possono navigare per anno, stato di registrazione, tipo di evento e altro. Perfetto per la tua pagina eventi o la homepage.

Scopri di più sul widget Trova Eventi

Widget Risultati in tempo reale

Mostra i risultati delle gare in tempo reale durante i tuoi eventi. Include una chat in diretta per gli spettatori e passa automaticamente tra "Risultati Live" e "Risultati Finali" in base all'orario dell'evento.

Scopri di più sul widget Risultati in tempo reale

Per iniziare

1. Trova il tuo organizer ID o i tuoi event IDs (vedi Ottenere i tuoi ID)
2. Scegli quale widget ti serve
3. Copia il codice di embed e incollalo nel tuo sito web
4. Personalizza con attributi di configurazione opzionali

Requisiti

I widget funzionano su qualsiasi sito web che supporti JavaScript. Questo include WordPress, Squarespace, Wix, siti HTML personalizzati e la maggior parte dei website builder. Avrai bisogno della possibilità di aggiungere HTML personalizzato o tag script alle tue pagine.

Per configurare i widget, avrai bisogno del tuo organizer ID e, opzionalmente, di specifici event IDs. Ecco come trovarli.

Trovare il tuo organizer ID

Il tuo organizer ID appare nell'URL quando visualizzi la pagina dell'organizer su SidewaysData.

1. Vai a sidewaysdata.com
2. Vai alla pagina del tuo organizer
3. Guarda l'URL—avrà il formato: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

Ad esempio, se il tuo URL è sidewaysdata.com/organizer/example-motorsports, il tuo organizer ID è example-motorsports.

Trovare gli event IDs

Gli event IDs appaiono negli URL degli eventi e nella dashboard del tuo organizer.

Dall'URL dell'evento

1. Vai a uno qualsiasi dei tuoi eventi su SidewaysData
2. Guarda l'URL—conterrà l'event ID dopo /events/

Per esempio: sidewaysdata.com/events/12345 significa che l'event ID è 12345.

Dalla tua Dashboard

1. Accedi a SidewaysData
2. Vai alla tua pagina Eventi
3. L'event ID è mostrato nell'elenco degli eventi o visibile nei link

Usare gli strumenti per sviluppatori del browser

Se hai difficoltà a trovare gli ID:

1. Fai clic con il tasto destro sulla pagina dell'organizer o dell'evento
2. Seleziona "Inspect" o "Inspect Element"
3. Cerca attributi data o URL che contengano l'ID

Hai bisogno di aiuto?

Se non riesci a trovare i tuoi ID, contatta il supporto di SidewaysData e ti aiuteremo a recuperarli.

Il widget Find Events mostra un elenco filtrabile di eventi sul tuo sito. I visitatori possono sfogliare gli eventi in arrivo, filtrare per vari criteri e cliccare per registrarsi o visualizzare i dettagli su SidewaysData.

Cosa mostra

• Schede evento con nome, data, luogo e stato della registrazione
• Menu a discesa di filtro per anno, tipo di evento, stato di registrazione e opportunità di volontariato
• Link diretti alle pagine degli eventi su SidewaysData
• Layout responsive che si adatta a qualsiasi dimensione dello schermo

Codice di incorporamento di base

Aggiungi questo tag script al tuo sito dove vuoi che compaiano gli eventi:

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

Sostituisci your-organizer-id con il tuo organizer ID reale (vedi Ottenere i tuoi ID).

Comportamento predefinito

Senza configurazioni aggiuntive, il widget:

• Mostrare tutti gli eventi dagli organizer specificati
• Visualizzare i menu a discesa dei filtri per anno, tipo di evento, stato di registrazione e volontari
• Ordinare gli eventi per data (dal più vecchio al più recente)
• Includere eventi con qualsiasi stato di registrazione

Come funziona

Il widget crea un iframe responsive che carica contenuti da SidewaysData. L'iframe regola automaticamente la sua altezza per adattarsi al contenuto, quindi non c'è scorrimento all'interno del widget stesso. Gli eventi rimangono sincronizzati con il tuo account SidewaysData: tutte le modifiche che apporti vengono riflesse automaticamente.

Prossimi passi

• Configura il widget con attributi opzionali
• Vedi esempi comuni per diversi casi d'uso

Personalizza il widget Find Events usando attributi data nel tag script. Tutti gli attributi sono opzionali tranne quando si specifica quali eventi mostrare.

Specificare gli eventi

Devi includere almeno uno di questi attributi per specificare quali eventi visualizzare:

data-organizer-ids

Mostra tutti gli eventi di specifici organizzatori. Usa valori separati da virgola per più organizzatori.

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

Più organizzatori:

<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

Mostra solo eventi specifici per i loro ID. Usa valori separati da virgola per più eventi.

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

Opzioni di filtraggio

data-event-status

Filtra gli eventi per stato di registrazione. Valori: open, closed, o any.

data-event-status="open"

data-default-reg-status

Imposta il valore predefinito per il menu a tendina dello stato di registrazione. Questo pre-seleziona un'opzione di filtro ma permette comunque ai visitatori di modificarla.

data-default-reg-status="open"

data-limit-organizer-event-types

Se impostato su true, mostra solo i tipi di evento che l'organizzatore effettivamente utilizza, invece di tutti i tipi disponibili nel menu a tendina.

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

data-hide-volunteers-dropdown

Se impostato su true, nasconde il menu a tendina per il filtro delle opportunità di volontariato.

data-hide-volunteers-dropdown="true"

Opzioni di visualizzazione

data-is-results-mode

Se impostato su true, mostra eventi che hanno risultati disponibili invece degli eventi in arrivo. Utile per una pagina "Risultati passati".

data-is-results-mode="true"

data-newest-first

Se impostato su true, ordina gli eventi dal più recente al più vecchio invece dell'ordinamento predefinito dal più vecchio al più recente.

data-newest-first="true"

Opzioni avanzate

data-origin

Usa un dominio personalizzato invece del predefinito sidewaysdata.com. Necessario solo se hai un dominio personalizzato configurato con SidewaysData.

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

Esempio completo

Ecco un esempio che usa più opzioni di configurazione:

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

Questo mostra eventi con registrazione aperta di "example-motorsports", mostra solo i tipi di evento rilevanti nel filtro, nasconde il menu dei volontari e ordina gli eventi dal più recente.

Configurazioni comuni per il widget Find Events per adattarsi a diversi casi d'uso.

Mostra tutti i tuoi eventi

Mostra tutti gli eventi della tua organizzazione con tutte le opzioni di filtro disponibili:

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

Mostra solo gli eventi con registrazione aperta

Mostra gli eventi che stanno attualmente accettando registrazioni:

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

Mostra eventi con risultati

Crea una pagina "Past Results" che mostri gli eventi che hanno risultati cronometrici:

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

Mostra eventi specifici

Mostra solo eventi particolari, come una serie di campionati:

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

Mostra eventi da più organizzatori

Mostra eventi provenienti da diverse organizzazioni su una pagina regionale o di 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 semplificata (filtri minimi)

Mostra gli eventi con un'interfaccia più pulita nascondendo i filtri usati meno frequentemente:

<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 per la homepage (eventi aperti, più recenti prima)

Una configurazione comune per la homepage del tuo sito 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>

Filtro predefinito su Registrazione Aperta

Mostra tutti gli eventi ma imposta il filtro di registrazione su "open" per impostazione predefinita:

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

Questo differisce da data-event-status="open" perché i visitatori possono comunque modificare il filtro per vedere gli eventi chiusi.

Il widget Live Results mostra i risultati di gara in tempo reale sul tuo sito web. Gli spettatori possono seguire l'evento durante lo svolgimento e visualizzare i risultati finali in seguito—tutto senza lasciare il tuo sito.

Cosa Visualizza

• Risultati di cronometraggio in tempo reale durante gli eventi dal vivo
• Indicatore "Live Results" o "Final Results" a seconda del momento dell'evento
• Chat live integrata gestita da FastComments per l'interazione degli spettatori
• Aggiornamenti automatici man mano che vengono registrati nuovi tempi

Codice di incorporamento di base

Aggiungi questo tag script al tuo sito dove vuoi che appaiano i risultati:

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

Sostituisci your-organizer-id con il tuo effettivo organizer ID (vedi Ottenere i tuoi ID).

Nota: Il widget Live Results richiede l'attributo data-organizer-id. Il widget non si caricherà senza di esso.

Come Funziona

Il widget crea un iframe responsive che si connette al sistema di cronometraggio live di SidewaysData. Durante un evento attivo:

• I risultati si aggiornano in tempo reale man mano che i tempi vengono registrati
• Il widget mostra "Live Results" per indicare che il cronometraggio è in corso
• La chat live permette agli spettatori di discutere l'evento

Dopo la fine dell'evento:

• I risultati rimangono disponibili per la visualizzazione
• Il widget passa all'indicatore "Final Results"
• La cronologia della chat viene preservata

Casi d'uso

• Giorno dell'evento - Incorporalo nella tua homepage così gli spettatori possono seguire in diretta
• Pagina dei risultati dedicata - Crea una pagina dei risultati permanente sul tuo sito web
• Pagina di destinazione per social media - Condividi un link alla tua pagina dei risultati durante gli eventi

Passaggi successivi

• Configura il widget con attributi opzionali

Il widget Live Results richiede una configurazione minima—è necessario solo il tuo ID organizzatore.

Required Attribute

data-organizer-id

Il tuo ID organizzatore SidewaysData. Questo è necessario affinché il widget funzioni.

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

Vedi Getting Your IDs per aiuto nel trovare il tuo ID organizzatore.

Optional Attribute

data-origin

Usa un dominio personalizzato invece del valore predefinito sidewaysdata.com. Necessario solo se hai un dominio personalizzato configurato 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 tipico embed di Live Results:

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

Error Handling

Se l'attributo data-organizer-id è assente, il widget registrerà un errore nella console del browser e non verrà renderizzato. Assicurati di includere questo attributo obbligatorio.

Placement Tips

• Posiziona il widget in un contenitore con larghezza adeguata (almeno 320px consigliati)
• Il widget regola automaticamente l'altezza per adattarsi al contenuto
• Valuta di posizionarlo "above the fold" nei giorni dell'evento per la massima visibilità
• Funziona bene come contenuto principale di una pagina dedicata "Live Results"

I widget di SidewaysData sono incorporati come iframe, il che limita la possibilità di applicare direttamente CSS. Tuttavia, puoi controllare come i widget si adattano al layout della tua pagina.

Stile del contenitore

Avvolgi il widget in un elemento contenitore per controllarne il posizionamento e la larghezza massima:

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

Controllo della larghezza

I widget si espandono automaticamente al 100% della larghezza del loro contenitore. Controlla la larghezza stilizzando l'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>

Comportamento dell'altezza

L'altezza del widget si adatta automaticamente in base al contenuto. L'iframe usa postMessage per comunicare alla tua pagina l'altezza necessaria, eliminando le barre di scorrimento all'interno del widget.

Design reattivo

I widget sono progettati per essere reattivi e funzionare bene su dispositivi mobili. Si adattano automaticamente a schermi più stretti. Per risultati ottimali:

• Usa larghezze del contenitore basate su percentuali o flessibili
• Evita di impostare larghezze in pixel fisse che potrebbero causare scorrimento orizzontale su mobile
• Testa su varie dimensioni di schermo

Compatibilità dello sfondo

I widget hanno uno sfondo chiaro e sono progettati per funzionare bene su pagine di colore chiaro. Se il tuo sito ha uno sfondo scuro, considera di posizionare il widget in un contenitore di colore chiaro:

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

Limitazioni di styling dell'iframe

Poiché i widget utilizzano iframe, non puoi modificare direttamente lo stile del contenuto al loro interno (ad esempio font, colori o stili dei pulsanti). Il contenuto del widget utilizza lo stile standard di SidewaysData per garantire un aspetto coerente e professionale.

Se hai esigenze di branding specifiche, contatta il supporto SidewaysData per discutere le opzioni.

Aggiunta di margini e spaziatura

Aggiungi spaziatura attorno al widget usando CSS standard sul contenitore:

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

Problemi comuni e soluzioni quando si utilizzano i widget di SidewaysData.

Widget Not Appearing

Check the script URL

Ensure the script src attribute points to the correct URL:

• 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

Check required attributes

• Find Events widget richiede data-organizer-ids oppure data-event-ids
• Live Results widget richiede data-organizer-id

Check for JavaScript errors

Apri la console per sviluppatori del tuo browser (di solito F12 o clic destro → Ispeziona → Console) e cerca messaggi di errore. Il widget Live Results registra un errore se data-organizer-id è mancante.

Verify your IDs are correct

Controlla che gli ID degli organizer e degli eventi corrispondano a quelli mostrati su SidewaysData. Vedi Ottenere i tuoi ID.

Wrong Events Showing

Check organizer ID spelling

Gli ID degli organizer fanno distinzione tra maiuscole e minuscole. Assicurati che l'ID corrisponda esattamente a quello che appare nell'URL di SidewaysData.

Check filter settings

Se stai usando data-event-status="open" ma non vedi eventi, potresti non avere eventi con iscrizione aperta. Prova a rimuovere questo filtro per visualizzare tutti gli eventi.

Check results mode

Se è impostato data-is-results-mode="true", il widget mostra eventi con risultati, non gli eventi in arrivo. Rimuovi questo attributo per vedere gli eventi in arrivo.

Widget Height Issues

Widget appears cut off

Il widget dovrebbe adattare automaticamente la sua altezza. Se il contenuto appare tagliato:

1. Check that no parent element has overflow: hidden set
2. Ensure no CSS is setting a fixed height on the iframe
3. Verify JavaScript is enabled in your browser

Excessive empty space

Se c'è troppo spazio vuoto sotto il widget, l'adeguamento automatico dell'altezza dovrebbe gestirlo. In caso contrario, il widget potrebbe essere caricato ma non avere eventi da mostrare.

Content Not Updating

Events not showing recent changes

I widget caricano contenuti aggiornati da SidewaysData ad ogni caricamento della pagina. Se le modifiche non appaiono:

1. Forza il refresh della pagina (Ctrl+F5 o Cmd+Shift+R)
2. Svuota la cache del browser
3. Attendi qualche minuto—alcune modifiche potrebbero richiedere un momento per propagarsi

Live results not updating

Durante il cronometraggio live, i risultati dovrebbero aggiornarsi automaticamente. Se non lo fanno:

1. Verifica che l'evento sia in fase di cronometraggio attivo su SidewaysData
2. Aggiorna la pagina
3. Controlla la tua connessione a Internet

Website Builder Issues

WordPress

Se usi WordPress, potrebbe essere necessario:

• Usa un blocco o widget "Custom HTML"
• Disabilita temporaneamente eventuali plugin che bloccano gli script
• Controlla se il tuo tema rimuove i tag script dal contenuto

Squarespace

Usa un elemento "Code Block" o "Embed" e incolla direttamente il tag script.

Wix

Usa la funzione "HTML iframe" o "Custom Element" per aggiungere lo script.

Cross-Origin Issues

I widget caricano contenuti dai server di SidewaysData. Se vedi errori di cross-origin:

1. Assicurati di usare https:// (non http://) per l'URL dello script
2. Se usi data-origin, verifica che il dominio sia configurato correttamente

Still Having Issues?

Se hai provato queste soluzioni e il widget continua a non funzionare correttamente, contatta il supporto SidewaysData fornendo:

• L'URL della pagina in cui stai incorporando il widget
• Il tag script completo che stai usando
• Eventuali messaggi di errore dalla console del browser
• Una descrizione di ciò che ti aspetti rispetto a ciò che sta accadendo