Embeds
Parts of fepli you place on your own pages. They load current data from your fepli and take on the look of your site.
How it works
- 1Load the script onceIn the head of your page or template, with your public key. It registers all embeds.
- 2Place an elementWherever the offers should appear. Attributes choose the edition and filters.
- 3Match your designCSS custom properties set colour, font and corners.
<!-- once, in the <head> -->
<script type="module" src="https://example.fepli.eu/embed.js" data-key="pk_9f3a2c71e4b05d18a6c2e7f0"></script>
<!-- where the offers should appear -->
<fepli-offers edition="herbstferien-2026"></fepli-offers>All embeds
- <fepli-offers>Offer listThe published offers of an edition, with filters for category and age.
- <fepli-offer>Offer detailOne offer with its dates, fees, places and the apply button.
- <fepli-offer-card>Offer cardOne offer as a card for a news item: picture, date, fee and the apply button.
- <fepli-calendar>Edition calendarAll dates of an edition, as a month or week view.
The embeds show the published offers of editions that are online, as the
REST API returns them without a token. They read them with a public key and
need the app API switched on, not public access. They are off until an
organisation switches them on, with the app Website einbinden under
Einstellungen → App-Store; until then embed.js answers 404.
To read or change anything else, use the REST API.
The embeds have no data source of their own. They call the REST API from the visitor's browser, GET /offers and GET /offers/{uuid} with places=false, and the places of an edition once per page from GET /offer-places, with the public key of your website. Where the places cannot be read, the embeds read the offers with their places. You can make the same calls yourself; see Public keys.
Public keys
An embed only shows something with a public key. The key goes on the script tag, as data-key, once per page:
<script type="module" src="https://example.fepli.eu/embed.js" data-key="pk_9f3a2c71e4b05d18a6c2e7f0"></script>
A key is not a secret. It stands in the source of your page, and it reads only what is public anyway. What it does is name who embeds: each key lists the websites it works on, and can be revoked without touching the others.
- Where to get one. In fepli under Einstellungen → Integrationen → API → Öffentliche Schlüssel, once the embeds are switched on. The code that „Einbinden“ at an edition or an offer hands out already carries the key you pick there.
- Allowed websites. A key names hosts. A host covers its subdomains:
elmsbrueck.dealso works onwww.elmsbrueck.de. A key works on the websites it names and on no other, so every key names at least one. - Without a key, with a revoked one, or on a website the key does not name, the embed says that the offers could not be loaded, and the browser console says why.
The embeds call the API under /api on the host the script was loaded from. Where an organisation's API has a domain of its own, the script tag names it as data-api; the code under „Einbinden“ then carries that attribute too.
The website check relies on the Origin header a browser sends. It decides which pages may show the embeds, and it is not access control: a script outside a browser can send any origin.
Applying
The embeds show offers; a family applies on fepli. Every „Anmelden“ button leads to the offer's page on your fepli, where signing in, the application form and the payment work as usual. Nothing of that is framed into your website.
To link to the application yourself, from a newsletter or a poster, use the address of that page. fepli shows it under „Einbinden“ at the offer, as „Link zur Anmeldung“.