Documentatie
Alles wat je moet weten om de widgets op je site te zetten, aan te passen en draaiende te houden.
Zo begin je
Zet de scriptregel één keer op de pagina, en daarna een element per widget. De configurator schrijft de code voor je.
<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>Voor elke widget
| Attribuut | Betekenis |
|---|---|
fed | kbttb (VTTL en AFTT) of sporta. Standaard kbttb. |
lang | nl, fr of en. Standaard de taal van je pagina. |
theme | ppong-light, ppong-dark, classic, soft, night of minimal. Zonder: licht of donker zoals de bezoeker. |
density | compact voor krappe plaatsen. |
interactive | Welke instellingen de bezoeker zelf kan kiezen, bv. week,team. |
title | Een eigen titel. |
sheets | off: geen matchblad bij een klik op een wedstrijd. |
Per widget
<ppong-standings> | Klassement. De stand van een reeks, na de laatste speeldag of na een speeldag naar keuze, met je eigen ploeg gemarkeerd. division · week · system · highlight · columns="played,won,lost,draw,forfeits,games,sets,points" · stats-links · interactive="week" |
<ppong-matches> | Wedstrijden. De wedstrijden van een ploeg, een reeks of de hele club, met uitslagen en matchbladen. team (+ interactive="team") | division (+ week, highlight, interactive="week") | club (+ from, to) · show="all|upcoming|played" · limit · venue |
<ppong-strength> | Sterktelijst. De sterktelijst van de club per categorie, met recreanten duidelijk gemarkeerd. club · category · recreants="mark|hide|only" · index · stats-links · interactive="category" · categories="key,key" |
<ppong-club-week> | Clubweek. Alle wedstrijden van alle ploegen van de club in één week, met per ploeg de categorie en de reeks, en de uitslagen zodra ze binnen zijn. club · date · date-format="short|long" · venue · interactive="week" |
<ppong-tournaments> | Tornooien. De komende tornooien in je provincie of in heel het land, met hun reeksen en tot wanneer je kan inschrijven. level="7" (or "7,15") · limit · series · date-format="short|long" · interactive="level" |
<ppong-match-sheet> | Matchblad. Opstellingen, partijen en sets van een wedstrijd. Opent ook vanuit elke wedstrijd in de andere widgets. match · stats-links |
Stijl: CSS-variabelen
Elke variabele werkt op alle widgets eronder. Zet ze op :root voor je hele site, of op één element.
:root {
--ppong-accent: #c8102e;
--ppong-head-bg: #c8102e;
--ppong-head-text: #ffffff;
--ppong-font: inherit;
}--ppong-bg | Achtergrond |
--ppong-surface | Kaarten |
--ppong-sunken | Eigen ploeg, keuzelijsten |
--ppong-stripe | Streep om de andere rij |
--ppong-line | Lijnen |
--ppong-line-strong | Sterke lijnen |
--ppong-text | Tekst |
--ppong-muted | Secundaire tekst |
--ppong-head-bg | Kop van tabellen |
--ppong-head-text | Tekst in de kop |
--ppong-accent | Accent (eigen club) |
--ppong-on-accent | Tekst op accent |
--ppong-link | Links |
--ppong-win | Winst |
--ppong-on-win | Tekst op winst |
--ppong-loss | Verlies |
--ppong-font | Lettertype |
--ppong-font-num | Lettertype voor cijfers |
--ppong-size | Tekstgrootte |
--ppong-title-size | Grootte van de titel |
--ppong-radius | Afronding |
--ppong-border | Rand rond de widget |
--ppong-pad | Ruimte binnenin |
Wie verder wil, kan met ::part(widget), ::part(notice) en ::part(footer) het kader, de melding en de voettekst stijlen.
Zonder scripts: de iframe
Laat je sitebouwer geen scripts toe (bv. sommige Wix- of Google Sites-pagina’s), gebruik dan een iframe. Dezelfde attributen gaan in de URL. Een iframe kan zijn hoogte niet zelf aanpassen: geef een hoogte die past.
<iframe src="https://widgets.ppong.be/embed/standings?division=9514&highlight=OVL095"
title="ppong widgets" style="width: 100%; height: 560px; border: 0;"></iframe>Je site heeft een Content-Security-Policy?
Laat dan widgets.ppong.be toe voor script-src, connect-src en font-src. De ppong-thema’s zetten de lettertypes in de kop van je pagina; met een strikte style-src val je terug op een standaardlettertype.
Registratie en limieten
Een site die de widgets voor het eerst gebruikt, werkt meteen, 30 dagen lang, met een melding onder de widget. Registreer je site om die melding weg te halen. Ontwikkel je lokaal (localhost, een IP-adres, .local, .test), dan tel je niet als site en zie je het label ontwikkeling.
Elke site heeft een ruime limiet per minuut en per dag. Normaal gebruik haalt die nooit; wie data in bulk nodig heeft, vraagt beter een sleutel voor de ppong API.
Privacy
De widgets zetten geen cookies en volgen je bezoekers niet. We tellen per site hoeveel widgets er opgevraagd worden en op welke pagina’s ze staan (zonder querystring). IP-adressen van bezoekers bewaren we niet.
De gegevens komen uit TabT, de databank van VTTL, AFTT en Sporta, via de ppong API.