Documentation
Tout ce qu’il faut savoir pour mettre les widgets sur ton site, les adapter et les garder en marche.
Pour commencer
Mets la ligne du script une fois sur la page, puis un élément par widget. Le configurateur écrit le code pour toi.
<script src="https://widgets.ppong.be/v1/ppong.js" defer></script>
<ppong-club-week club="OVL095" interactive="week"></ppong-club-week>
<ppong-standings division="9514" highlight="OVL095"></ppong-standings>Pour chaque widget
| Attribut | Signification |
|---|---|
fed | kbttb (AFTT et VTTL) ou sporta. Par défaut kbttb. |
lang | nl, fr ou en. Par défaut la langue de ta page. |
theme | ppong-light, ppong-dark, classic, soft, night ou minimal. Sans : clair ou sombre selon le visiteur. |
density | compact pour les endroits étroits. |
interactive | Les réglages que le visiteur peut choisir, p. ex. week,team. |
title | Un titre personnel. |
sheets | off : pas de feuille de match au clic sur une rencontre. |
Par widget
<ppong-standings> | Classement. Le classement d’une division, après la dernière journée ou une journée au choix, avec ton équipe mise en évidence. division · week · system · highlight · columns="played,won,lost,draw,forfeits,games,sets,points" · stats-links · interactive="week" |
<ppong-matches> | Rencontres. Les rencontres d’une équipe, d’une division ou de tout le club, avec résultats et feuilles de match. team (+ interactive="team") | division (+ week, highlight, interactive="week") | club (+ from, to) · show="all|upcoming|played" · limit · venue |
<ppong-strength> | Liste de force. La liste de force du club par catégorie, avec les récréants clairement indiqués. club · category · recreants="mark|hide|only" · index · stats-links · interactive="category" · categories="key,key" |
<ppong-club-week> | Semaine du club. Toutes les rencontres de toutes les équipes du club sur une semaine, avec la catégorie et la division de chaque équipe, et les résultats dès qu’ils arrivent. club · date · date-format="short|long" · venue · interactive="week" |
<ppong-tournaments> | Tournois. Les prochains tournois de ta province ou de tout le pays, avec leurs séries et la date limite d’inscription. level="7" (or "7,15") · limit · series · date-format="short|long" · interactive="level" |
<ppong-match-sheet> | Feuille de match. Compositions, matchs et sets d’une rencontre. S’ouvre aussi depuis chaque rencontre des autres widgets. match · stats-links |
Style : variables CSS
Chaque variable vaut pour tous les widgets en dessous. Mets-les sur :root pour tout ton site, ou sur un seul élément.
:root {
--ppong-accent: #c8102e;
--ppong-head-bg: #c8102e;
--ppong-head-text: #ffffff;
--ppong-font: inherit;
}--ppong-bg | Fond |
--ppong-surface | Cartes |
--ppong-sunken | Ton équipe, listes de choix |
--ppong-stripe | Une ligne sur deux |
--ppong-line | Lignes |
--ppong-line-strong | Lignes fortes |
--ppong-text | Texte |
--ppong-muted | Texte secondaire |
--ppong-head-bg | En-tête des tableaux |
--ppong-head-text | Texte de l’en-tête |
--ppong-accent | Accent (ton club) |
--ppong-on-accent | Texte sur l’accent |
--ppong-link | Liens |
--ppong-win | Victoire |
--ppong-on-win | Texte sur la victoire |
--ppong-loss | Défaite |
--ppong-font | Police |
--ppong-font-num | Police des chiffres |
--ppong-size | Taille du texte |
--ppong-title-size | Taille du titre |
--ppong-radius | Arrondi |
--ppong-border | Bordure du widget |
--ppong-pad | Espace intérieur |
Pour aller plus loin, ::part(widget), ::part(notice) et ::part(footer) permettent de styler le cadre, le message et le pied.
Sans scripts : l’iframe
Si ton créateur de site n’accepte pas les scripts (certaines pages Wix ou Google Sites), utilise une iframe. Les mêmes attributs vont dans l’URL. Une iframe ne peut pas adapter sa hauteur elle-même : donne une hauteur suffisante.
<iframe src="https://widgets.ppong.be/embed/standings?division=9514&highlight=OVL095"
title="ppong widgets" style="width: 100%; height: 560px; border: 0;"></iframe>Ton site a une Content-Security-Policy ?
Autorise alors widgets.ppong.be pour script-src, connect-src et font-src. Les thèmes ppong mettent les polices dans l’en-tête de ta page ; avec un style-src strict, une police standard est utilisée.
Enregistrement et limites
Un site qui utilise les widgets pour la première fois fonctionne tout de suite, pendant 30 jours, avec un message sous le widget. Enregistre ton site pour retirer ce message. En développement local (localhost, une adresse IP, .local, .test), tu ne comptes pas comme site et tu vois l’étiquette développement.
Chaque site a une limite large par minute et par jour. Un usage normal ne l’atteint jamais ; pour des données en masse, demande plutôt une clé pour l’API ppong.
Vie privée
Les widgets ne placent pas de cookies et ne suivent pas tes visiteurs. Nous comptons par site combien de widgets sont demandés et sur quelles pages ils se trouvent (sans paramètres). Nous ne gardons pas les adresses IP des visiteurs.
Les données viennent de TabT, la base de données de l’AFTT, de la VTTL et de Sporta, via l’API ppong.