DevelopersEmbeds

Offer detail

<fepli-offer>

One offer with its dates, fees, places and the apply button.

Try it

Pick options – the preview and the snippet update.

Accent colour

Corners

stadt.example.fepli.eu/ferienprogrammPreview

Snippet

<script type="module" src="https://example.fepli.eu/embed.js" data-key="pk_9f3a2c71e4b05d18a6c2e7f0"></script>

<fepli-offer offer="0192a4f1-6e3b-7c85-b1d2-8f4e6a9c3b03"></fepli-offer>

Attributes

Name
offer
Type
string
Required
required
Description
The UUID of the offer.
Name
apply
Type
boolean
Default:
true
Description
Show the apply button. It leads to the offer's page on fepli, where the family signs in, applies and pays. An offer that takes no applications online shows how to apply instead, if the organiser said so.
Name
lang
Type
"de" | "en"
Description
Language of the embed. By default, the lang attribute of your page.

Theming

Set these CSS custom properties on the element or on any parent. Everything else follows your page.

Name
--fepli-accent
Type
color
Default:
oklch(0.60 0.22 29)
Description
Your brand colour, as entered: links, dates and the apply button. As in the fepli admin, a red brand colour turns the apply button ink, so it does not read as a warning, and one too light for white text is darkened until it reads.
Name
--fepli-radius
Type
length
Default:
8px
Description
Corners of buttons, fields and chips; cards and the dialog take one and a half times this, badges three quarters. 0 makes everything square.
Name
--fepli-shadow
Type
0 | 1
Default:
1
Description
Shadows: 1 the slight ones of the fepli website, 0 none; dialogs keep a little.
Name
--fepli-font
Type
font-family
Default:
inherit
Description
Font of the embed. By default, the font of your page.
Name
--fepli-text
Type
color
Default:
Mist 900
Description
Colour of the text on cards and in the dialog.
Name
--fepli-surface
Type
color
Default:
white
Description
Background of cards and of the dialog an offer opens in; white by default. Set it together with --fepli-text if your page is dark.
Name
color-scheme
Type
light | dark
Default:
inherit
Description
Standard CSS. On a dark page set color-scheme: dark; the greys and status colours turn round as in the admin’s dark theme.