Udvid din rækkevidde ved at indlejre SidewaysData-widgets direkte på dit eget websted. Vis dine begivenheder og live-resultater dér, hvor dit publikum allerede besøger — med blot én linje kode.

Hvorfor bruge widgets?

• Én linje kode - Indsæt blot et script-tag på dit websted
• Altid opdateret - Begivenheder og resultater synkroniseres automatisk fra SidewaysData
• Ingen vedligeholdelse - Vi tager os af alle opdateringer og forbedringer
• Professionelt udseende - Poleret, responsivt design, der fungerer på enhver enhed
• Gratis - Inkluderet med SidewaysData uden ekstra omkostninger

Tilgængelige widgets

Find Events-widget

Vis en filtrerbar liste over dine begivenheder. Besøgende kan browse efter år, tilmeldingsstatus, begivenhedstype og mere. Perfekt til din events-side eller startsiden.

Learn more about the Find Events widget

Live Results-widget

Vis resultater i realtid under dine begivenheder. Inkluderer live-chat for tilskuere og skifter automatisk mellem "Live Results" og "Final Results" afhængigt af begivenhedens tidsplan.

Learn more about the Live Results widget

Kom godt i gang

1. Find your organizer ID or event IDs (see Getting Your IDs)
2. Vælg hvilken widget du har brug for
3. Kopiér indlejringskoden og indsæt den på dit websted
4. Tilpas med valgfrie konfigurationsattributter

Krav

Widgets fungerer på ethvert websted, der understøtter JavaScript. Dette inkluderer WordPress, Squarespace, Wix, brugerdefinerede HTML-sider og de fleste website-buildere. Du skal kunne tilføje brugerdefineret HTML eller script-tags til dine sider.

For at konfigurere widgets skal du bruge dit organizer ID og eventuelt specifikke event IDs. Sådan finder du dem.

Sådan finder du dit organizer ID

Dit organizer ID vises i URL'en, når du ser din organizer-side på SidewaysData.

1. Gå til sidewaysdata.com
2. Naviger til din organizer-side
3. Se på URL'en—den vil være i formatet: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

For eksempel, hvis din URL er sidewaysdata.com/organizer/example-motorsports, er dit organizer ID example-motorsports.

Sådan finder du event IDs

Event IDs vises i event-URL'er og i dit organizer-dashboard.

Fra event-URL'en

1. Gå til et af dine events på SidewaysData
2. Se på URL'en—den vil indeholde event ID'et efter /events/

For eksempel: sidewaysdata.com/events/12345 betyder, at event ID'et er 12345.

Fra dit dashboard

1. Log ind på SidewaysData
2. Gå til din Events-side
3. Event ID'et vises i eventlisten eller er synligt i links

Brug af browserens udviklerværktøjer

Hvis du har svært ved at finde ID'erne:

1. Højreklik på din organizer- eller event-side
2. Vælg "Inspect" eller "Inspect Element"
3. Kig efter data-attributter eller URL'er, der indeholder ID'et

Brug for hjælp?

Hvis du ikke kan finde dine ID'er, kontakt SidewaysData support, så hjælper vi dig med at finde dem.

Find Events-widgeten viser en filtrerbar liste over begivenheder på dit websted. Besøgende kan gennemse kommende begivenheder, filtrere efter forskellige kriterier og klikke videre for at tilmelde sig eller se detaljer på SidewaysData.

Hvad den viser

• Begivenhedskort med navn, dato, sted og tilmeldingsstatus
• Filter-rullemenuer for år, begivenhedstype, tilmeldingsstatus og muligheder for frivillige
• Direkte links til begivenhedssider på SidewaysData
• Responsivt layout, der tilpasser sig enhver skærmstørrelse

Grundlæggende indlejringskode

Tilføj denne script-tag til dit websted, hvor du ønsker begivenhederne skal vises:

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

Erstat your-organizer-id med dit faktiske organizer ID (se Getting Your IDs).

Standardadfærd

Uden yderligere konfiguration vil widgeten:

• Vise alle begivenheder fra de angivne arrangører
• Vise filter-rullemenuer for år, begivenhedstype, tilmeldingsstatus og frivillige
• Sortere begivenheder efter dato (ældste først)
• Medtage begivenheder med enhver tilmeldingsstatus

Hvordan det virker

Widgeten opretter en responsiv iframe, der indlæser indhold fra SidewaysData. Iframen justerer automatisk sin højde for at passe til indholdet, så der ikke er nogen rulning inden i selve widgeten. Begivenheder forbliver synkroniserede med din SidewaysData-konto — ændringer du foretager afspejles automatisk.

Næste trin

• Konfigurer widgeten med valgfrie attributter
• Se almindelige eksempler for forskellige brugsscenarier

Tilpas Find Events-widget'en ved hjælp af dataattributter på script-tagget. Alle attributter er valgfrie undtagen det at angive, hvilke begivenheder der skal vises.

Angivelse af begivenheder

Du skal inkludere mindst en af disse attributter for at angive, hvilke begivenheder der skal vises:

data-organizer-ids

Vis alle begivenheder fra bestemte arrangører. Brug kommaadskilte værdier for flere arrangører.

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

Flere arrangører:

<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

Vis kun specifikke begivenheder efter deres ID'er. Brug kommaadskilte værdier for flere begivenheder.

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

Filtreringsmuligheder

data-event-status

Filtrer begivenheder efter registreringsstatus. Værdier: open, closed eller any.

data-event-status="open"

data-default-reg-status

Angiv standardværdien for dropdown-menuen for registreringsstatus. Dette forudvælger en filtermulighed, men tillader stadig besøgende at ændre den.

data-default-reg-status="open"

data-limit-organizer-event-types

Når sat til true, vises kun de begivenhedstyper, som arrangøren faktisk bruger, i stedet for alle tilgængelige begivenhedstyper i dropdown-menuen.

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

data-hide-volunteers-dropdown

Når sat til true, skjul dropdown-menuen for frivilligmuligheder.

data-hide-volunteers-dropdown="true"

Visningsmuligheder

data-is-results-mode

Når sat til true, vis begivenheder, som har resultater tilgængelige i stedet for kommende begivenheder. Nyttigt for en 'Tidligere resultater'-side.

data-is-results-mode="true"

data-newest-first

Når sat til true, sorter begivenheder med nyeste først i stedet for standardrækkefølgen ældste først.

data-newest-first="true"

Avancerede indstillinger

data-origin

Brug et tilpasset domæne i stedet for standarden sidewaysdata.com. Kun nødvendigt, hvis du har et tilpasset domæne konfigureret med SidewaysData.

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

Komplet eksempel

Her er et eksempel, der bruger flere konfigurationsmuligheder:

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

Dette viser begivenheder med åben tilmelding fra "example-motorsports", viser kun relevante begivenhedstyper i filteret, skjuler dropdown-menuen for frivilligmuligheder og sorterer nyeste begivenheder først.

Almindelige konfigurationer af Find Events-widgeten til forskellige anvendelsestilfælde.

Vis alle dine begivenheder

Vis alle begivenheder fra din organisation med alle filtermuligheder tilgængelige:

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

Vis kun begivenheder med åben tilmelding

Vis begivenheder, der i øjeblikket accepterer tilmeldinger:

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

Vis begivenheder med resultater

Opret en 'Tidligere resultater'-side, der viser begivenheder med tidtagningsresultater:

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

Vis specifikke begivenheder

Vis kun bestemte begivenheder, for eksempel en mesterskabsserie:

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

Vis begivenheder fra flere arrangører

Vis begivenheder fra flere organisationer på en regional side eller en side for en serie:

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

Forenklet visning (minimale filtre)

Vis begivenheder med et renere interface ved at skjule mindre brugte filtre:

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

Forside-widget (åbne begivenheder, nyeste først)

En almindelig konfiguration til din hjemmesides forside:

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

Sæt standardfilteret til 'åben' tilmelding

Vis alle begivenheder, men lad registreringsfilteret som standard være "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>

Dette adskiller sig fra data-event-status="open" fordi besøgende stadig kan ændre filteret for at se lukkede begivenheder.

The Live Results-widget viser real-time løbsresultater på dit websted. Tilskuere kan følge med under begivenheder og se de endelige resultater bagefter—all uden at forlade dit site.

Hvad den viser

• Realtidsresultater under livebegivenheder
• "Live Results" eller "Final Results"-indikator baseret på begivenhedens status
• Indbygget live chat drevet af FastComments for tilskuerinteraktion
• Automatiske opdateringer, efterhånden som nye tider registreres

Grundlæggende indlejringskode

Tilføj dette script-tag til dit websted, hvor du ønsker, at resultaterne skal vises:

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

Udskift your-organizer-id med din faktiske organizer ID (se Få dine ID'er).

Bemærk: Live Results-widgeten kræver attributten data-organizer-id. Widgetten vil ikke indlæses uden den.

Hvordan det virker

Widgetten opretter et responsivt iframe, der forbinder til SidewaysData's live timing-system. Under en aktiv begivenhed:

• Resultater opdateres i realtid, efterhånden som tiderne registreres
• Widgetten viser "Live Results" for at indikere, at tidsmålingen er i gang
• Live chat giver tilskuere mulighed for at diskutere begivenheden

Efter begivenheden slutter:

• Resultaterne forbliver tilgængelige til visning
• Widgetten skifter til "Final Results"-indikator
• Chathistorikken bevares

Brugstilfælde

• Eventdag - Indlejre på din forside, så tilskuere kan følge med live
• Dedikeret resultatside - Opret en permanent resultatside på dit websted
• Landingsside til sociale medier - Del et link til din resultatside under begivenheder

Næste skridt

• Konfigurer widgeten med valgfrie attributter

Live Results-widgeten har minimal konfiguration — kun dit arrangør‑ID kræves.

Påkrævet attribut

data-organizer-id

Dit SidewaysData-arrangør-ID. Dette er nødvendigt for at widgetten kan fungere.

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

Se Find dine ID'er for hjælp til at finde dit arrangør‑ID.

Valgfri attribut

data-origin

Brug et brugerdefineret domæne i stedet for standarden sidewaysdata.com. Kun nødvendigt, hvis du har et brugerdefineret domæne konfigureret hos 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>

Komplet eksempel

Et typisk Live Results-embed:

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

Fejlhåndtering

Hvis attributten data-organizer-id mangler, vil widgetten skrive en fejl i browserens konsol og ikke gengives. Sørg for at inkludere denne påkrævede attribut.

Placeringstips

• Placer widgetten i en beholder med tilstrækkelig bredde (mindst 320px anbefales)
• Widgetten justerer automatisk sin højde for at passe til indholdet
• Overvej at placere den i den øverste del af siden på eventdage for maksimal synlighed
• Fungerer godt som hovedindholdet på en dedikeret "Live Results"-side

SidewaysData-widgets indlejres som iframes, hvilket begrænser direkte CSS-styling. Du kan dog kontrollere, hvordan widgets passer ind i dit sidelayou t.

Containerstyling

Indpak widgettet i et container-element for at styre dets placering og maksimale bredde:

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

Breddekontrol

Widgets udvider sig automatisk til 100% af deres containerbredde. Kontroller bredden ved at style det overordnede element:

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

Højdeadfærd

Widgetens højde tilpasser sig automatisk efter indholdet. Iframen bruger postMessage til at kommunikere sin nødvendige højde til din side, hvilket fjerner rullepaneler inden i widgetten.

Responsivt design

Widgets er designet til at være responsive og fungerer godt på mobile enheder. De tilpasser sig automatisk til smallere skærme. For bedste resultater:

• Brug procentbaserede eller fleksible containerbredder
• Undgå at sætte faste pixelbredder, som kan forårsage vandret rulning på mobil
• Test på forskellige skærmstørrelser

Baggrundskompatibilitet

Widgets har en lys baggrund og er designet til at fungere godt på lyse sider. Hvis dit websted har en mørk baggrund, kan du overveje at placere widgetten i en lysfarvet container:

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

Begrænsninger for iframe-styling

Da widgets bruger iframes, kan du ikke direkte style indholdet indeni dem (såsom skrifttyper, farver eller knapstilarter). Widgetindholdet bruger SidewaysData's standardstyling for at sikre et konsistent, professionelt udseende.

Hvis du har specifikke brandingkrav, kontakt SidewaysData-support for at diskutere muligheder.

Tilføjelse af marginer og afstand

Tilføj afstand omkring widgetten ved hjælp af standard CSS på containeren:

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

Almindelige problemer og løsninger ved brug af SidewaysData-widgets.

Widget vises ikke

Kontrollér script-URL'en

Sørg for, at scriptets src-attribut peger på den korrekte 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

Kontrollér påkrævede attributter

• Find Events widget kræver enten data-organizer-ids eller data-event-ids
• Live Results widget kræver data-organizer-id

Kontrollér for JavaScript-fejl

Åbn din browsers udviklerkonsol (normalt F12 eller højreklik → Undersøg → Konsol) og kig efter fejlnotifikationer. Live Results-widgetten logger en fejl, hvis data-organizer-id mangler.

Bekræft at dine ID'er er korrekte

Dobbelttjek, at arrangør- og event-ID'erne stemmer overens med det, der vises på SidewaysData. Se Hent dine ID'er.

Forkerte begivenheder vises

Kontrollér stavemåden på arrangør-ID'et

Arrangør-ID'er skelner mellem store og små bogstaver. Sørg for, at ID'et præcis matcher det, der står i SidewaysData-URL'en.

Kontrollér filterindstillinger

Hvis du bruger data-event-status="open" men ikke ser nogen begivenheder, har du måske ingen begivenheder med åben tilmelding. Prøv at fjerne dette filter for at se alle begivenheder.

Kontrollér resultattilstand

Hvis data-is-results-mode="true" er sat, viser widgetten begivenheder med resultater, ikke kommende begivenheder. Fjern denne attribut for at se kommende begivenheder.

Problemer med widget-højden

Widgetten vises afskåret

Widgetten burde automatisk justere sin højde. Hvis indhold ser afskåret ud:

1. Kontrollér, at ingen overordnet element har overflow: hidden sat
2. Sørg for, at ingen CSS sætter en fast højde på iframe'en
3. Bekræft, at JavaScript er aktiveret i din browser

For meget tom plads

Hvis der er for meget tom plads under widgetten, burde den automatiske højdejustering ordne det. Hvis ikke, kan det være, at widgetten indlæser, men ikke har nogle begivenheder at vise.

Indhold opdateres ikke

Begivenheder viser ikke de seneste ændringer

Widgets indlæser nyt indhold fra SidewaysData ved hver sidelæsning. Hvis ændringer ikke vises:

1. Lav en hård opdatering af siden (Ctrl+F5 eller Cmd+Shift+R)
2. Ryd din browsers cache
3. Vent et par minutter—nogle ændringer kan tage et øjeblik at slå igennem

Live-resultater opdateres ikke

Under live-timing bør resultater opdatere automatisk. Hvis de ikke gør det:

1. Bekræft, at begivenheden aktivt tidsregistreres på SidewaysData
2. Opdater siden
3. Tjek din internetforbindelse

Problemer med sidebyggere

WordPress

Hvis du bruger WordPress, kan du få behov for at:

• Brug et "Custom HTML"-blok eller widget
• Deaktiver midlertidigt eventuelle script-blokerende plugins
• Tjek om dit tema fjerner script-tags fra indholdet

Squarespace

Brug et "Code Block" eller "Embed"-element, og indsæt script-tagget direkte.

Wix

Brug "HTML iframe" eller "Custom Element"-funktionen til at tilføje scriptet.

Cross-origin-problemer

Widgets indlæser indhold fra SidewaysData's servere. Hvis du ser cross-origin-fejl:

1. Sørg for, at du bruger https:// (ikke http://) til script-URL'en
2. Hvis du bruger data-origin, verificér at domænet er korrekt konfigureret

Har du stadig problemer?

Hvis du har prøvet disse løsninger, og widgetten stadig ikke fungerer korrekt, kontakt SidewaysData-support med:

• URL'en på siden, hvor du integrerer widgetten
• Det fulde script-tag, du bruger
• Eventuelle fejlmeddelelser fra browserens konsol
• En beskrivelse af, hvad du forventer kontra hvad der sker