> ## Documentation Index > Fetch the complete documentation index at: https://docs.cloud.anex.is/llms.txt > Use this file to discover all available pages before exploring further. # VOUCHER! Widget Seitenreferenz > Alle Einstellungen und Felder des VOUCHER! Widgets: Allgemein, Einbettungscode, E-Mail-Benachrichtigungen, CSS, Hooks, Datenschutz, Newsletter, WhatsApp und Formularfelder. Diese Seite dokumentiert alle Einstellungen des VOUCHER! (der Online-Gutscheinverkauf) Widgets. Du erreichst die Konfiguration im Mandant-Dashboard unter **Widgets**, indem du ein bestehendes VOUCHER! Widget öffnest oder ein neues erstellst. ## Allgemein | Feld | Gültige Werte | Hinweise | | --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------- | | **Aktiv** | Ja, Nein | Ja = Widget ist aktiv und kann genutzt werden. Nein = Widget ist inaktiv und kann nicht genutzt werden. | | **Widget-Definition** | mandant - VOUCHER! | Wird nur beim Erstellen angezeigt. Für VOUCHER! muss „mandant - VOUCHER!" ausgewählt werden. | | **Externe ID** | Automatisch generiert | Wird erst nach dem erstmaligen Speichern angezeigt. Kann nicht verändert werden. Wird primär für Analysen benötigt. | | **Name** | Freitext | Bezeichnung zur Unterscheidung mehrerer Widgets desselben Typs. Kann jederzeit verändert werden. | ## Einbettungscode Nach erstmaligem Speichern findest du den Einbettungscode pro Sprache. Wähle die gewünschte Sprache über die Sprachauswahl, kopiere den HTML-Code und füge ihn auf deiner Website ein. Der Code ist schreibgeschützt. ## E-Mail-Einstellungen | Feld | Gültige Werte | Hinweise | | ------------------------------------------------------ | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Benachrichtigung an Mailadressen des/der Mandanten** | Ja, Nein | Ja = Bei neuen Gutscheinbestellungen erfolgt eine Benachrichtigung an die E-Mail-Adresse(n) des Mandanten. Nein = Keine Benachrichtigung an den Mandanten. | | **Benachrichtigung an folgende Adressen** | E-Mail-Adressen | Zusätzliche E-Mail-Adressen für Benachrichtigungen. Klicke **Eintrag hinzufügen** zum Ergänzen. Klicke **X** zum Entfernen. | ## CSS-Variablen Farbwerte für das Erscheinungsbild des VOUCHER! Widgets auf deiner Website. | Feld | Gültige Werte | Hinweise | | ------------------------------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | **Textfarbe (primär)** | CSS-Farbwert | Primäre Textfarbe. | | **Hintergrundfarbe (primär)** | CSS-Farbwert | Primäre Hintergrundfarbe. | | **Textfarbe (sekundär)** | CSS-Farbwert | Sekundäre Textfarbe. | | **Hintergrundfarbe (sekundär)** | CSS-Farbwert | Sekundäre Hintergrundfarbe. | | **Textfarbe (Bestätigung)** | CSS-Farbwert | Textfarbe für Bestätigungsmeldungen. | | **Hintergrundfarbe (Bestätigung)** | CSS-Farbwert | Hintergrundfarbe für Bestätigungsmeldungen. | | **Textfarbe (Fehler)** | CSS-Farbwert | Textfarbe für Fehlermeldungen. | | **Hintergrundfarbe (Fehler)** | CSS-Farbwert | Hintergrundfarbe für Fehlermeldungen. | | **Textfarbe (Formularfelder)** | CSS-Farbwert | Textfarbe für Formularfelder. | | **Hintergrundfarbe (Formularfelder)** | CSS-Farbwert | Hintergrundfarbe für Formularfelder. | | **Schriftstärke (fett)** | Normal (400), Mittel (500), Halbfett (600), Fett (700), Extra fett (800), Schwarz (900) | Stärke der fetten Schriftauszeichnung im Widget. Betrifft alle Elemente mit `font-weight: bold`. Standard: Fett (700). | ## Hooks JavaScript-Code pro Sprache, der bei bestimmten Events im Widget ausgeführt wird. | Feld | Gültige Werte | Hinweise | | -------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Beim Laden des Widgets** | JavaScript-Code | Wird ausgeführt, sobald das Widget auf der Website geladen wurde. | | **Vor der Zusammenfassung** | JavaScript-Code | Wird ausgeführt, bevor dem Käufer die finale Zusammenfassung der Bestellung angezeigt wird. | | **Beim Wechseln der Ansicht** | JavaScript-Code | Wird ausgeführt, sobald sich die Ansicht im Widget ändert. Über den Funktionsknopf **Dokumentation** findest du das `contextObject` mit den verfügbaren Parametern (z. B. aktuelle Ansicht). | | **Beim erfolgreichen Speichern** | JavaScript-Code | Wird ausgeführt, sobald die Bestellung erfolgreich abgeschickt wurde. Über den Funktionsknopf **Dokumentation** findest du das `contextObject` mit Daten zur Bestellung für Conversion-Tracking. | ## Datenschutz Pro Sprache konfigurierst du den Datenschutztext und die Verlinkung. | Feld | Gültige Werte | Hinweise | | ---------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Dokumentation** (Funktionsknopf) | -- | Zeigt alle verfügbaren Platzhalter und deren Output an. | | **Text** | Freitext pro Sprache, Platzhalter erlaubt | Text für das Label der Datenschutz-Checkbox. Verwende `{{privacyLink}}` an der Stelle, wo der Link eingefügt werden soll (z. B. „Ich akzeptiere die `{{privacyLink}}`"). | | **Linktext** | Freitext pro Sprache | Text, der für den Datenschutz-Link angezeigt wird (z. B. „Datenschutzbestimmungen"). | | **Datenschutz-Link** | URL (relativ oder absolut) | Ziel-URL des Datenschutz-Links. | | **Link in neuem Tab öffnen** | Checkbox (aktiviert/deaktiviert) | Bei aktivierter Checkbox öffnet sich der Link in einem neuen Browser-Tab. | ## Newsletter | Feld | Gültige Werte | Hinweise | | ------------ | -------------------- | ----------------------------------------------------------------------------------------------- | | **Anzeigen** | Ja, Nein | Bei „Ja" wird eine Checkbox zum Abonnieren des Newsletters im Widget angezeigt. | | **Text** | Freitext pro Sprache | Text neben der Newsletter-Checkbox. Wird nur angezeigt, wenn **Anzeigen** auf „Ja" gesetzt ist. | ## WhatsApp | Feld | Gültige Werte | Hinweise | | ------------ | -------------------- | --------------------------------------------------------------------------------------------- | | **Anzeigen** | Ja, Nein | Bei „Ja" wird eine Checkbox betreffend Kontaktaufnahme über WhatsApp im Widget angezeigt. | | **Text** | Freitext pro Sprache | Text neben der WhatsApp-Checkbox. Wird nur angezeigt, wenn **Anzeigen** auf „Ja" gesetzt ist. | ## Formularfelder | Feld | Gültige Werte | Hinweise | | ------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Alle Felder anzeigen** | Ja, Nein | Bei „Ja" werden alle Pflichtfelder und optionale Felder sofort angezeigt. Bei „Nein" werden nur Pflichtfelder angezeigt; optionale Felder kann der Käufer händisch einblenden. | ### Formularfelder verwalten Pro Sprache legst du die Formularfelder, deren Reihenfolge und individuelle Einstellungen fest. Pflichtfelder sind **Vorname**, **Nachname** und **E-Mail-Adresse**; sie können nicht entfernt werden. Über **Eintrag hinzufügen** fügst du Felder hinzu, über **X** löschst du Einträge, über das Bleistift-Symbol bearbeitest du sie. Mit dem Hamburger-Menü (drei horizontale Linien) änderst du die Reihenfolge. ### Allgemeine Formularfeldeigenschaften Diese Eigenschaften stehen in allen Formularfeldtypen zur Verfügung: | Feld | Gültige Werte | Hinweise | | ------------------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | **Feldtyp** | Text, Text mehrzeilig, Auswahl, Telefonnummer, E-Mail, Länder-Auswahl, Checkbox, Radio-Button | Legt den Formularfeldtyp fest. | | **Name** | Freitext | Name bzw. Formularlabel des Formularfeldes. | | **Interner Feldname (Data-ID)** | Freitext (eindeutig) | Eindeutige interne Bezeichnung. Wird in das `data-id`- und `name`-Attribut übernommen. | | **Autocomplete-Attribut** | Freitext | Wert für das `autocomplete`-Attribut. Gibt dem Browser einen Hinweis zum Vorausfüllen. | | **Platzhalter** | Freitext | Platzhaltertext, der angezeigt wird, solange das Feld keinen Fokus hat und keine Eingabe vorliegt. | | **Pflichtfeld** | Ja, Nein | Bei „Ja" muss der Käufer das Feld zwingend ausfüllen. | | **Hinweistext** | Freitext | Wird als Tooltip (`title`-Attribut) angezeigt, wenn der Käufer mit der Maus über das Feld fährt. | | **Ganze Breite verwenden** | Ja, Nein | Bei „Ja" erstreckt sich das Feld über die komplette Formularbreite. | ### Feldtyp-spezifische Eigenschaften **Feldtyp „Auswahl":** | Feld | Gültige Werte | Hinweise | | -------------------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------- | | **Anzeigetyp in E-Mail und Kommentar** | Wert, Text | Bestimmt, ob der Wert oder der Text der Auswahloption im Kommentarbereich und in der Benachrichtigungsmail angezeigt wird. | | **Auswahlmöglichkeiten** | Freitext-Einträge | Die zur Auswahl stehenden Optionen (z. B. „Frau", „Herr", „Familie"). | **Feldtyp „Länder-Auswahl":** | Feld | Gültige Werte | Hinweise | | ------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Schnellauswahl Länder** | Länderliste | Länder, die für die Schnellauswahl in der definierten Reihenfolge zur Verfügung stehen (z. B. „Italien", „Deutschland", „Österreich", „Schweiz"). Pro Sprache können unterschiedliche Reihenfolgen festgelegt werden. | **Feldtyp „Radio-Button":** | Feld | Gültige Werte | Hinweise | | ----------------------------------------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------- | | **Jede Auswahlmöglichkeit in einer eigenen Zeile anzeigen** | Ja, Nein | Bei „Ja" werden die Radio-Buttons untereinander angezeigt. Bei „Nein" werden sie inline in einer Zeile angezeigt. | | **Anzeigetyp in E-Mail und Kommentar** | Wert, Text | Bestimmt, ob der Wert oder der Text der Auswahloption im Kommentarbereich und in der Benachrichtigungsmail angezeigt wird. | | **Auswahlmöglichkeiten** | Freitext-Einträge | Die zur Auswahl stehenden Optionen. | ## Abhängigkeiten * **Widget-Definition** bestimmt den Widget-Typ. Erst nach Auswahl von „mandant - VOUCHER!" werden die VOUCHER!-spezifischen Abschnitte angezeigt. * **Externe ID** und **Einbettungscode** erscheinen erst nach erstmaligem Speichern. * **Newsletter > Text** wird nur angezeigt, wenn **Newsletter > Anzeigen** auf „Ja" gesetzt ist. * **WhatsApp > Text** wird nur angezeigt, wenn **WhatsApp > Anzeigen** auf „Ja" gesetzt ist. * Die [VOUCHER! Komponente](/de/mandants/components/voucher) muss aktiv sein, mindestens ein Zahlungssystem und eine Versandart müssen ausgewählt sein, sonst kann der Käufer keinen Gutschein bestellen. * Mindestens ein Gutschein muss in der Komponente angelegt sein, damit das Widget Inhalte anzeigt. ## Aktionen | Aktion | Beschreibung | | --------------------------- | ------------------------------------------------------------------------------------------- | | **Speichern** | Speichert die aktuellen Einstellungen. Das Widget bleibt geöffnet. | | **Speichern und schließen** | Speichert die Einstellungen und schließt das Widget. Du kehrst zur Widget-Übersicht zurück. | ## Verwandte Artikel * [VOUCHER! Widget einrichten](./setup-voucher) -- Voraussetzungen und Einrichtungsschritte * [VOUCHER! Widget in die Website einbetten](./embed-voucher) -- Einbettungscode und Mehrfacheinbindung * [VOUCHER! Einstellungen Seitenreferenz](/de/mandants/components/voucher) -- alle Felder und Einstellungen der Komponente * [VOUCHER! einrichten](/de/mandants/components/setup-voucher) -- Komponente einrichten * [CONNECT! E-Mail-Inhalte](/de/mandants/components/connect/e-mail-content) -- Bestätigungs-E-Mail anpassen * [Gutschein per E-Mail Seitenreferenz](/de/mandants/components/connect/e-mail-content/voucher/confirmation-e-mail) -- Bestätigungs-E-Mail an den Käufer (Versandart E-Mail) * [Gutschein per Post Seitenreferenz](/de/mandants/components/connect/e-mail-content/voucher/confirmation-post) -- Bestätigungs-E-Mail an den Käufer (Versandart Post)