Nutze die nachfolgenden Widgets, um deine eigenen Veranstaltungen oder Initiativen in deiner Nähe auf deiner eigenen Webseite darzustellen.

 

Integration Terminbox
Kopiere folgenden Code, um den nächsten Reparaturtermin deiner Initiative auf deiner eigenen Webseite anzuzeigen
Beispiel-Link: Voransicht Terminbox
<iframe width="350" height="140" src="https://open-source.reparatur-initiativen.de/widgets/events?id=1234"></iframe>
Erweiterter Code:
<iframe width="350" height="140" src="https://open-source.reparatur-initiativen.de/widgets/events?id=1234&num=2&trunc=330px"></iframe> Folgende optionale Parameter stehen zur Verfügung:
num=2 / num= die Anzahl der anzuzeigenden Reparaturtermine
trunc=300px / trunc= die Breite der Reparaturtermine in Pixel

Anpassen Aussehen:
Die Ausgabe des gesamten Widgets steuerst du über die Parameter im Tag iframe (width, height, frameborder ...) oder das Aussehen über sogenannte "Inline Styles" ,z.B. wie folgt:
<iframe width="350" height="140" style="border:3px solid #000; background:#FFC;" src="https://open-source.reparatur-initiativen.de/widgets/events?id=1234&num=2&trunc=330px"></iframe>

Integration der Karte

Schnell-Einbindung

Kopiere den folgenden Code, um die komplette Landkarte aller Initiativen auf deiner eigenen Webseite anzuzeigen:
Beispiel-Link: Voransicht Landkarte
<iframe frameborder="0" width="100%" height="650" src="https://open-source.reparatur-initiativen.de/widgets/map"></iframe>

Zoom auf bestimmten Bereich (Land, Region)

Du kannst auch Koordinaten für eine fixe Zentrierung der Karte, sowie ein vordefiniertes Zoom-Level angeben. Die geographischen Daten für deine Stadt, dein Bundesland oder dein Land findest du zum Beispiel auf dieser Webseite.
Beispiel-Link für die Zentrierung auf die Schweiz: Voransicht Landkarte
<iframe frameborder="0" width="100%" height="650" src="https://open-source.reparatur-initiativen.de/widgets/map?zoomLevel=8&lat=46.8&lng=8.2"></iframe>

Farben anpassen / eigene Marker verwenden

  • Hex-Codes für die Farben bitte ohne # angeben.
  • Hier findest du viele frei verfügbare Marker.
  • Der Parameter "markerSrc" ist die Standard-Grafik für die angezeigten Initiativen, "foundMarkerSrc" wird für die Suchergebnisse verwendet.
  • Die Marker-Grafiken können auch einen Schatten enthalten (png) und müssen über einen HTTPS-Server bereitgestellt werden.
  • Die Parameter zoomLevel, lat und lng können mit & an den letzten Parameter angehängt werden.
Beispiel-Link für eine umgestaltete Karte: Voransicht Landkarte
<iframe frameborder="0" width="100%" height="650" src="https://open-source.reparatur-initiativen.de/widgets/map? buttonColor=4f0901&buttonBgColor=db0202&searchButtonColor=db0202&searchButtonBgColor=4f0901&buttonMouseoverBgColor=ccc&buttonMouseoverColor=000
&clusterOuterColor=4f0901&clusterInnerColor=E22F00&clusterFontColor=4f0901
&markerSrc=https://cdn2.iconfinder.com/data/icons/splashyIcons/marker_squared_red.png
&foundMarkerSrc=https://cdn2.iconfinder.com/data/icons/splashyIcons/marker_squared_grey_5.png" ></iframe>


Integration Statistik
Kopiere den folgenden Code, um die die Statistik aller Initiativen auf deiner eigenen Webseite anzuzeigen:

Globale Statistik: Schnell-Einbindung

Beispiel-Link: Voransicht Statistik Global <iframe frameborder="0" width="100%" height="700" src="https://open-source.reparatur-initiativen.de/widgets/statistics-global"></iframe>

Globale Statistik: Standard-Datenquelle auswählen

  • Die Standard-Datenquelle kann aus folgenden Quellen ausgewählt werden: 'all', 'third-party-name', 'platform'
<iframe frameborder="0" width="100%" height="700" src="https://open-source.reparatur-initiativen.de/widgets/statistics-global?defaultDataSource=platform"></iframe>

Meine Plattform-Statistik: Schnell-Einbindung

Beispiel-Link: Voransicht Statistik Initiative <iframe frameborder="0" width="100%" height="700" src="https://open-source.reparatur-initiativen.de/widgets/statistics-workshop/1234"></iframe>

Farben anpassen

  • Die Hintergrund- und Rahmenfarben können angepasst werden. Die Farb-Codes bitte entweder als Hex-Code ohne # oder als RGB / RGBA (wie im Beispiel) angeben.
<iframe frameborder="0" width="100%" height="700" src="https://open-source.reparatur-initiativen.de/widgets/statistics-global?borderColorOk=rgb(14,113,184)&backgroundColorOk=rgba(14,113,184,0.6)&borderColorNotOk=rgb(181,24,33)&backgroundColorNotOk=rgba(181,24,33,0.6)&borderColorRepairable=rgb(242,217,164)&backgroundColorRepairable=rgba(242,217,164,0.6)"></iframe>

Initiativen-Name ausblenden

  • Beim Widget für Initiativen kann der Name der Initiative ausgeblendet werden.
<iframe frameborder="0" width="100%" height="700" src="https://open-source.reparatur-initiativen.de/widgets/statistics-workshop/1234?showWorkshopName=0"></iframe>

Umweltentlastung ausblenden

  • Beim Widget für Initiativen kann die Umweltentlastung in Form von eingesparten Flug-Kilometer ausgeblendet werden. Die Umweltentlastung wird nie angezeigt, wenn nur das Donut-Diagramm angezeigt wird.
<iframe frameborder="0" width="100%" height="700" src="https://open-source.reparatur-initiativen.de/widgets/statistics-workshop/1234?showCarbonFootprint=0"></iframe>

Balkendiagramm bzw. Donut-Diagramm ausblenden

  • showDonutChart / showBarChart auf 0 setzen, falls die enstprechende Grafik nicht angezeigt werden soll.
  • Hinweis: Das Donut-Diagramm wird beim globalen Statistik-Widget nur dann angezeigt, wenn beim Dropdown Datenquelle der Wert "Meine Plattform" ausgewählt ist.
<iframe frameborder="0" width="100%" height="700" src="https://open-source.reparatur-initiativen.de/widgets/statistics-global??showDonutChart=0"></iframe>