Vergroot uw bereik door SidewaysData-widgets rechtstreeks op uw eigen website in te sluiten. Toon uw evenementen en live-uitslagen waar uw publiek sowieso al komt—with slechts één regel code.

Waarom Widgets Gebruiken?

• One line of code - Plak eenvoudig een script-tag in uw website
• Always up-to-date - Evenementen en uitslagen synchroniseren automatisch vanuit SidewaysData
• No maintenance - Wij verzorgen alle updates en verbeteringen
• Professional appearance - Professionele uitstraling, gepolijst en responsief ontwerp dat op elk apparaat werkt
• Free - Inclusief bij SidewaysData zonder extra kosten

Beschikbare Widgets

Vind evenementen-widget

Toon een filterbare lijst van uw evenementen. Bezoekers kunnen zoeken op jaar, registratiestatus, type evenement en meer. Perfect voor uw evenementenpagina of startpagina.

Lees meer over de Find Events widget

Live-uitslagen-widget

Toon realtime wedstrijduitslagen tijdens uw evenementen. Inclusief livechat voor toeschouwers en schakelt automatisch tussen "Live Results" en "Final Results" op basis van de timing van het evenement.

Lees meer over de Live Results widget

Aan de slag

1. Zoek uw organisator-ID of evenement-ID's (zie Getting Your IDs)
2. Kies welke widget u nodig heeft
3. Kopieer de embed-code en plak deze in uw website
4. Pas aan met optionele configuratie-attributen

Vereisten

Widgets werken op elke website die JavaScript ondersteunt. Dit omvat WordPress, Squarespace, Wix, aangepaste HTML-sites en de meeste websitebouwers. U moet de mogelijkheid hebben om aangepaste HTML of script-tags aan uw pagina's toe te voegen.

Om widgets te configureren heeft u uw organisator-ID en, optioneel, specifieke evenement-ID's nodig. Zo vindt u ze.

Uw organisator-ID vinden

Uw organisator-ID verschijnt in de URL wanneer u uw organisatorpagina op SidewaysData bekijkt.

1. Ga naar sidewaysdata.com
2. Navigeer naar uw organisatorpagina
3. Kijk naar de URL — deze heeft het formaat: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

Bijvoorbeeld, als uw URL sidewaysdata.com/organizer/example-motorsports is, dan is uw organisator-ID example-motorsports.

Evenement-ID's vinden

Evenement-ID's verschijnen in de evenement-URL's en in uw organisator-dashboard.

Vanuit de evenement-URL

1. Navigeer naar een van uw evenementen op SidewaysData
2. Kijk naar de URL — deze bevat het evenement-ID na /events/

Bijvoorbeeld: sidewaysdata.com/events/12345 betekent dat het evenement-ID 12345 is.

Vanuit uw dashboard

1. Log in op SidewaysData
2. Ga naar uw Evenementen-pagina
3. Het evenement-ID wordt weergegeven in de evenementenlijst of is zichtbaar in links

Ontwikkelaarstools van de browser gebruiken

Als u problemen hebt met het vinden van ID's:

1. Klik met de rechtermuisknop op uw organisator- of evenementpagina
2. Selecteer "Inspect" of "Element inspecteren"
3. Zoek naar data-attributen of URL's die het ID bevatten

Hulp nodig?

Als u uw ID's niet kunt vinden, neem contact op met SidewaysData-ondersteuning en wij helpen u ze te vinden.

De Find Events-widget toont een filterbare lijst met evenementen op uw website. Bezoekers kunnen aankomende evenementen bekijken, filteren op verschillende criteria en doorklikken om zich te registreren of details op SidewaysData te bekijken.

Wat het weergeeft

• Evenementkaarten met naam, datum, locatie en registratiestatus
• Filter-dropdowns voor jaar, type evenement, registratiestatus en vrijwilligerskansen
• Directe links naar evenementpagina's op SidewaysData
• Responsieve lay-out die zich aanpast aan elk schermformaat

Basis embed-code

Voeg deze script-tag toe aan uw website op de plaats waar u de evenementen wilt laten verschijnen:

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

Vervang your-organizer-id door uw daadwerkelijke organizer ID (zie Je ID's ophalen).

Standaardgedrag

Zonder extra configuratie zal de widget:

• Alle evenementen van de opgegeven organisator(en) tonen
• Filter-dropdowns weergeven voor jaar, type evenement, registratiestatus en vrijwilligers
• Evenementen sorteren op datum (oudste eerst)
• Evenementen opnemen met elke registratiestatus

Hoe het werkt

De widget maakt een responsief iframe dat inhoud laadt van SidewaysData. Het iframe past automatisch zijn hoogte aan om bij de inhoud te passen, zodat er geen scrollen binnen de widget zelf is. Evenementen blijven gesynchroniseerd met uw SidewaysData-account — alle wijzigingen die u aanbrengt worden automatisch weergegeven.

Volgende stappen

• Configureer de widget met optionele attributen
• Zie veelvoorkomende voorbeelden voor verschillende gebruiksscenario's

Pas de Find Events-widget aan met data-attributen op de script-tag. Alle attributen zijn optioneel behalve het opgeven van welke evenementen moeten worden weergegeven.

Evenementen opgeven

Je moet minstens één van deze attributen opnemen om aan te geven welke evenementen worden weergegeven:

data-organizer-ids

Toon alle evenementen van specifieke organisatoren. Gebruik komma-gescheiden waarden voor meerdere organisatoren.

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

Meerdere organisatoren:

<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

Toon alleen specifieke evenementen op basis van hun ID's. Gebruik komma-gescheiden waarden voor meerdere evenementen.

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

Filteropties

data-event-status

Filter evenementen op registratiestatus. Waarden: open, closed of any.

data-event-status="open"

data-default-reg-status

Stel de standaardwaarde in voor de registratiestatus-keuzelijst. Dit selecteert vooraf een filteroptie, maar bezoekers kunnen deze nog steeds wijzigen.

data-default-reg-status="open"

data-limit-organizer-event-types

Wanneer ingesteld op true, worden alleen de evenementtypen getoond die de organisator daadwerkelijk gebruikt, in plaats van alle beschikbare evenementtypen in de keuzelijst.

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

data-hide-volunteers-dropdown

Wanneer ingesteld op true, verberg de filter-keuzelijst voor vrijwilligersmogelijkheden.

data-hide-volunteers-dropdown="true"

Weergave-opties

data-is-results-mode

Wanneer ingesteld op true, toon evenementen waarvoor resultaten beschikbaar zijn in plaats van aankomende evenementen. Handig voor een pagina "Resultaten uit het verleden".

data-is-results-mode="true"

data-newest-first

Wanneer ingesteld op true, sorteert de lijst met evenementen van nieuw naar oud in plaats van de standaard volgorde van oud naar nieuw.

data-newest-first="true"

Geavanceerde opties

data-origin

Gebruik een aangepast domein in plaats van de standaard sidewaysdata.com. Alleen nodig als je een aangepast domein hebt geconfigureerd bij SidewaysData.

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

Volledig voorbeeld

Hier is een voorbeeld met meerdere configuratie-opties:

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

Dit toont evenementen met open registratie van "example-motorsports", toont alleen relevante evenementtypen in de filter, verbergt de vrijwilligers-keuzelijst en sorteert de nieuwste evenementen eerst.

Veelvoorkomende configuraties voor de Find Events-widget om aan verschillende use cases te voldoen.

Toon al je evenementen

Toon alle evenementen van je organisatie met alle filteropties beschikbaar:

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

Toon alleen evenementen met open registratie

Toon evenementen die zich momenteel aanmelden accepteren:

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

Toon evenementen met uitslagen

Maak een "Past Results"-pagina die evenementen toont met tijdwaarnemingsuitslagen:

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

Toon specifieke evenementen

Toon alleen bepaalde evenementen, zoals een kampioenschapsreeks:

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

Toon evenementen van meerdere organisatoren

Toon evenementen van meerdere organisaties op een regionale pagina of seriew pagina:

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

Vereenvoudigde weergave (minimale filters)

Toon evenementen met een schonere interface door minder gebruikte filters te verbergen:

<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 voor startpagina (open evenementen, nieuwste eerst)

Een veelgebruikte configuratie voor de startpagina van je website:

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

Standaard naar filter voor open registratie

Toon alle evenementen maar laat het registratiefilter standaard op "open" staan:

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

Dit verschilt van data-event-status="open" omdat bezoekers nog steeds de filter kunnen wijzigen om gesloten evenementen te zien.

De Live Results-widget toont realtime raceresultaten op uw website. Toeschouwers kunnen tijdens evenementen volgen en achteraf de eindresultaten bekijken—alles zonder uw site te verlaten.

Wat het weergeeft

• Realtime timingresultaten tijdens live-evenementen
• Indicator "Live resultaten" of "Eindresultaten" op basis van de evenementtiming
• Ingebouwde livechat aangedreven door FastComments voor toeschouwersinteractie
• Automatische updates zodra nieuwe tijden worden geregistreerd

Basis insluitcode

Voeg deze script-tag toe aan uw website op de plaats waar u de resultaten wilt weergeven:

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

Vervang your-organizer-id door uw daadwerkelijke organizer-ID (zie Uw ID's ophalen).

Opmerking: De Live Results-widget vereist het attribuut data-organizer-id. De widget zal niet laden zonder dit attribuut.

Hoe het werkt

De widget maakt een responsieve iframe die verbinding maakt met SidewaysData's live-timingsysteem. Tijdens een actief evenement:

• Resultaten worden in realtime bijgewerkt zodra tijden worden geregistreerd
• De widget toont "Live resultaten" om aan te geven dat de timing bezig is
• De livechat stelt toeschouwers in staat het evenement te bespreken

Na afloop van het evenement:

• Resultaten blijven beschikbaar om te bekijken
• De widget schakelt over naar de indicator "Eindresultaten"
• De chatgeschiedenis wordt bewaard

Gebruiksscenario's

• Dag van het evenement - Plaats op uw startpagina zodat toeschouwers live kunnen volgen
• Toegewijde resultatenpagina - Maak een permanente resultatenpagina op uw website
• Landingspagina voor sociale media - Deel een link naar uw resultatenpagina tijdens evenementen

Volgende stappen

• Configureer de widget met optionele attributen

De Live Results-widget heeft minimale configuratie—alleen uw organizer-ID is vereist.

Vereist attribuut

data-organizer-id

Uw SidewaysData organizer-ID. Dit is vereist voor het functioneren van de widget.

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

Zie Uw ID's ophalen voor hulp bij het vinden van uw organizer-ID.

Optioneel attribuut

data-origin

Gebruik een aangepast domein in plaats van de standaard sidewaysdata.com. Alleen nodig als u een aangepast domein hebt geconfigureerd bij 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>

Volledig voorbeeld

Een typisch Live Results-embed:

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

Foutafhandeling

Als het attribuut data-organizer-id ontbreekt, zal de widget een fout naar de browserconsole loggen en niet renderen. Zorg ervoor dat u dit vereiste attribuut opneemt.

Plaatsingstips

• Plaats de widget in een container met voldoende breedte (minimaal 320px aanbevolen)
• De widget past automatisch zijn hoogte aan om bij de inhoud te passen
• Overweeg om het boven de vouw te plaatsen op evenementdagen voor maximale zichtbaarheid
• Werkt goed als de hoofdinhoud van een speciale "Live Results"-pagina

SidewaysData-widgets worden als iframes ingesloten, wat directe CSS-styling beperkt. U kunt echter wel bepalen hoe widgets in uw paginalay-out passen.

Containerstyling

Plaats het widget in een containerelement om de plaatsing en maximale breedte te bepalen:

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

Breedtecontrole

Widgets breiden zich automatisch uit tot 100% van de breedte van hun container. Regel de breedte door het bovenliggende element te stijlen:

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

Hoogtegedrag

De hoogte van het widget past zich automatisch aan op basis van de inhoud. Het iframe gebruikt postMessage om de benodigde hoogte naar uw pagina te communiceren, waardoor schuifbalken binnen het widget worden geëlimineerd.

Responsief ontwerp

Widgets zijn ontworpen om responsief te zijn en goed te werken op mobiele apparaten. Ze passen zich automatisch aan smallere schermen aan. Voor de beste resultaten:

• Gebruik procentuele of flexibele containerbreedtes
• Vermijd het instellen van vaste pixelbreedtes die horizontaal scrollen op mobiele apparaten kunnen veroorzaken
• Test op verschillende schermformaten

Achtergrondcompatibiliteit

Widgets hebben een lichte achtergrond en zijn ontworpen om goed te werken op lichtgekleurde pagina's. Als uw site een donkere achtergrond heeft, overweeg dan om het widget in een lichtgekleurde container te plaatsen:

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

Beperkingen van iframe-styling

Omdat widgets iframes gebruiken, kunt u de inhoud erin niet rechtstreeks stylen (zoals lettertypen, kleuren of knopstijlen). De widgetinhoud gebruikt de standaardstyling van SidewaysData om een consistente, professionele uitstraling te garanderen.

Als u specifieke brandingvereisten heeft, neem dan contact op met de ondersteuning van SidewaysData om opties te bespreken.

Marges en tussenruimte toevoegen

Voeg ruimte rond het widget toe met standaard CSS op de container:

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

Veelvoorkomende problemen en oplossingen bij het gebruik van SidewaysData-widgets.

Widget verschijnt niet

Controleer de script-URL

Zorg dat het src-attribuut van het script naar de juiste URL verwijst:

• 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

Controleer vereiste attributen

• Find Events widget vereist ofwel data-organizer-ids of data-event-ids
• Live Results widget vereist data-organizer-id

Controleer op JavaScript-fouten

Open de ontwikkelaarconsole van je browser (meestal F12 of rechtermuisknop → Inspect → Console) en kijk naar foutmeldingen. De Live Results-widget logt een fout als data-organizer-id ontbreekt.

Verifieer dat je ID's kloppen

Controleer nogmaals of organizer- en event-ID's overeenkomen met wat in SidewaysData wordt weergegeven. Zie Je ID's ophalen.

Verkeerde evenementen worden getoond

Controleer de spelling van de organizer-ID

Organizer-ID's zijn hoofdlettergevoelig. Zorg dat de ID precies overeenkomt met wat in de SidewaysData-URL staat.

Controleer filterinstellingen

Als je data-event-status="open" gebruikt maar geen evenementen ziet, heb je mogelijk geen evenementen met open registratie. Probeer dit filter te verwijderen om alle evenementen te zien.

Controleer de resultatenmodus

Als data-is-results-mode="true" is ingesteld, toont de widget evenementen met resultaten, niet aankomende evenementen. Verwijder dit attribuut om aankomende evenementen te zien.

Problemen met widgethoogte

Widget lijkt afgesneden

De widget zou automatisch zijn hoogte moeten aanpassen. Als de inhoud afgesneden lijkt:

1. Controleer of geen ouder-element overflow: hidden heeft ingesteld
2. Zorg dat er geen CSS een vaste hoogte op de iframe instelt
3. Verifieer dat JavaScript is ingeschakeld in je browser

Overmatige lege ruimte

Als er te veel lege ruimte onder de widget staat, zou de automatische hoogteaanpassing dit moeten oplossen. Als dat niet gebeurt, kan de widget laden maar geen evenementen hebben om weer te geven.

Inhoud wordt niet bijgewerkt

Evenementen tonen recente wijzigingen niet

Widgets laden bij elke paginalading verse inhoud van SidewaysData. Als wijzigingen niet verschijnen:

1. Force-refresh de pagina (Ctrl+F5 of Cmd+Shift+R)
2. Wis je browsercache
3. Wacht een paar minuten—sommige wijzigingen kunnen even duren om door te voeren

Live resultaten worden niet bijgewerkt

Tijdens live timing zouden resultaten automatisch moeten bijwerken. Als dat niet gebeurt:

1. Controleer of het evenement actief wordt getimed op SidewaysData
2. Vernieuw de pagina
3. Controleer je internetverbinding

Problemen met websitebouwers

WordPress

Als je WordPress gebruikt, moet je mogelijk:

• Gebruik een "Custom HTML" block of widget
• Schakel tijdelijke elk script-blokkerende plugin uit
• Controleer of je thema script-tags uit de inhoud verwijdert

Squarespace

Gebruik een "Code Block" of "Embed" element en plak het script-tag direct.

Wix

Gebruik de functie "HTML iframe" of "Custom Element" om het script toe te voegen.

Cross-origin problemen

Widgets laden inhoud van de servers van SidewaysData. Als je cross-origin fouten ziet:

1. Zorg dat je https:// (niet http://) voor de script-URL gebruikt
2. Als je data-origin gebruikt, verifieer dat de domeinconfiguratie correct is

Nog steeds problemen?

Als je deze oplossingen hebt geprobeerd en de widget nog steeds niet goed werkt, neem contact op met de ondersteuning van SidewaysData met:

• De URL van de pagina waar je de widget insluit
• De volledige script-tag die je gebruikt
• Eventuele foutmeldingen uit de browserconsole
• Een beschrijving van wat je verwacht versus wat er gebeurt