Für die Einbettung der Integreat-App mit einer bestehende Webseite gibt es vier Wege. Die häuftigste und einfachste Verzahnung von kommunaler Webseite und Integreat ist die gegenseitige Verlinkung. Es ist aber auch eine direktere Einbindung möglich. Diese ermöglicht es, direkt auf der kommunalen Webseite durch die Integreat-Inhalte zu navigieren und direkt auf die Inhalte in Integreat aufmerksam zu machen. Auf dieser Seite stellen wir Ihnen die Wege vor.

Verlinken Sie im Text von Ihrer kommunalen Webseite oder animieren Sie andere Integrationsakteure in Ihrer Region dies zu tun. Ergänzend können Sie dazu auch das Integreat-Logo oder unsere Webseiten-Banner nutzen. Beides finden Sie im Marketing-Kit, das auf der Seite Marketing zum Download bereitsteht.

Achtung: Dieser Weg funktioniert nur bei Webseiten mit WordPress-Technologie

Dabei handelt es sich um eine einbettbare Suchfläche, um die Integreat-App zu durchsuchen. Es kann ebenfalls auf der kommunalen Webseite eingebettet werden, wurde aber vorwiegend für Webseiten von Integrationsakteuren entwickelt, die oftmals WordPress als Technologie nutzen. Es sind verschiedene Designs und Formate verfügbar bzw. in den Einstellungen des Plugins wählbar.

Folgende Schritte sind vom Webseiten-Betreiber zu befolgen:

1. Optional: Prüfen Sie, ob die Webseite die WordPress-Technologie nutzt (z.B. via builtwith.com). Dort muss in den Ergebnissen „WordPress“ im Abschnitt „Content Management System“ aufgelistet sein.
2. Plugin „Integreat Search Widget“ im Plugin-Store von WordPress herunterladen (Menüpunkt Plugin → Installieren) oder direkter Download hier.
3. Im WordPress-System unter Einstellungen → Integreat den Regionnamen eintragen sowie das Design des Widgets auswählen sowie die Texte ggf. anpassen
4. Auf der entsprechenden Seite, wo die Suchfläche auftauchen soll, die Zeichenfolge [integreat] mit den eckigen Klammern in den Inhalt schreiben
5. Fertig.

Um die Integreat-App prominent auf der Webseite Ihrer Kommune zu platzieren, muss Ihre Integreat-App als sogenanntes Inlineframe (kurz:iFrame) eingebunden werden. Sehr bekannt ist das Einbinden von YouTube-Videos in Webseiten mittels iFrames, wo der Youtube-Player dann direkt auf der Webseite sichtbar ist, ohne dass dafür extra die Youtube-Webseite geöffnet werden muss.

Ein Beispiel wie dies für Integreat aussehen kann finden Sie z.B. hier im Schwalm-Eder-Kreis (s. auch Bild oben) oder hier im Landkreis Erlangen-Höchstadt.

Der Einsatzzweck eines iframes (Details in den folgenden Abschnitten) ist vor allem, um Multiplikatoren auf die Vielfalt und Existenz der Inhalte in der Integreat-App aufmerksam zu machen.

Wer die Integreat-App in seiner Region als Inlineframe auf seiner städtische Webseite oder der Seite des Landkreises einbinden möchte, kann diesen ähnlich wie eine Bild-Quelle als HTML-Zeile in den Quellcode einfügen. Dabei werden innerhalb des Code-Snippets die Höhe, die Ausrichtung und weitere Attribute hinterlegt, welche die Optik und die Ausrichtung des iframe beeinflussen. Der nachfolgende Code zeigt bereits den gesamten Code, der zur Einbindung eingefügt werden muss:

<iframe src="https://integreat.app/KOMMUNENNAME" scrolling="" frameborder="0" width=100% height=3000px sandbox="allow-scripts allow-same-origin" referrerpolicy="no-referrer"></iframe>

Hierbei ersetzen Sie den Teil KOMMUNENNAME durch das Kürzel Ihrer Kommune, welches Sie in dem URL der WebApp Ihrer Integreat-Seite finden.

Die Höhe der eingebettenen Integreat-App ist immer statisch, d.h. die App wird u.U. mit Scrollbalken angezeigt. Zu Inhalten eines iframes können außerdem auch keine Lesezeichen gesetzt werden.

In der Vergangenheit wurden iFrames generell oft als ein beliebtes Mittel verwendet, um externe Inhalte in die eigenen Webseiten einzubetten. In der Theorie lassen sich so Inhalte aufrufen, aber gleichzeitig auch gefährliche Webseiten direkt in den eigenen Internetauftritt einbetten, falls diese z.B. entsprechende Sicherheitslücken oder Schadcode aufweisen. Ob die Einbettung eines iFrames aus sicherheitstechnischer Sicht unbedenklich ist, kann je nach Auslegung von Restriktionen und Erfahrungen aus der Vergangenheit in jeder Kommune unterschiedlich sein. Wir empfehlen Ihnen auf jeden Fall das Gespräch mit der EDV-Abteilung zu suchen, bevor eine entsprechende Einbettung stattfindet. Durch die Einbettung ist auch eine Anpassung der kommunalen Datenschutzerklärung auf der Webseite notwendig.

Standardmäßig lässt sich die Höhe der eingebetteten Integreat-App nicht dynamisch festlegen. Um diese Einschränkung zu umgehen, unterstützt Integreat den iframe-resizer und iframe-resizer-react. Dafür müssen nur die dazugehörigen Abhängigkeiten installiert werden und das einbetten wie folgt ergänzt werden:

<iframe id="integreat-iframe" src="https://integreat.app/KOMMUNENNAME" scrolling="" frameborder="0" width=100% height=3000px sandbox="allow-scripts allow-same-origin" referrerpolicy="no-referrer"></iframe>

<script>
  iFrameResize({}, '#integreat-iframe')
</script>

Integreat unterstützt dabei nur das Anpassen der Größe des iFrames von iframe-resizer und iframe-resizer-react. Weitere Funktionen der Bibliotheken (wie z.B. EventManagement, inPageLinks, etc.) werden nicht unterstützt