Documentation

Everything you need to put the widgets on your site, adjust them and keep them running.

Getting started

Put the script line on the page once, then one element per widget. The configurator writes the code for you.

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

For every widget

Attribute	Meaning
`fed`	`kbttb` (VTTL and AFTT) or `sporta`. Default `kbttb`.
`lang`	`nl`, `fr` or `en`. Default: your page’s language.
`theme`	`ppong-light`, `ppong-dark`, `classic`, `soft`, `night` or `minimal`. Without: light or dark like the visitor.
`density`	`compact` for tight spaces.
`interactive`	Which settings the visitor can choose, e.g. `week,team`.
`title`	An own title.
`sheets`	`off`: no match sheet when a match is clicked.

Per widget

`<ppong-standings>`	Standings. The standings of a division, after the last week or a week of your choice, with your own team marked. division · week · system · highlight · columns="played,won,lost,draw,forfeits,games,sets,points" · stats-links · interactive="week"
`<ppong-matches>`	Matches. The matches of a team, a division or the whole club, with results and match sheets. team (+ interactive="team") \| division (+ week, highlight, interactive="week") \| club (+ from, to) · show="all\|upcoming\|played" · limit · venue
`<ppong-strength>`	Strength list. The club’s strength list per category, with recreational players clearly marked. club · category · recreants="mark\|hide\|only" · index · stats-links · interactive="category" · categories="key,key"
`<ppong-club-week>`	Club week. Every match of every team of the club in one week, with each team’s category and division, and the results as they come in. club · date · date-format="short\|long" · venue · interactive="week"
`<ppong-tournaments>`	Tournaments. The upcoming tournaments in your province or the whole country, with their series and the registration deadline. level="7" (or "7,15") · limit · series · date-format="short\|long" · interactive="level"
`<ppong-match-sheet>`	Match sheet. Line-ups, games and sets of a match. Also opens from every match in the other widgets. match · stats-links

Style: CSS variables

Every variable applies to all widgets below it. Set them on :root for your whole site, or on one element.

:root {
  --ppong-accent: #c8102e;
  --ppong-head-bg: #c8102e;
  --ppong-head-text: #ffffff;
  --ppong-font: inherit;
}

`--ppong-bg`	Background
`--ppong-surface`	Cards
`--ppong-sunken`	Own team, selectors
`--ppong-stripe`	Every other row
`--ppong-line`	Lines
`--ppong-line-strong`	Strong lines
`--ppong-text`	Text
`--ppong-muted`	Secondary text
`--ppong-head-bg`	Table header
`--ppong-head-text`	Header text
`--ppong-accent`	Accent (own club)
`--ppong-on-accent`	Text on accent
`--ppong-link`	Links
`--ppong-win`	Win
`--ppong-on-win`	Text on win
`--ppong-loss`	Loss
`--ppong-font`	Font
`--ppong-font-num`	Font for numbers
`--ppong-size`	Text size
`--ppong-title-size`	Title size
`--ppong-radius`	Rounding
`--ppong-border`	Border around the widget
`--ppong-pad`	Space inside

To go further, ::part(widget), ::part(notice) and ::part(footer) style the frame, the notice and the footer.

Without scripts: the iframe

If your site builder does not allow scripts (some Wix or Google Sites pages), use an iframe. The same attributes go into the URL. An iframe cannot adjust its own height: give it a height that fits.

<iframe src="https://widgets.ppong.be/embed/standings?division=9514&highlight=OVL095"
        title="ppong widgets" style="width: 100%; height: 560px; border: 0;"></iframe>

Your site has a Content-Security-Policy?

Then allow widgets.ppong.be for script-src, connect-src and font-src. The ppong themes put their fonts in your page’s head; with a strict style-src a standard font is used.

Registration and limits

A site that uses the widgets for the first time works at once, for 30 days, with a notice below the widget. Register your site to remove it. Developing locally (localhost, an IP address, .local, .test) does not count as a site; you see the development label.

Every site has a generous limit per minute and per day. Normal use never reaches it; if you need data in bulk, ask for a ppong API key instead.

Privacy

The widgets set no cookies and do not track your visitors. We count per site how many widgets are requested and on which pages they are (without query string). We do not keep visitors’ IP addresses.

The data comes from TabT, the database of VTTL, AFTT and Sporta, through the ppong API.