Mit Webwidgets zeigen Sie Grafiken aus Ihrem Energiestadt-Dashboard direkt auf der Webseite Ihrer Gemeinde. Sie erstellen das Widget im Dashboard, kopieren den Code und fügen ihn auf Ihrer Webseite ein. Die Daten bleiben dabei immer aktuell. Wenn Sie Änderungen im Dashboard vornehmen, werden diese direkt automatisch in das Widget auf Ihrer Webseite übernommen.
Voraussetzung: erlaubte Domain hinterlegen
Ein Widget wird nur auf Webseiten angezeigt, deren Domain Sie im Dashboard freigegeben haben. Tragen Sie dazu die Adresse Ihrer Webseite als erlaubte Domain ein, zum Beispiel www.xy.ch.
Auf anderen Domains bleibt das Widget leer. So verhindern Sie, dass Ihre Grafiken ohne Ihr Einverständnis auf fremden Seiten erscheinen.
Widget im Dashboard erstellen
Das Video zeigt Schritt für Schritt, wie Sie ein Widget im Dashboard erstellen und den Einbettungscode kopieren.
Den Code auf der Webseite einfügen:
Im Dashboard finden Sie unter Embed-Code alle Codes, die Sie für die Einbindung brauchen. Mit dem Kopiersymbol rechts neben jedem Codeblock übernehmen Sie den Code in die Zwischenablage.
Der Embed-Code besteht aus drei Codeblöcken:
- Basis-Code (oberster Codeblock): Der
<script>-Code ist für alle Widgets identisch. Fügen Sie ihn nur einmal auf Ihrer Webseite ein, auch wenn Sie mehrere Widgets einbinden. - Einzelnes Widget: Der Code
<es-widget widget-id="…">zeigt genau ein Widget. Jedes Widget hat eine eigene Widget-ID. Fügen Sie den Code an der Stelle ein, an der das Widget erscheinen soll. - Automatische Widget-Liste: Der Code
<es-widget-list region-id="…">zeigt alle verfügbaren Widgets Ihrer Energiestadt als Liste. Mehr dazu im Abschnitt «Mehrere Widgets mit einem Code».
Sie brauchen also immer den Basis-Code und zusätzlich den Code für ein einzelnes Widget oder für die automatische Widget-Liste. In den meisten Content-Management-Systemen fügen Sie den Code über ein HTML- oder Code-Element ein.
Mehrere Widgets mit einem Code: die automatische Widget-Liste
Mit der automatischen Widget-Liste binden Sie mehrere Widgets gleichzeitig ein und brauchen dafür nur einen einzigen Code. Neue oder geänderte Widgets erscheinen automatisch, ohne dass Sie den Code auf Ihrer Webseite anpassen müssen.
Wie die Widgets nebeneinander oder untereinander angeordnet werden, steuern Sie über die Styling-Attribute.
Darstellung anpassen mit Styling-Attributen
Über Styling-Attribute passen Sie das Aussehen der Widget-Kachel an Ihre Webseite an. Der Inhalt der Grafik selbst lässt sich nicht verändern. Weitere Informationen finden Sie hier.
Element | Standard | Anpassbar |
|---|---|---|
Titel: Schriftart | übernimmt automatisch die Schriftart Ihrer Webseite | ja, frei wählbar |
Titel: Schriftfarbe | – | ja |
Kachel: Hintergrundfarbe | – | ja |
Kachel: Schattierung | – | ja |
Kachel: Form | – | ja |
Anordnung mehrerer Widgets | – | ja, bei der automatischen Widget-Liste |
Inhalt der Grafik | gemäss Dashboard | nein |
War dieser Artikel hilfreich?
Das ist großartig!
Vielen Dank für das Feedback
Leider konnten wir nicht helfen
Vielen Dank für das Feedback
Feedback gesendet
Wir wissen Ihre Bemühungen zu schätzen und werden versuchen, den Artikel zu korrigieren