# IFrame Einbindung

Sie können die Formulare von GATEWatch ganz einfach in Ihre bestehende Website einbinden. Hier erklären wir wie das funktioniert.

# Voraussetzungen

Um ein GATEWatch Formular in Ihre bestehende Website einzubauen, kontaktieren Sie Ihren Event-Administrator und teilen Sie ihm die URL der Webseite, auf welcher das Formular eingebettet werden soll. Ihr Event-Administrator wird ihnen nun folgende Daten mitteilen, die Sie für die Einbindung benötigen:

1. Die für das Script benötigte URL (i.d.R. https://gwatch.events/iframe.js).
2. Einen Event-Key.
3. Den Formular-Typ. Hier wird definiert, welches Formular beim direkten Aufruf der Website ohne weitere Parameter angezeigt werden soll. Es stehen zur Verfügung: 
    - 'registration' für ein Formular zu Online-Registrierung
    - 'tbc' für ein Formular auf dem die von Ihnen eingeladenen Gäste ihre Teilnahme bestätigen können und hierfür einen Link bekommen, der ihre Zugangsdaten bereits enthält.
    - 'onl' für ein Login-Formular, falls Ihre Gäste einen Link zur Teilnahme + Benutzername und Passwort bekommen haben
    - 'fbk' für ein Login des Feedback-Formulars nach Abschluss der Veranstaltung
    - 'sso' für ein Login-Formular zum Single-Sign-On für z.b. eine Videoübertragung der Veranstaltung.

# Die Einbindung

Die Einbindung auf der Website erfolgt nun mit folgendem Code:

```
.....

    <div id="gwatch-iframe"></div>
    <script
        src="[SCRIPT-URL]"
        data-event-key="[EVENT-KEY]"
        data-url-partial="[FORMULAR-TYP]"
        >
    </script>
    
.....
```

**Wichtig:** das &lt;div&gt; muss **VOR** dem &lt;script&gt; kommen**.**

Im Script selber geben Sie als `src` die URL für das Script an.  
Als `data-event-key` wird der Event-Key eingetragen und unter `data-url-partial `die Art des Formulars.

##### Optionen:  


- Soll die ID des &lt;div&gt; aus irgend welchen Gründen anders lauten, so kann die alternative ID im Script mit `data-target` übergeben werden.
- Standardmäßig nimmt der IFrame 100dvh Höhe ein. Dies kann im Bedarfsfall mit `data-height` überschrieben werden.
- Wenn das Formular bestätigt wird, sollte es wieder nach oben Scrollen. Wenn Sie an dieser Stelle einen Offset benötigen, können Sie diesen über `data-scroll-offset` einstellen. Ob dies nötig ist und welcher Wert passt können Sie am besten an der bestehenden Webseite testen und ggf. nachkorrigieren.