Integration
FormSolutions (MACH)
Embedded Frame Integration für MACH FormSolutions – Chatbot und Admin-Panel nahtlos in bestehende Formular-Frontends eingebettet.
Funktionen
iFrame-basierte Einbettung
Chatbot-UI und Admin-Panel werden als Embedded Frame in das FormSolutions-Frontend eingebettet – visuell nahtlos, technisch entkoppelt.
Responsive Anpassung
Das eingebettete Widget passt sich automatisch an die Größe des übergeordneten Containers an – auf Desktop, Tablet und Mobil.
Cross-Origin-Kommunikation
Sichere Kommunikation zwischen FormSolutions-Host und OpenAdvo-Widget über postMessage-API mit Origin-Validierung.
Einheitliches Look & Feel
Farben, Schriftarten und Abstände werden aus dem FormSolutions-Theme übernommen. Kein visueller Bruch für Endnutzer:innen.
Konfiguration per Embed-Code
Ein einfacher HTML-Snippet mit Formular-ID und API-Key genügt. Keine serverseitige Installation erforderlich.
Sandboxed Security
Das iFrame läuft in einer Sandbox mit minimalen Permissions. Content-Security-Policy und CORS schützen vor Cross-Site-Angriffen.
Sichere Cross-Origin-Integration
Die Embedded-Integration nutzt bewährte Web-Standards, um maximale Sicherheit bei gleichzeitig nahtloser Nutzererfahrung zu gewährleisten.
- postMessage-API
Bidirektionale Kommunikation zwischen Host und Widget mit strikter Origin-Prüfung.
- Content-Security-Policy
Das iFrame wird nur von autorisierten Domains geladen. CSP-Header verhindern Injection.
- Lazy Loading
Das Widget wird erst geladen, wenn es im Viewport sichtbar ist – kein Performance-Impact auf die Formularseite.
- Event-Bus
Formular-Events (Feldänderungen, Validierung) werden über einen Event-Bus ans Widget weitergeleitet.
<div id="openadvo-widget">
<iframe
src="https://widget.openadvo.de/
?form=wohngeld-2024
&key=pk_live_xxx
&theme=auto"
sandbox="allow-scripts
allow-same-origin"
style="width: 100%;
height: 600px;
border: none;"
loading="lazy"
/>
</div>
<script>
window.addEventListener(
'message', (e) => {
if (e.origin !==
'https://widget.openadvo.de')
return;
// Handle form data
console.log(e.data);
});
</script>In 4 Schritten live
Die Einbettung ist bewusst einfach gehalten – kein Backend-Zugang nötig.
Embed-Code generieren
Im OpenAdvo-Admin-Panel wird der Embed-Code für das jeweilige Formular generiert – inklusive API-Key und Konfiguration.
In FormSolutions einfügen
Der Embed-Code wird als HTML-Element in die FormSolutions-Seite eingefügt – in der Formularkonfiguration oder per Template.
Theme & Verhalten anpassen
Über Parameter im Embed-Code werden Farben, Sprache und Dialogverhalten an die Behörden-CI angepasst.
Testen & freigeben
In der FormSolutions-Vorschau wird das Widget getestet. Nach Freigabe ist es sofort für Bürger:innen verfügbar.
Vorteile der Embedded-Integration
Keine Serverinstallation – Einbettung rein clientseitig per HTML-Snippet
FormSolutions bleibt das führende System – kein Systemwechsel
Unabhängige Updates – OpenAdvo-Widget wird zentral aktualisiert
MACH-Architektur-konform – Microservices, API-first, Cloud-native
Minimaler Aufwand für IT-Abteilungen – Integration in unter einer Stunde
Vollständige Datenisolation – Widget-Daten werden nicht im Host persistiert
Alle OpenAdvo-Module verfügbar
Alle Module werden über das Embedded Widget bereitgestellt – konfigurierbar über den Embed-Code oder das Admin-Panel.
Technische Voraussetzungen
- MACH FormSolutions mit HTML-Template-Zugang
- Moderner Browser (Chrome, Firefox, Edge, Safari)
- HTTPS-fähige FormSolutions-Instanz
- CSP-Konfiguration für widget.openadvo.de