Auf der Website einbinden · DeutschlandGPT

Diese Funktion ist in der Beta-Phase. Sie ist nutzbar, einzelne Details können sich aber noch ändern.

Zwei Dinge bringen ein Widget auf Ihre Website: der Code in Ihrer Seite und Ihre Domain auf der Erlaubnisliste des Widgets. Fehlt das Zweite, blockiert der Browser den Chat: Der Button erscheint zwar, aber das Gespräch lädt nie.

Den Code kopieren

Öffnen Sie im Builder Einbinden, oder bitten Sie den Einrichtungs-Assistenten um den Einbettungscode; er stellt den exakten Code für dieses Widget in den Chat. Fügen Sie ihn direkt vor dem schließenden </body>-Tag auf jeder Seite ein, auf der der Chat-Button erscheinen soll. Meist heißt das: einmal, im Template Ihrer Website.

Der Code ist ein einzelnes <script>-Tag. Es ist auf eine exakte, eingefrorene Loader-Version mit einem Subresource-Integrity-Hash (SRI) und crossorigin="anonymous" festgelegt, sodass der Browser das Script vor der Ausführung prüft. Der Loader öffnet den Chat dann in einem abgeschotteten iFrame.

Fügen Sie den Code genau so ein, wie Sie ihn kopiert haben, und tippen Sie nie einen aus dem Gedächtnis ab. Widget-ID und Integrity-Hash gehören zu genau diesem Widget und dieser Loader-Version. Ein Code, der richtig aussieht, es aber nicht ist, scheitert still: Es erscheint nichts.

Einbinden bietet außerdem eine Inline-Einbettung, die den Chat in Ihre Seite setzt statt in einen schwebenden Button. Siehe Erweitertes Einbinden.

Domains freigeben

Die Domain-Erlaubnisliste finden Sie unter Sicherheit → Erlaubte Domains. Tragen Sie dort jede Domain ein, die das Widget zeigen darf. Der Browser setzt diese Liste durch (über frame-ancestors), eine fremde Website kann sich also nicht hineinmogeln.

Nur die eingetragenen Domains dürfen das Widget einbetten.
Ist die Liste leer, kann niemand es einbetten. Das ist absichtlich ausfallsicher.
Änderungen wirken sofort; ein Veröffentlichen ist nicht nötig.

Schreibweise der Einträge

Tragen Sie eine Adresse mit oder ohne https:// ein. Pfade werden automatisch entfernt.

Eintrag	Wirkung
`example.com`	gilt für `http` und `https` (empfohlen)
`https://example.com`	nur `https`
`*.example.com`	alle Subdomains, nicht die Domain selbst
`localhost:3000`	lokale Tests, mit Port, so wie er in der Adresszeile steht

Ist Ihre Website unter example.com und www.example.com erreichbar, tragen Sie beide ein.

Lokal testen und Seiten ohne Domain

Für eine Testseite auf Ihrem eigenen Rechner rufen Sie sie über http://localhost:3000 auf (oder den Port, den Sie verwenden) und tragen localhost:3000 in die Liste ein.

Eine direkt von der Festplatte geöffnete HTML-Datei (file://) und Sandbox-iFrames haben den Origin null, den frame-ancestors nicht ausdrücken kann. Testen Sie stattdessen über http://localhost. Die Alternative ist Null-Origin erlauben unter Sicherheit, aber das hebt die Domain-Beschränkung vollständig auf: Dann könnte jede Website Ihr Widget einbetten. Lassen Sie es aus, solange Sie solche Seiten nicht unterstützen müssen.

Wo der Code in Ihrem CMS hingehört

Jedes System hat eine Stelle für Code, der auf jede Seite gehört, direkt vor </body>. Menünamen ändern sich zwischen Versionen und Themes; weicht Ihrer ab, suchen Sie nach „Footer-Code“, „Benutzerdefinierter Code“ oder „Body-Ende“. Bei Systemen mit englischer Oberfläche nennen wir die englischen Menüpunkte.

Nutzen Sie ein Code-Snippet-Plugin, das Code auf allen Seiten in den Footer einfügen kann, oder setzen Sie den Code in die footer.php Ihres Child-Themes direkt vor </body>. Bearbeiten Sie nicht das Eltern-Theme: Das nächste Theme-Update überschreibt es.

Nutzen Sie ein Plugin, das JavaScript zusammenfasst, verkleinert oder verzögert, nehmen Sie das Widget-Script davon aus. Wird das Script-Tag umgeschrieben, schlägt die Integritätsprüfung fehl, und der Browser führt es nicht aus.

Content-Security-Policy Ihrer Website

Sendet Ihre Website eine Content-Security-Policy, muss sie das Widget zulassen. Erlauben Sie die DeutschlandGPT-Adresse, von der der Code lädt, in script-src (der Loader), frame-src (der Chat) und connect-src (die Abfrage der Konfiguration). Blockiert connect-src sie, meldet Einbinden für diese Seite „Die Seite konnte DeutschlandGPT nicht erreichen“.

Prüfen, ob es funktioniert

Öffnen Sie Ihre Website in einem privaten Browserfenster und öffnen Sie den Chat. Fehlt die Domain, sagt das Chatfenster das an Ort und Stelle und nennt die Adresse, die Sie eintragen müssen. Der Loader meldet jedes solche Problem außerdem an DeutschlandGPT zurück, und Einbinden listet die betroffenen Seiten mit Grund und einem Button, der die Domain mit einem Klick freigibt. Die einzelnen Fälle behandelt die Fehlerbehebung.

Auf der Website einbindenBeta