Einbettungen

Mit Einbettungen platzieren Sie ein SupDesk-Formular direkt auf Ihrer eigenen Website. Besucher tragen sich in Ihre Warteliste ein, schreiben Ihnen oder melden sich für eine Beta an, ohne Ihre Seite zu verlassen.

Drei Formulare lassen sich einbetten:

Formular	Funktion	Voraussetzung
`waitlist`	Sammelt Warteliste-Anmeldungen	Warteliste aktiviert
`contact`	Eröffnet eine Konversation im Posteingang des Projekts	Private Nachrichten Pro
`beta`	Öffentliche Anmeldung für ein Beta-Programm	Beta aktiviert, Programm aktiv mit öffentlicher Anmeldung

Eine Einbettung hinzufügen

Der Codeschnipsel für jedes Formular wird in der Konsole für Sie erzeugt — kopieren Sie ihn und fügen Sie ihn an der Stelle Ihrer Seite ein, an der das Formular erscheinen soll:

Warteliste — im Bereich Warteliste des Projekts, unter der Einstellungskarte
Kontakt — auf der Seite Einstellungen des Projekts, unter Kontaktformular einbetten
Beta — auf der Seite des Beta-Programms, unter Einbetten

Ein Codeschnipsel sieht so aus:


<script src="https://acme.supdesk.app/embed.js"
        data-supdesk="contact"
        data-title="Acme kontaktieren" data-height="520" async></script>
<noscript>
  <iframe src="https://acme.supdesk.app/embed/contact" width="100%" height="520"
          style="border:0" title="Acme kontaktieren"></iframe>
</noscript>

Das Skript fügt das Formular dort ein, wo das Tag steht, und passt die Höhe an, wenn sich das Formular ändert — etwa wenn Validierungsfehler erscheinen oder wenn es nach dem Absenden zu einer kurzen Bestätigung zusammenschrumpft. Der <noscript>-Block ist ein einfaches iframe, damit das Formular auch für Besucher ohne JavaScript funktioniert.

Alles wird von Ihrer eigenen Portal-Domain ausgeliefert. Wenn Sie eine eigene Domain haben, erzeugt die Konsole die Codeschnipsel für diese Domain; andernfalls wird Ihre *.supdesk.app-Subdomain verwendet.

Attribute

Attribut	Erforderlich	Beschreibung
`data-supdesk`	ja	Welches Formular: `waitlist`, `contact` oder `beta`
`data-program`	nur Beta	Der Slug des Beta-Programms
`data-title`	nein	Barrierefreier Titel des Frames. Standard: `SupDesk form`
`data-height`	nein	Starthöhe in Pixeln vor der ersten Anpassung. Standard: `360`
`data-ref`	nein	Empfehlungscode der Warteliste, dem die Anmeldung gutgeschrieben wird

Sie können mehrere Einbettungen auf einer Seite verwenden — geben Sie jeder ihr eigenes <script>-Tag.

Content Security Policy

Wenn Ihre eigene Website einen Content-Security-Policy-Header sendet, erlauben Sie Ihren Portal-Origin in zwei Direktiven, sonst blockiert der Browser die Einbettung:


script-src https://acme.supdesk.app;
frame-src  https://acme.supdesk.app;

Verwenden Sie hier Ihre eigene Domain, falls Ihre Codeschnipsel eine nutzen. Mehr muss nicht erlaubt werden — die Einbettung lädt keine Fremdskripte in Ihre Seite und sendet keine eigenen Netzwerkanfragen.

Spam-Schutz

Eingebettete Formulare nutzen dieselben Schutzmechanismen wie Ihr Portal: Sie sind pro Besucher und pro Projekt ratenbegrenzt, und wenn Sie Turnstile für das Projekt konfiguriert haben, erscheint die Challenge auch in der Einbettung.

Da Ihr Turnstile-Schlüssel für Ihre eigene Domain registriert ist und Einbettungen von genau dieser Domain ausgeliefert werden, funktioniert Ihr Schlüssel ohne zusätzliche Einrichtung.

Datenschutz und Anmeldung

Eingebettete Formulare lesen oder schreiben nie eine Portal-Sitzung — Browser senden diese Cookies grundsätzlich nicht an einen Frame auf einer fremden Seite. Jede Einbettung arbeitet stattdessen E-Mail-zuerst: Der Besucher gibt eine E-Mail-Adresse an und erhält einen Link per E-Mail.

Das hat eine Konsequenz, die Sie beim Platzieren einer Einbettung kennen sollten: Der Besucher schließt den Vorgang in einem normalen Browser-Tab ab, nicht in Ihrer Seite.

Warteliste — die Anmeldung wird sofort erfasst; die E-Mail enthält die Position und den persönlichen Empfehlungslink
Beta — die E-Mail enthält den Annahme-Link, der die Person einschreibt
Kontakt — die Nachricht erreicht sofort Ihren Posteingang; die E-Mail ist die Bestätigung und ermöglicht das Lesen Ihrer Antworten

Über eine Einbettung erstellte Warteliste-Einträge werden mit der Quelle embed erfasst, sodass Sie sie in der Eintragstabelle und in CSV-Exporten von Portal-Anmeldungen unterscheiden können.

Was Besucher sehen

Die Einbettung zeigt nur das Formular selbst — keine Portal-Kopfzeile, Fußzeile oder Navigation. Sie übernimmt die Markenfarbe Ihres Projekts, sodass Ihre Akzentfarbe ohne Styling-Aufwand erhalten bleibt.

Eingebettete Seiten werden nicht von Suchmaschinen indexiert; die öffentlichen Portal-Seiten sind die kanonischen, indexierbaren Versionen.

Alter Warteliste-Codeschnipsel

Bevor es den Skript-Loader gab, war die Warteliste-Einbettung ein einfaches iframe auf /waitlist/embed:


<iframe src="https://acme.supdesk.app/waitlist/embed" width="100%" height="360"
        style="border:0" title="Warteliste"></iframe>

Das funktioniert weiterhin — Sie müssen nichts ändern. Der Wechsel zum aktuellen Codeschnipsel bringt die automatische Höhenanpassung; die feste height des alten iframes ist der einzige echte Nachteil.