Showing the season's offers on the municipality's website
Families are to find the holiday programme of Elmsbrück where they look anyway: on the municipality's website. You turn on the embeds, create a public key for this website, assemble the offer list of the summer holidays as an embed and give the editors the code. For a news item about the canoe trip, a registration card is added. You need about 20 minutes.
What you need
- An account with the account type Admin and the role Super admin. Only super admins turn on embeds and create public keys.
- The season
Summer holidays 2027, whose phase Publish offers is currently running. - A published offer with the visibility Public on the website and registration via the website, e.g. the
Canoe trip. - The address of the municipality's website, here
elmsbrueck.de. - The person who maintains the municipality's website. They must be allowed to put code into the head of a page and into its content.
- The app API, switched on. It is on from the start: API.
- A fepli website. Families register there, even when the offers appear on the municipality's website.
Step 1 – Turn on the embeds
Embeds are off from the start. As long as the app Embed in a website is off, no other website loads anything from fepli, and the Embed tab is missing. The app needs the API to be switched on, because an embed reads the offers through the API, with the public key.
- Select Settings.
- Switch to App-Store.
- Select the card Embed in a website.
- Select Switch on.
The card Embed in a website and the opened app.
The message “Embed in a website switched on.” appears, and the card shows Switched on.
Step 2 – Create a key for the municipality's website
An embed shows something only if its code contains a public key. The key names the websites on which the embed may run, and Elmsbrück gets its own so that you can revoke it individually later. Under Allowed websites, enter the address without https:// and without www, because an address applies with its subdomains.
- Select the card Embed in a website. Under Public keys it says “No key yet. Without a key, embeds show nothing.”
- Select Create a key.
- Under Name, enter
Elmsbrück website. - Under Allowed websites, enter
elmsbrueck.de. - Select Create.
The dialog Create a key in front of the app Embed in a website.
The message “Key “Elmsbrück website” created.” appears. The key appears in the list, and its row shows the website elmsbrueck.de.
Step 3 – Assemble the offer list and copy the code
The offer list is the embed for the page about the holiday programme. Elmsbrück shows it as cards, because most offers have a picture. The code has two parts: one loads the embeds, the other is the list itself.
- In the sidebar under Seasons, select the season
Summer holidays 2027. - Switch to the Embed tab.
- Under Layout, select Cards.
- Under Public key, select
Elmsbrück website. - At the code under “1 · Once per page, in the <head>”, select Copy the code and paste it into an email to the editors.
- At the code under “2 · Where the list should appear”, select Copy the code and paste it as well.
<script type="module" src="https://beispiel.fepli.eu/embed.js" data-key="pk_9f3a2c71e4b05d18a6c2e7f0"></script>
<fepli-offers edition="summer-holidays-2027" layout="grid" ></fepli-offers>
The Embed tab of the season with both parts of the code.
The preview shows the offers of the summer holidays as cards. Under the key it says “Works on elmsbrueck.de”, and every copy reports “Code copied.”
Step 4 – Copy the canoe trip as a registration card
The municipality announces the canoe trip in a news item of its own. The registration card suits that: It shows the picture, date, fee and free places of the canoe trip and leads with Apply to its offer page.
- Select Offers and open the
Canoe trip. - Switch to the Embed tab.
- At the code of the Registration card, select Copy the code and paste it into the email.
<fepli-offer-card offer="0192a4f1-6e3b-7c85-b1d2-8f4e6a9c3b03"></fepli-offer-card>
<fepli-offer offer="0192a4f1-6e3b-7c85-b1d2-8f4e6a9c3b03"></fepli-offer>
<script type="module" src="https://beispiel.fepli.eu/embed.js" data-key="pk_9f3a2c71e4b05d18a6c2e7f0"></script>
The Embed tab of the canoe trip.
The preview on the right shows the card of the canoe trip with its next date.
Step 5 – Give the editors the code
The editors need no access to fepli. They insert the code once, and from then on the embeds show the current state: new offers, free places, cancellations.
- Ask the editors to put the first code into the head of the page about the holiday programme and of the news item.
- For the code of the offer list, name the place on the page where the offers are to appear.
- For the code of the registration card, name the news item about the canoe trip.
- Send the email.
The editors now have all three parts of the code.
Step 6 – Check the result on the website
Only on the website itself does it become clear whether the key fits the website. If the website is at a different address than in the key, the embed stays empty.
- Open the page about the holiday programme on
elmsbrueck.de. - In the offer list, select the
Canoe trip. - In the dialog, select Apply.
The canoe trip opens on the municipality's website in a dialog. Apply leads to the offer page of fepli, and families register there.
What you have achieved
The municipality's website shows the offers of the Summer holidays 2027 as cards, and the news item about the canoe trip carries a registration card. Both embeds run with the key Elmsbrück website, which applies only on elmsbrueck.de. Registration still happens on fepli.
If your case is different
- If the offer list stays empty and shows “The offers could not be loaded.”, the address of the website is not under Allowed websites of the key: Settings.
- If the list is to show the autumn holidays as well, add the season to the same list with Add a season: Embeds.
- If the editors may not insert code, they link to the season page of fepli: Embedding the holiday programme in the municipality's website.
- If a club wants to show the canoe trip on its own website, it gets a key of its own with its address.