Zeig deine supodo-Veranstaltungen auf deiner eigenen Website

So bindest du das Veranstaltungs-Widget in WordPress, Jimdo, Wix oder eine eigene HTML-Seite ein.

Was das Widget ist

Das Widget zeigt die Veranstaltungen deiner Organisation direkt auf deiner eigenen Website – als Liste, die sich von selbst aktualisiert. Du pflegst deine Termine weiter im supodo manager und musst sie nicht doppelt eintragen.

Gut zu wissen:

  • Es zeigt nur veröffentlichte Veranstaltungen. Entwürfe bleiben verborgen.
  • Es setzt keine Cookies.
  • Ein Klick auf eine Veranstaltung fragt zuerst nach und öffnet supodo dann in einem neuen Tab. Deine Website bleibt offen.
  • Änderungen im manager – an Veranstaltungen oder an der Liste der erlaubten Websites – erscheinen spätestens nach einer Minute im Widget.

Das Widget im manager anlegen

  1. Öffne im supodo manager deine Organisation, wähle in der Seitenleiste „Websites“ und dort „Auf deiner Website einbinden“.
  2. Leg fest, welche Veranstaltungen das Widget zeigt: alle kommenden Veranstaltungen deiner Organisation oder Veranstaltungen, die du einzeln auswählst.
  3. Wähle Sprache und Textfassung, wie viele Veranstaltungen erscheinen, eine von zwei Vorlagen („Zeitstrahl“ oder „Liste“) und auf Wunsch eigene Farben für Hintergrund, Schrift und Akzent. Farben, die zusammen schwer lesbar sind, nimmt der manager nicht an.
  4. Trag die Websites ein, auf denen das Widget erscheinen darf (mehr dazu im Abschnitt „Erlaubte Websites“).
  5. Kopiere den Code und füge ihn auf deiner Website ein. Die Anleitungen dazu stehen weiter unten.

Der Code sieht etwa so aus:

<iframe src="https://app.supodo.com/embed/WIDGET-ID" title="Veranstaltungen von Musterstadt Sport" style="width:100%;height:600px;border:0" loading="lazy"></iframe>

Dazu gibt es eine zweite, freiwillige Zeile. Mit ihr wächst das Widget mit seinem Inhalt, statt innen zu scrollen:

<script src="https://app.supodo.com/embed.js" async></script>

Kopiere den Code immer aus dem manager: Dort steht statt WIDGET-ID schon die Kennung deines Widgets drin.

Erlaubte Websites

Das Widget erscheint nur auf Websites, die du im manager einträgst. Auf jeder anderen Website zeigt der Browser stattdessen eine leere Fläche oder eine Fehlermeldung. So entscheidest du selbst, auf welchen Websites das Widget eingebunden werden kann. Deine veröffentlichten Veranstaltungen sind unabhängig davon auf supodo öffentlich.

Beim Eintragen gilt:

  • Trag die Adresse so ein, wie sie oben im Browser steht, wenn jemand deine Website öffnet – zum Beispiel https://musterstadt-sport.de.
  • https://musterstadt-sport.de und https://www.musterstadt-sport.de sind für den Browser zwei verschiedene Websites. Ist deine Website unter beiden Adressen erreichbar, trag beide ein.
  • Nur Adressen mit https:// funktionieren. Auf einer Website, die noch über http:// läuft, kann das Widget nicht erscheinen.
  • Eine neue oder gelöschte Adresse wirkt spätestens nach einer Minute.

Datenschutz auf deiner Website

Wenn jemand eine Seite mit dem Widget aufruft, lädt der Browser das Widget von supodo. Dabei wird technisch bedingt die IP-Adresse dieser Person an supodo übertragen. Erwähne das in der Datenschutzerklärung deiner Website, zum Beispiel so:

Auf dieser Seite zeigen wir unsere Veranstaltungen mit einem eingebetteten Widget der Plattform supodo. Beim Aufruf der Seite lädt dein Browser das Widget von den Servern von supodo und überträgt dabei technisch bedingt deine IP-Adresse und Angaben zu deinem Browser. Das Widget setzt keine Cookies. Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO; unser berechtigtes Interesse ist, unsere aktuellen Veranstaltungen auf unserer Website zu zeigen. Wie supodo diese Daten verarbeitet, steht in der Datenschutzerklärung von supodo: https://supodo.com/de/privacy-policy#public-display

Den Code einfügen – Schritt für Schritt

WordPress (selbst gehostet)

  1. Öffne im Block-Editor die Seite, auf der die Veranstaltungen erscheinen sollen.
  2. Füge einen Block „Individuelles HTML“ hinzu (englisch „Custom HTML“). Am schnellsten geht das, wenn du in einer leeren Zeile /html tippst und Enter drückst.
  3. Füge den kopierten Code in den Block ein – und, wenn du willst, die zweite Zeile direkt darunter.
  4. Prüf das Ergebnis in der Vorschau. Das Widget erscheint dort nur, wenn die Adresse deiner Website im manager eingetragen ist.
  5. Speichere oder veröffentliche die Seite.

Wichtig: Diesen Code dürfen nur Administratoren und Redakteure einfügen, in einem WordPress-Netzwerk (Multisite) nur Super-Admins. Bei allen anderen Rollen entfernt WordPress den Code beim Speichern.

WordPress.com

Auf WordPress.com hängt es vom Tarif ab. Laut WordPress.com ist solcher Code in allen bezahlten Tarifen möglich (Personal, Premium, Business und Commerce), sobald die Hosting-Funktionen aktiviert sind. Dafür reicht es zum Beispiel, ein Plugin zu installieren. Im Commerce-Tarif sind sie von Anfang an aktiv.

Im kostenlosen Tarif entfernt WordPress.com diesen Code beim Speichern. Dann kannst du auf einen bezahlten Tarif wechseln oder statt des Widgets einen Link auf die Seite deiner Organisation bei supodo setzen.

Die Schritte selbst sind dieselben wie bei WordPress oben.

Jimdo

Diese Schritte gelten für Jimdo Creator. Nicht jeder Jimdo-Tarif und nicht jeder Jimdo-Editor erlaubt eigenen Code – prüf das in deinem Tarif.

  1. Öffne deine Website und klicke auf „Bearbeiten“.
  2. Klicke an der gewünschten Stelle auf „Inhalt hinzufügen“ › „Weitere Inhalte und Add-ons“ und wähle das Element „Widget/HTML“.
  3. Füge den Code ein und klicke auf „Speichern“. Lade die Seite neu, falls das Widget nicht sofort erscheint.

Wix

Wix setzt eingebettete Inhalte immer in einen eigenen Rahmen. Nutze deshalb nicht den ganzen Code, sondern nur die Adresse des Widgets.

  1. Klicke im Editor auf „Hinzufügen“ › „Code einbetten“ › „Beliebte Einbettungen“ und wähle „Eine Website einbetten“.
  2. Gib als Website-Adresse die Adresse aus deinem Code ein. Das ist der Teil nach src= in den Anführungszeichen, also https://app.supodo.com/embed/WIDGET-ID.
  3. Zieh den Rahmen auf die Höhe, die du brauchst. Die zweite Zeile für die automatische Höhe wirkt bei Wix nicht.
  4. Veröffentliche die Seite. Trag im manager die Adresse ein, unter der deine Wix-Website erreichbar ist.

Eigene HTML-Seite

  1. Füge den Code im body-Bereich deiner Seite an der Stelle ein, an der die Veranstaltungen erscheinen sollen.
  2. Füge, wenn du willst, die zweite Zeile direkt darunter ein.
  3. Lade die Seite auf deinen Server und öffne sie über https://.

Der Titel ist für Screenreader wichtig

Der Code enthält einen Titel (title="…"). Screenreader lesen ihn vor, wenn jemand zum Widget kommt – so wissen blinde und sehbehinderte Menschen, was in dem Rahmen steckt. Lass den Titel deshalb im Code stehen. Du darfst ihn ändern, wenn ein anderer Name besser zu deiner Seite passt, aber lösch ihn nicht.

Wenn etwas nicht klappt

Das Widget bleibt leer oder zeigt eine Fehlermeldung

  • Ist die Adresse deiner Website im manager eingetragen – genau so, wie sie im Browser steht?
  • Läuft deine Website über https://? Unter http:// erscheint das Widget nicht.
  • Fehlt die Variante mit oder ohne www.? Trag beide ein.
  • Hast du gerade etwas geändert? Warte eine Minute und lade die Seite neu.

Im Widget erscheint ein Scrollbalken

Das Widget hat zunächst eine feste Höhe. Füge die zweite Zeile aus dem manager unter dem Code ein, dann wächst es mit seinem Inhalt. Du kannst auch die Höhe im Code ändern (height:600px). Bei Wix ziehst du stattdessen den Rahmen größer.

Der Code verschwindet nach dem Speichern

Dann erlaubt deine Website an dieser Stelle keinen eigenen Code. Bei WordPress liegt das meist an deiner Rolle, bei WordPress.com am Tarif – siehe die Hinweise oben.

Kommst du nicht weiter? Schreib uns über das Kontaktformular.