SidewaysDataSidewaysData
Menu Icon

Langue 🇫🇷 Français (France)
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇺🇸 English (US) 🇨🇦 Français (Canada) 🇫🇷 Français (France) 🇩🇪 Deutsch 🇨🇾 Ελληνικά (Κύπρος) 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇺🇦 Русский (Украина) 🇧🇦 Српски (БиХ) 🇷🇸 Srpski (Latinica) 🇲🇪 Српски (Црна Гора) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

Premiers pas

Aperçu
Obtention de vos identifiants

Widget « Trouver des événements »

Aperçu du widget « Trouver des événements »
Options de configuration
Exemples

Widget « Résultats en direct »

Aperçu du widget « Résultats en direct »
Configuration

Personnalisation

Personnalisation des widgets
Dépannage

Aperçu Internal Link

É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 seule ligne de code - Collez simplement une balise script dans votre site
  • Toujours à jour - Les événements et résultats se synchronisent automatiquement depuis SidewaysData
  • Aucune maintenance - Nous gérons toutes les mises à jour et améliorations
  • Apparence professionnelle - Design soigné et réactif qui fonctionne sur tous les appareils
  • Gratuit - Inclus avec SidewaysData sans coût supplémentaire

Widgets disponibles

Widget Trouver des événements

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

Widget Résultats en direct

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 timing de l'événement.

En savoir plus sur le widget Résultats en direct

Pour commencer

  1. Trouvez votre organizer ID ou vos event IDs (voir Obtention de vos identifiants)
  2. Choisissez le widget dont vous avez besoin
  3. Copiez le code d'intégration et collez-le dans votre site
  4. Personnalisez avec des attributs de configuration optionnels

Exigences

Les widgets fonctionnent sur tout site web prenant en charge JavaScript. Cela inclut WordPress, Squarespace, Wix, sites HTML personnalisés, et la plupart des créateurs de sites. Vous devrez avoir la possibilité d'ajouter du HTML personnalisé ou des balises script à vos pages.

Obtention de vos identifiants Internal Link

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

Trouver l'identifiant de votre organisateur

Votre identifiant d'organisateur apparaît dans l'URL lorsque vous consultez votre page d'organisateur sur SidewaysData.

  1. Allez sur sidewaysdata.com
  2. Accédez à votre page d'organisateur
  3. Regardez l'URL — elle aura le format : sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

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

Trouver les identifiants d'événement

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

Depuis l'URL de l'événement

  1. Accédez à l'un de vos événements sur SidewaysData
  2. Regardez l'URL — elle contiendra l'identifiant de l'événement après /events/

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

Depuis votre tableau de bord

  1. Connectez-vous à SidewaysData
  2. Allez sur votre page des événements
  3. L'identifiant de l'événement est affiché dans la liste des événements ou visible dans les liens

Utilisation des outils de développement du navigateur

Si vous avez du mal à trouver les identifiants :

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

Besoin d'aide ?

Si vous ne trouvez pas vos identifiants, contactez l'assistance de SidewaysData et nous vous aiderons à les trouver.

Aperçu du widget « Trouver des événements » Internal Link

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

Ce qu'il affiche

  • Cartes d'événement avec nom, date, lieu et 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 responsive 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 apparaissent :

<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 identifiants).

Comportement par défaut

Sans configuration supplémentaire, le widget :

  • Affiche tous les événements des organisateurs spécifiés
  • Affiche des 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
  • Trie les événements par date (du plus ancien au plus récent)
  • Inclut les événements quel que soit le statut d'inscription

Comment ça fonctionne

Le widget crée un iframe responsive qui charge du contenu depuis SidewaysData. L'iframe ajuste automatiquement sa hauteur pour s'adapter au contenu, de sorte qu'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.

Étapes suivantes

Options de configuration Internal Link

Personnalisez le widget Find Events en utilisant des attributs data sur la balise script. Tous les attributs sont optionnels sauf celui permettant de spécifier 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 d'organisateurs spécifiques. 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>

Organisateurs multiples :

<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 IDs. 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éfinir la valeur par défaut du menu déroulant du statut d'inscription. Cela pré-sélectionne une option de filtre mais permet toujours aux visiteurs de la modifier.

data-default-reg-status="open"

data-limit-organizer-event-types

Lorsqu'il est défini sur true, n'afficher que les types d'événements que l'organisateur utilise réellement, plutôt que tous les types disponibles dans le menu déroulant.

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

data-hide-volunteers-dropdown

Lorsqu'il est défini sur true, masquer le menu déroulant 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, afficher 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, trier les événements du plus récent au plus ancien au lieu de 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é au lieu 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 Internal Link

Configurations courantes pour le widget Find Events afin de couvrir 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 uniquement 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 avec résultats

Créer une page « Résultats passés » affichant les événements disposant de 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 certains événements, par exemple 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 les événements de plusieurs organisations sur une page régionale 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>

Vue simplifiée (filtres minimaux)

Afficher les événements avec une interface épurée en masquant les filtres moins 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>

Widget pour la page d'accueil (événements ouverts, les plus récents d'abord)

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

Définir par défaut le filtre d'inscription sur ouvert

Afficher tous les événements mais définir par défaut le filtre d'inscription 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>

Cela diffère de data-event-status="open" car les visiteurs peuvent toujours changer le filtre pour voir les événements fermés.

Aperçu du widget « Résultats en direct » Internal Link

Le widget Résultats en direct affiche les résultats de course en temps réel sur votre site web. Les spectateurs peuvent suivre le déroulement des événements et consulter les résultats définitifs ensuite — 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 définitifs » selon le timing de l'événement
  • Chat en direct intégré propulsé par FastComments pour l'interaction des spectateurs
  • Mises à jour automatiques au fur et à mesure que de nouveaux temps sont enregistrés

Code d'intégration de base

Ajoutez cette balise script à votre site là où vous voulez que les résultats apparaissent :

<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 identifiants).

Remarque : Le widget Résultats en direct requiert l'attribut data-organizer-id. Le widget ne se chargera pas sans cet attribut.

Comment cela 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 bascule sur l'indicateur « Résultats définitifs »
  • 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 web
  • Page de destination pour les réseaux sociaux - Partagez un lien vers votre page de résultats pendant les événements

Étapes suivantes

Configuration Internal Link

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

Attribut requis

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>

Consultez Obtenir vos IDs pour obtenir de l'aide pour trouver votre ID d'organisateur.

Attribut optionnel

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>

Exemple complet

Une intégration Live Results typique :

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

Gestion des erreurs

Si l'attribut data-organizer-id est absent, le widget enregistrera une erreur dans la console du navigateur et ne s'affichera pas. Veillez à inclure cet attribut requis.

Conseils de placement

  • Placez le widget dans un conteneur d'une largeur adéquate (au moins 320px recommandé)
  • Le widget ajuste automatiquement sa hauteur pour s'adapter au contenu
  • Envisagez de le placer au-dessus du pli les jours d'événement pour une visibilité maximale
  • Convient bien comme contenu principal d'une page dédiée "Live Results"

Personnalisation des widgets Internal Link

Les widgets SidewaysData sont intégrés sous forme d'iframes, ce qui limite le style CSS direct. Cependant, vous pouvez contrôler la façon dont les widgets s'intègrent dans la mise en page de votre page.

Container Styling

Enveloppez le widget dans un élément conteneur pour contrôler son emplacement 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 stylant 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 à votre page, éliminant les barres de défilement à l'intérieur du widget.

Responsive Design

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

  • Utilisez des largeurs de conteneur en pourcentage ou flexibles
  • Évitez de définir des largeurs fixes en pixels qui pourraient provoquer 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 fonctionner sur des pages de couleur claire. Si votre site a un arrière-plan sombre, 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 le style des 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 Internal Link

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

Widget n'apparaît pas

Vérifier l'URL du script

Assurez-vous que l'attribut src du script pointe vers l'URL correcte :

  • 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érifier les attributs requis

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

Vérifier 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 signale une erreur si data-organizer-id est manquant.

Vérifiez que vos IDs sont corrects

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

Mauvais événements affichés

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

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

Vérifier les paramètres de filtrage

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

Vérifier le mode résultats

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

Problèmes de hauteur du widget

Le widget apparaît coupé

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

  1. Vérifiez qu'aucun élément parent n'a overflow: hidden défini
  2. Assurez-vous qu'aucun CSS ne définit une hauteur fixe sur l'iframe
  3. 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 s'en charger. Sinon, le widget peut être en train de se charger mais n'avoir aucun événement à afficher.

Contenu non mis à jour

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

Les widgets chargent du contenu récent depuis SidewaysData à chaque chargement de page. Si les changements n'apparaissent pas :

  1. Forcer le rafraîchissement de la page (Ctrl+F5 ou Cmd+Shift+R)
  2. Videz le cache de votre navigateur
  3. Attendez quelques minutes — certains changements peuvent prendre un moment pour se propager

Résultats en direct non mis à jour

Pendant un chronométrage en direct, les résultats devraient se mettre à jour automatiquement. S'ils ne le font pas :

  1. Vérifiez que l'événement est activement chronométré sur SidewaysData
  2. Rafraîchissez la page
  3. Vérifiez votre connexion Internet

Problèmes liés aux créateurs de sites

WordPress

Si vous utilisez WordPress, vous devrez peut-être :

  • Utiliser un bloc ou widget "Custom HTML"
  • Désactiver temporairement tout plugin 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 :

  1. Assurez-vous d'utiliser https:// (et non http://) pour l'URL du script
  2. 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, contactez le support SidewaysData en fournissant :

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