Website Widgets | SidewaysData Docs

Aperçu

Étendez votre portée en intégrant les widgets SidewaysData directement sur votre propre site Web. Affichez vos événements et résultats en direct là où votre audience se rend déjà — avec une seule ligne de code.

Pourquoi utiliser les widgets ?

Une ligne de code - Il suffit de coller une balise script dans votre site Web
Toujours à jour - Les événements et les résultats se synchronisent automatiquement depuis SidewaysData
Aucune maintenance - Nous nous occupons de toutes les mises à jour et améliorations
Apparence professionnelle - Design soigné et réactif qui fonctionne sur n’importe quel appareil
Gratuit - Inclus avec SidewaysData sans coût additionnel

Widgets disponibles

Affichez une liste filtrable de vos événements. Les visiteurs peuvent parcourir par année, statut d'inscription, type d'événement, et plus encore. Parfait pour votre page d'événements ou votre page d'accueil.

En savoir plus sur le widget Trouver des événements

Affichez les résultats de course en temps réel pendant vos événements. Comprend un chat en direct pour les spectateurs et bascule automatiquement entre "Résultats en direct" et "Résultats finaux" en fonction du calendrier de l'événement.

En savoir plus sur le widget Résultats en direct

Pour commencer

Trouvez votre ID d'organisateur ou les ID d'événements (voir Obtenir vos ID)
Choisissez le widget dont vous avez besoin
Copiez le code d'intégration et collez-le sur votre site Web
Personnalisez avec des attributs de configuration optionnels

Exigences

Les widgets fonctionnent sur tout site Web qui prend en charge JavaScript. Cela inclut WordPress, Squarespace, Wix, les sites HTML personnalisés et la plupart des constructeurs de sites. Vous devrez pouvoir ajouter du HTML personnalisé ou des balises script à vos pages.

Obtention de vos ID

Pour configurer les widgets, vous aurez besoin de l'ID de votre organisateur et, facultativement, des ID d'événements spécifiques. Voici comment les trouver.

Trouver l'ID de votre organisateur

L'ID de votre organisateur apparaît dans l'URL lorsque vous consultez la page de votre organisateur sur SidewaysData.

Allez sur sidewaysdata.com
Naviguez vers la page de votre organisateur
Regardez l'URL — elle sera au format : sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

Par exemple, si votre URL est sidewaysdata.com/organizer/example-motorsports, votre ID d'organisateur est example-motorsports.

Trouver les ID d'événements

Les ID d'événements apparaissent dans les URL des événements et dans le tableau de bord de votre organisateur.

Depuis l'URL de l'événement

Accédez à n'importe lequel de vos événements sur SidewaysData
Regardez l'URL — elle contiendra l'ID de l'événement après /events/

Par exemple : sidewaysdata.com/events/12345 signifie que l'ID de l'événement est 12345.

Depuis votre tableau de bord

Connectez-vous à SidewaysData
Accédez à votre page Événements
L'ID de l'événement est affiché dans la liste des événements ou visible dans les liens

Utiliser les outils de développement du navigateur

Si vous avez de la difficulté à trouver les ID :

Faites un clic droit sur la page de votre organisateur ou de l'événement
Sélectionnez « Inspecter » ou « Inspecter l'élément »
Recherchez des attributs de données ou des URL contenant l'ID

Besoin d'aide ?

Si vous ne parvenez pas à localiser vos ID, contactez le support de SidewaysData et nous vous aiderons à les trouver.

Aperçu du widget Trouver des événements

Le widget Find Events affiche une liste d'événements filtrable sur votre site Web. Les visiteurs peuvent parcourir les événements à venir, filtrer selon divers critères et cliquer pour s'inscrire ou voir les détails sur SidewaysData.

Ce qu'il affiche

Cartes d'événements avec le nom, la date, le lieu et le statut d'inscription
Menus déroulants de filtrage pour l'année, le type d'événement, le statut d'inscription et les opportunités de bénévolat
Liens directs vers les pages d'événements sur SidewaysData
Mise en page réactive qui s'adapte à toutes les tailles d'écran

Code d'intégration de base

Ajoutez cette balise script à votre site Web à l'endroit où vous voulez que les événements s'affichent :

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

Remplacez your-organizer-id par votre ID d'organisateur réel (voir Obtenir vos ID).

Comportement par défaut

Sans configuration supplémentaire, le widget :

Affichera tous les événements des organisateurs spécifiés
Affichera des menus déroulants de filtrage pour l'année, le type d'événement, le statut d'inscription et les bénévoles
Trier les événements par date (du plus ancien au plus récent)
Inclura les événements de tous les statuts d'inscription

Comment ça fonctionne

Le widget crée une iframe responsive qui charge du contenu depuis SidewaysData. L'iframe ajuste automatiquement sa hauteur pour s'adapter au contenu, donc il n'y a pas de défilement à l'intérieur du widget lui-même. Les événements restent synchronisés avec votre compte SidewaysData — toute modification que vous effectuez est reflétée automatiquement.

Prochaines étapes

Configurer le widget avec des attributs optionnels
Voir exemples courants pour différents cas d'utilisation

Options de configuration

Personnalisez le widget Find Events en utilisant des attributs de données sur la balise script. Tous les attributs sont optionnels sauf ceux servant à indiquer quels événements afficher.

Spécifier les événements

Vous devez inclure au moins un de ces attributs pour indiquer quels événements afficher :

data-organizer-ids

Afficher tous les événements de certains organisateurs. Utilisez des valeurs séparées par des virgules pour plusieurs organisateurs.

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

Plusieurs organisateurs :

<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

Afficher uniquement des événements spécifiques par leurs identifiants. Utilisez des valeurs séparées par des virgules pour plusieurs événements.

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

Options de filtrage

data-event-status

Filtrer les événements par statut d'inscription. Valeurs : open, closed ou any.

data-event-status="open"

data-default-reg-status

Définissez la valeur par défaut du menu déroulant du statut d'inscription. Cela pré-sélectionne une option de filtrage tout en permettant aux visiteurs de la modifier.

data-default-reg-status="open"

data-limit-organizer-event-types

Lorsqu'il est défini sur true, n'affichez que les types d'événements effectivement utilisés par l'organisateur, plutôt que tous les types disponibles dans le menu déroulant.

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

Lorsqu'il est défini sur true, masque le menu déroulant de filtrage des opportunités de bénévolat.

data-hide-volunteers-dropdown="true"

Options d'affichage

data-is-results-mode

Lorsqu'il est défini sur true, affiche les événements pour lesquels des résultats sont disponibles au lieu des événements à venir. Utile pour une page « Résultats passés ».

data-is-results-mode="true"

data-newest-first

Lorsqu'il est défini sur true, trie les événements du plus récent au plus ancien plutôt que l'ordre par défaut (du plus ancien au plus récent).

data-newest-first="true"

Options avancées

data-origin

Utilisez un domaine personnalisé à la place du domaine par défaut sidewaysdata.com. Nécessaire uniquement si vous avez configuré un domaine personnalisé avec SidewaysData.

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

Exemple complet

Voici un exemple utilisant plusieurs options de configuration :

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

Cela affiche les événements à inscription ouverte de "example-motorsports", n'affiche que les types d'événements pertinents dans le filtre, masque le menu déroulant des bénévoles et trie les événements du plus récent au plus ancien.

Exemples

Configurations courantes pour le widget Find Events afin de correspondre à différents cas d'utilisation.

Afficher tous vos événements

Afficher tous les événements de votre organisation avec toutes les options de filtrage disponibles:

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

Afficher seulement les inscriptions ouvertes

Afficher les événements qui acceptent actuellement des inscriptions:

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

Afficher les événements ayant des résultats

Créer une page "Past Results" affichant les événements qui ont des résultats de chronométrage:

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

Afficher des événements spécifiques

Afficher uniquement des événements particuliers, comme une série de championnats:

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

Afficher des événements de plusieurs organisateurs

Afficher des événements de plusieurs organisations sur une page régionale ou une page 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>

Vue simplifiée (filtres minimaux)

Afficher les événements avec une interface plus épurée en masquant les filtres peu utilisés:

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

Une configuration courante pour la page d'accueil de votre 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>

Filtre par défaut : inscriptions ouvertes

Afficher tous les événements mais faire en sorte que le filtre d'inscription soit par défaut sur "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>

This differs from data-event-status="open" because visitors can still change the filter to see closed events.

Aperçu du widget Résultats en direct

Le widget Résultats en direct affiche les résultats de course en temps réel sur votre site web. Les spectateurs peuvent suivre les événements en direct et consulter les résultats finaux par la suite — le tout sans quitter votre site.

Ce qu'il affiche

Résultats de chronométrage en temps réel pendant les événements en direct
Indicateur « Résultats en direct » ou « Résultats finaux » selon le moment de l'événement
Chat en direct intégré propulsé par FastComments pour l'interaction des spectateurs
Mises à jour automatiques lorsque de nouveaux temps sont enregistrés

Code d'intégration de base

Ajoutez cette balise script à votre site web à l'endroit où vous souhaitez afficher les résultats :

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

Remplacez your-organizer-id par votre ID d'organisateur réel (voir Obtenir vos ID).

Remarque : Le widget Résultats en direct nécessite l'attribut data-organizer-id. Le widget ne se chargera pas sans celui-ci.

Comment ça fonctionne

Le widget crée une iframe responsive qui se connecte au système de chronométrage en direct de SidewaysData. Pendant un événement actif :

Les résultats se mettent à jour en temps réel au fur et à mesure que les temps sont enregistrés
Le widget affiche « Résultats en direct » pour indiquer que le chronométrage est en cours
Le chat en direct permet aux spectateurs de discuter de l'événement

Après la fin de l'événement :

Les résultats restent disponibles pour consultation
Le widget passe à l'indicateur « Résultats finaux »
L'historique du chat est conservé

Cas d'utilisation

Jour de l'événement - Intégrez sur votre page d'accueil pour que les spectateurs puissent suivre en direct
Page de résultats dédiée - Créez une page de résultats permanente sur votre site
Page d'atterrissage pour les réseaux sociaux - Partagez un lien vers votre page de résultats pendant les événements

Étapes suivantes

Configurer le widget avec des attributs optionnels

Configuration

Le widget Live Results a une configuration minimale—seul votre ID d'organisateur est requis.

Required Attribute

data-organizer-id

Votre ID d'organisateur SidewaysData. Ceci est requis pour que le widget fonctionne.

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

Voir Obtention de vos ID pour obtenir de l'aide pour trouver votre ID d'organisateur.

Optional Attribute

data-origin

Utilisez un domaine personnalisé au lieu du domaine par défaut sidewaysdata.com. Nécessaire uniquement si vous avez configuré un domaine personnalisé avec 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

A typical Live Results embed:

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

Error Handling

If the data-organizer-id attribute is missing, the widget will log an error to the browser console and not render. Make sure to include this required attribute.

Placement Tips

Place the widget in a container with adequate width (at least 320px recommended)
The widget automatically adjusts its height to fit the content
Consider placing above the fold on event days for maximum visibility
Works well as the main content of a dedicated "Live Results" page

Personnalisation des widgets

Les widgets SidewaysData sont intégrés en tant qu'iframes, ce qui limite la modification directe du CSS. Cependant, vous pouvez contrôler la façon dont les widgets s'ajustent à la mise en page de votre site.

Container Styling

Enveloppez le widget dans un élément conteneur pour contrôler son positionnement et sa largeur maximale :

<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

Les widgets s'étendent automatiquement à 100% de la largeur de leur conteneur. Contrôlez la largeur en stylisant l'élément parent :

<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 hauteur du widget s'ajuste automatiquement en fonction du contenu. L'iframe utilise postMessage pour communiquer la hauteur requise avec votre page, ce qui élimine les barres de défilement à l'intérieur du widget.

Responsive Design

Les widgets sont conçus pour être adaptatifs et fonctionner correctement sur les appareils mobiles. Ils s'ajustent automatiquement aux écrans plus étroits. Pour de meilleurs résultats :

Utilisez des largeurs de conteneur basées sur un pourcentage ou flexibles
Évitez de définir des largeurs en pixels fixes qui pourraient entraîner un défilement horizontal sur mobile
Testez sur différentes tailles d'écran

Background Compatibility

Les widgets ont un arrière-plan clair et sont conçus pour bien s'afficher sur des pages de couleur claire. Si votre site a un arrière-plan foncé, envisagez de placer le widget dans un conteneur de couleur claire :

<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

Parce que les widgets utilisent des iframes, vous ne pouvez pas styliser directement le contenu à l'intérieur (comme les polices, les couleurs ou les styles de boutons). Le contenu du widget utilise le style standard de SidewaysData pour garantir une apparence cohérente et professionnelle.

Si vous avez des exigences de marque spécifiques, contactez le support SidewaysData pour discuter des options.

Adding Margins and Spacing

Ajoutez de l'espace autour du widget en utilisant du CSS standard sur le conteneur :

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

Dépannage

Problèmes courants et solutions lors de l'utilisation des widgets SidewaysData.

Vérifiez l'URL du script

Assurez-vous que l'attribut src du script pointe vers la bonne 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

Vérifiez les attributs requis

Find Events widget nécessite soit data-organizer-ids soit data-event-ids
Live Results widget nécessite data-organizer-id

Vérifiez les erreurs JavaScript

Ouvrez la console de développement de votre navigateur (généralement F12 ou clic droit → Inspecter → Console) et recherchez les messages d'erreur. Le widget Live Results affiche une erreur si data-organizer-id est manquant.

Vérifiez que vos ID sont corrects

Vérifiez que les ID d'organisateur et d'événement correspondent à ceux affichés sur SidewaysData. Voir Obtention de vos ID.

Mauvais événements affichés

Vérifiez l'orthographe de l'ID de l'organisateur

Les ID d'organisateur sont sensibles à la casse. Assurez-vous que l'ID correspond exactement à celui qui apparaît dans l'URL SidewaysData.

Vérifiez les paramètres de filtre

Si vous utilisez data-event-status="open" mais ne voyez aucun événement, il se peut que vous n'ayez aucun événement avec des inscriptions ouvertes. Essayez de supprimer ce filtre pour voir tous les événements.

Vérifiez le mode des résultats

Si data-is-results-mode="true" est défini, le widget affiche les événements avec résultats, pas les événements à venir. Supprimez cet attribut pour voir les événements à venir.

Le widget doit ajuster automatiquement sa hauteur. Si le contenu semble coupé :

Vérifiez qu'aucun élément parent n'a overflow: hidden défini
Assurez-vous qu'aucun CSS ne définit une hauteur fixe sur l'iframe
Vérifiez que JavaScript est activé dans votre navigateur

Espace vide excessif

S'il y a trop d'espace vide sous le widget, l'ajustement automatique de la hauteur devrait corriger cela. Sinon, le widget peut se charger mais ne pas avoir d'événements à afficher.

Le contenu ne se met pas à jour

Les événements ne reflètent pas les changements récents

Les widgets chargent du contenu frais depuis SidewaysData à chaque chargement de page. Si les modifications n'apparaissent pas :

Effectuez un rechargement forcé de la page (Ctrl+F5 ou Cmd+Shift+R)
Videz le cache de votre navigateur
Attendez quelques minutes — certaines modifications peuvent prendre un moment à se propager

Les résultats en direct ne se mettent pas à jour

Pendant le chronométrage en direct, les résultats devraient se mettre à jour automatiquement. Si ce n'est pas le cas :

Vérifiez que l'événement est activement chronométré sur SidewaysData
Actualisez la page
Vérifiez votre connexion Internet

Problèmes avec les créateurs de sites

WordPress

Si vous utilisez WordPress, il se peut que vous deviez :

Utiliser un bloc ou widget "HTML personnalisé"
Désactiver temporairement les plugins bloquant les scripts
Vérifier si votre thème supprime les balises script du contenu

Squarespace

Utilisez un élément "Code Block" ou "Embed" et collez la balise script directement.

Wix

Utilisez la fonctionnalité "HTML iframe" ou "Custom Element" pour ajouter le script.

Problèmes d'origine croisée

Les widgets chargent du contenu depuis les serveurs de SidewaysData. Si vous voyez des erreurs d'origine croisée :

Assurez-vous d'utiliser https:// (et non http://) pour l'URL du script
Si vous utilisez data-origin, vérifiez que le domaine est correctement configuré

Toujours des problèmes?

Si vous avez essayé ces solutions et que le widget ne fonctionne toujours pas correctement, contacter le support SidewaysData avec :

L'URL de la page où vous intégrez le widget
La balise script complète que vous utilisez
Tous les messages d'erreur de la console du navigateur
Une description de ce que vous attendez et de ce qui se passe

Guide précédent: Notifications Guide suivant: Awards & Stats

Langue 🇨🇦 Français (Canada)

Premiers pas

Widget Trouver des événements

Widget Résultats en direct

Personnalisation

Aperçu

Pourquoi utiliser les widgets ?

Widgets disponibles

Widget Trouver des événements

Widget Résultats en direct

Pour commencer

Exigences

Obtention de vos ID

Trouver l'ID de votre organisateur

Trouver les ID d'événements

Depuis l'URL de l'événement

Depuis votre tableau de bord

Utiliser les outils de développement du navigateur

Besoin d'aide ?

Aperçu du widget Trouver des événements

Ce qu'il affiche

Code d'intégration de base

Comportement par défaut

Comment ça fonctionne

Prochaines étapes

Options de configuration

Spécifier les événements

data-organizer-ids

data-event-ids

Options de filtrage

data-event-status

data-default-reg-status

data-limit-organizer-event-types

data-hide-volunteers-dropdown

Options d'affichage

data-is-results-mode

data-newest-first

Options avancées

data-origin

Exemple complet

Exemples

Afficher tous vos événements

Afficher seulement les inscriptions ouvertes

Afficher les événements ayant des résultats

Afficher des événements spécifiques

Afficher des événements de plusieurs organisateurs

Vue simplifiée (filtres minimaux)

Widget d'accueil (événements ouverts, les plus récents en premier)

Filtre par défaut : inscriptions ouvertes

Aperçu du widget Résultats en direct

Ce qu'il affiche

Code d'intégration de base

Comment ça fonctionne

Cas d'utilisation

Étapes suivantes

Configuration

Required Attribute

data-organizer-id

Optional Attribute

data-origin

Complete Example

Error Handling

Placement Tips

Personnalisation des widgets

Container Styling

Width Control

Height Behavior

Responsive Design

Background Compatibility

Iframe Styling Limitations

Adding Margins and Spacing

Dépannage

Widget introuvable

Vérifiez l'URL du script

Vérifiez les attributs requis

Vérifiez les erreurs JavaScript

Vérifiez que vos ID sont corrects

Mauvais événements affichés

Vérifiez l'orthographe de l'ID de l'organisateur

Vérifiez les paramètres de filtre