Zeig deine supodo-Veranstaltungen auf deiner eigenen Website

Hier steht, wie deine Veranstaltungen auf deine Website kommen. Mit WordPress, Jimdo, Wix oder HTML.

Was das Widget ist

Das Widget ist eine Liste mit deinen Veranstaltungen. Die Liste steht auf deiner eigenen Website. Sie bleibt von selbst aktuell. Du trägst deine Veranstaltungen nur im supodo manager ein.

Gut zu wissen:

  • Das Widget zeigt nur veröffentlichte Veranstaltungen. Entwürfe zeigt es nicht.
  • Das Widget setzt keine Cookies.
  • Jemand klickt auf eine Veranstaltung. Dann kommt zuerst eine Frage. Danach geht supodo in einem neuen Tab auf. Deine Website bleibt offen.
  • Du änderst etwas im manager. Nach höchstens 1 Minute sieht man das im Widget.

Das Widget im manager anlegen

  1. Geh in den supodo manager. Öffne deine Organisation. Wähle im Menü „Websites“. Dort findest du „Auf deiner Website einbinden“.
  2. Wähle die Veranstaltungen aus. Es gibt 2 Möglichkeiten. 1: Alle kommenden Veranstaltungen. 2: Nur Veranstaltungen, die du selbst aussuchst.
  3. Wähle die Sprache und die Text-Fassung. Wähle, wie viele Veranstaltungen man sieht. Wähle eine Vorlage: „Zeitstrahl“ oder „Liste“. Du kannst auch eigene Farben wählen. Die Farben müssen gut lesbar sein.
  4. Schreib auf, auf welchen Websites das Widget erscheinen darf. Mehr dazu steht unten bei „Erlaubte Websites“.
  5. Kopiere den Code. Füge ihn auf deiner Website ein. Wie das geht, steht weiter unten.

Der Code ist ein kurzer Text für deine Website. Er sieht ungefähr 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>

Es gibt noch eine zweite Zeile. Die brauchst du nicht unbedingt. Mit dieser Zeile wird das Widget so groß wie sein Inhalt. Dann musst du im Widget nicht scrollen.

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

Kopiere den Code immer aus dem manager. Dort steht die richtige Kennung von deinem Widget schon drin. Hier im Beispiel steht nur WIDGET-ID.

Erlaubte Websites

Das Widget erscheint nur auf Websites, die du im manager einträgst. Auf anderen Websites bleibt es leer. Oder der Browser zeigt einen Fehler. So bestimmst du selbst, wo deine Veranstaltungen zu sehen sind.

Darauf musst du achten:

  • Schreib die Adresse so, wie sie oben im Browser steht. Zum Beispiel: https://musterstadt-sport.de
  • Für den Browser sind https://musterstadt-sport.de und https://www.musterstadt-sport.de 2 verschiedene Websites. Geht deine Website mit beiden Adressen? Dann trag beide ein.
  • Die Adresse muss mit https:// anfangen. Mit http:// geht es nicht.
  • Du trägst eine Adresse ein oder löschst sie? Das gilt nach höchstens 1 Minute.

Datenschutz auf deiner Website

Jemand öffnet eine Seite mit dem Widget. Dann lädt sein Browser das Widget von supodo. Dabei bekommt supodo die IP-Adresse von dieser Person. Das muss in der Datenschutz-Erklärung von deiner Website stehen. Du kannst diesen Text nehmen:

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

So fügst du den Code ein

WordPress (selbst gehostet)

  1. Öffne die Seite im Block-Editor. Auf dieser Seite sollen die Veranstaltungen stehen.
  2. Füge einen Block „Individuelles HTML“ hinzu. Auf Englisch heißt er „Custom HTML“. Tipp: Schreib in eine leere Zeile /html. Dann drück Enter.
  3. Füge den Code in den Block ein. Du kannst die zweite Zeile direkt darunter einfügen.
  4. Schau dir die Vorschau an. Das Widget erscheint nur, wenn die Adresse von deiner Website im manager steht.
  5. Speichere die Seite. Oder veröffentliche sie.

Wichtig: Nur Administratoren und Redakteure dürfen diesen Code einfügen. Bei einem WordPress-Netzwerk dürfen das nur Super-Admins. Bei allen anderen löscht WordPress den Code beim Speichern.

WordPress.com

Bei WordPress.com kommt es auf deinen Tarif an. WordPress.com sagt: Der Code geht in allen Tarifen, die Geld kosten. Das sind Personal, Premium, Business und Commerce. Vorher musst du die Hosting-Funktionen einschalten. Dafür reicht es, ein Plugin zu installieren. Bei Commerce sind sie schon an.

Im kostenlosen Tarif löscht WordPress.com den Code beim Speichern. Dann hast du 2 Möglichkeiten: Du nimmst einen Tarif, der Geld kostet. Oder du setzt einen Link auf die Seite von deiner Organisation bei supodo.

Die Schritte sind die gleichen wie bei WordPress oben.

Jimdo

Diese Schritte gelten für Jimdo Creator. Manche Jimdo-Tarife erlauben keinen eigenen Code. Schau in deinem Tarif nach.

  1. Öffne deine Website. Klicke auf „Bearbeiten“.
  2. Geh an die Stelle für das Widget. Klicke auf „Inhalt hinzufügen“. Dann auf „Weitere Inhalte und Add-ons“. Wähle „Widget/HTML“.
  3. Füge den Code ein. Klicke auf „Speichern“. Du siehst das Widget nicht? Dann lade die Seite neu.

Wix

Bei Wix steht das Widget immer in einem Rahmen. Darum brauchst du nicht den ganzen Code. Du brauchst nur die Adresse von deinem Widget.

  1. Klicke im Editor auf „Hinzufügen“. Dann auf „Code einbetten“. Dann auf „Beliebte Einbettungen“. Wähle „Eine Website einbetten“.
  2. Gib die Adresse von deinem Widget ein. Sie steht im Code nach src= in Anführungs-Zeichen. Sie sieht so aus: https://app.supodo.com/embed/WIDGET-ID
  3. Zieh den Rahmen so hoch, wie du ihn brauchst. Die zweite Zeile geht bei Wix nicht.
  4. Veröffentliche die Seite. Trag die Adresse von deiner Wix-Website im manager ein.

Eigene HTML-Seite

  1. Füge den Code in den body-Bereich von deiner Seite ein. Und zwar dort, wo die Veranstaltungen stehen sollen.
  2. Du kannst die zweite Zeile direkt darunter einfügen.
  3. Lade die Seite auf deinen Server. Öffne sie mit https://.

Der Titel hilft beim Vorlesen

Im Code steht ein Titel. Das ist der Teil mit title="…". Manche Menschen lassen sich Websites vorlesen. Zum Beispiel blinde Menschen. Das Vorlese-Programm liest den Titel vor. So wissen sie, was im Widget ist. Darum: Lösch den Titel nicht. Du darfst ihn aber ändern.

Wenn es nicht klappt

Das Widget ist leer oder zeigt einen Fehler

  • Steht die Adresse von deiner Website im manager? Genau so wie im Browser?
  • Fängt die Adresse von deiner Website mit https:// an? Mit http:// geht es nicht.
  • Fehlt die Adresse mit www. oder ohne www.? Trag beide ein.
  • Hast du gerade etwas geändert? Warte 1 Minute. Dann lade die Seite neu.

Im Widget ist ein Scroll-Balken

Das Widget ist erst einmal immer gleich hoch. Füge die zweite Zeile aus dem manager unter dem Code ein. Dann wird das Widget so groß wie sein Inhalt. Du kannst auch die Höhe im Code ändern. Das ist der Teil height:600px. Bei Wix ziehst du den Rahmen größer.

Der Code ist nach dem Speichern weg

Dann erlaubt deine Website hier keinen eigenen Code. Bei WordPress liegt das oft an deiner Rolle. Bei WordPress.com liegt es oft am Tarif. Mehr dazu steht oben.

Du kommst nicht weiter? Schreib uns über das Kontaktformular.