Anleitung

⌘K
  2. Start
  4. Dokumente
  6. Anleitung
  8. Webformulare ✅
  10. Gutscheinbestellungen

Gutscheinbestellungen

Konfiguration

🛒 Online-Shop · Gutscheinbestellung

Benutzerhandbuch & Konfigurationsreferenz

Stand: März 2026

📌 Schnellnavigation

✨ Was kann der Shop?

Das orderVoucher-System ist ein vollständig in jede Webseite einbettbarer Gutschein-Shop – unabhängig vom eingesetzten CMS oder CRM. Alle Bestelldaten fließen direkt in die Ninox-Datenbank.

📱 Mobil & überall einsetzbar
Vollständig responsiv, auf Desktop und Mobilgeräten optimiert. Läuft auf jeder Website unabhängig vom CMS.
🛒 Unbegrenzter Warenkorb
Mehrere Gutscheine gleichzeitig kaufen, ohne Mengenbeschränkung. Jedes Produkt einzeln konfigurierbar.
🖼️ Produktdarstellung
Bild und Beschreibung je Produkt möglich. Optionale Filter nach Verwendungszweck (Werktage/Sprungtage) und Zusatzgewicht.
✍️ Persönliche Widmung
Käufer können je Produkt eine persönliche Grußbotschaft hinterlegen. Wird gespeichert und im Warenkorb angezeigt. Bei fehlender Widmung erscheint vor dem Abschicken ein Hinweis-Modal.
🏷️ Rabattcodes
Echtzeitprüfung beim Eingeben. Selektive Anrechnung: Codes mit Produkteinschränkungen funktionieren auch wenn nicht-rabattfähige Artikel im Warenkorb liegen. Konditionen werden direkt angezeigt.
📦 Versandoptionen
Mail- und Postversand mit automatischer Versandkostenanzeige. Optionale separate Lieferanschrift.
💳 Zahlungsarten
Überweisung, PayPal und Stripe (Kreditkarte, SEPA-Lastschrift, Klarna). Automatischer Abgleich des Zahlungsstatus nach erfolgreicher Online-Zahlung.
🔒 Sicherheit & Validierung
Abgleich der E-Mail-Adressen bei Eingabe. Stripe-Zahlung wird serverseitig verifiziert bevor der Gutschein angelegt wird.
🎨 Frei gestaltbar
Primärfarbe aller Schaltflächen zentral über das Settings-JSON festlegbar. Anpassung ohne Code-Änderung.
💾 Entwurf-Speicherung NEU
Warenkorb, Widmungen, Bestellformular, Rabattcode, Versand- und Zahlungsart werden automatisch lokal gespeichert. Nach einem Seiten-Reload alles wiederhergestellt – 24 Stunden gültig.
↪️ Benutzerdefinierte Weiterleitungen
Nach erfolgreicher Zahlung oder Abbruch kann auf eigene Seiten weitergeleitet werden. Eigene Erfolgs- und Abbruchseiten für PayPal & Stripe konfigurierbar.
📧 Bezahl-Link in der Bestätigungsmail
Wenn eine Bestellung mit offener Zahlung eingeht, erhält der Käufer einen direkten Bezahl-Link in der Eingangsbestätigung.

🖥️ Shop-Vorschau

So sieht der Shop für den Käufer aus – mit allen aktuellen Funktionen. Die Darstellung zeigt den vollständigen Bestellprozess: Produktauswahl mit Widmungs-Banner, Warenkorb, Versand, Rabattcode und Bestellformular.

🧭 So funktioniert eine Bestellung

1
Produkt auswählen Der Käufer sieht alle verfügbaren Gutscheine mit Bild, Beschreibung und Preis. Optional kann nach Verwendungszweck oder Zusatzgewicht gefiltert werden. Wertgutscheine mit frei wählbarem Betrag sind ebenfalls möglich.
2
Widmung hinzufügen (optional) Wenn die Widmungsfunktion aktiv ist, erscheint unter jedem Produktbild ein klickbarer Banner. Nach dem Klick öffnet sich ein Eingabefeld für eine persönliche Grußbotschaft (max. 150 Zeichen). Die gespeicherte Widmung wird direkt im Banner angezeigt.
3
In den Warenkorb Beliebig viele Produkte können in den Warenkorb gelegt werden. Im Warenkorb sind Widmungen noch nachträglich änderbar. Produkte können jederzeit wieder entfernt werden.
4
Rabattcode eingeben (optional) Der Code wird in Echtzeit geprüft. Bei gültigem Code werden Konditionen und Ersparnis sofort angezeigt. Die Mindestbestellsumme (falls gesetzt) wird automatisch überwacht.
5
Versand & Zahlungsart wählen Mailversand (kostenlos) oder Postversand (Aufpreis). Optional Lieferanschrift angeben. Zahlungsart: Überweisung, PayPal oder Stripe.
6
Bestelldaten eingeben Name, Adresse, E-Mail (zweifach zur Kontrolle), optionale Mitteilung. AGB und Datenschutzerklärung müssen bestätigt werden.
7
Bestellung überprüfen Vor dem endgültigen Abschicken wird eine Zusammenfassung angezeigt. Falls Produkte ohne Widmung im Warenkorb sind, erscheint ein Hinweis-Modal mit der Möglichkeit, dies noch nachzuholen oder bewusst fortzufahren.
8
Bezahlen Bei Überweisung: Bestellung wird direkt angelegt, Bankdaten erscheinen in der Bestätigung. Bei PayPal/Stripe: Weiterleitung zur Zahlungsseite, nach erfolgreicher Zahlung automatische Rückkehr und Statusaktualisierung.
💾 Entwurf-Speicherung: Alle eingegebenen Daten werden automatisch lokal gespeichert. Nach einem versehentlichen Seiten-Reload ist alles – Warenkorb, Widmungen, Formulardaten, Zahlungsart – für 24 Stunden wiederherstellbar.

🔗 Einbindung in die Website

Der Shop wird mit einem kurzen HTML-Snippet in eine beliebige Seite eingebettet – egal ob WordPress, Jimdo, Squarespace oder eine eigene Website. Es sind keine Plugins oder sonstigen Abhängigkeiten erforderlich.

Schritt-für-Schritt (WordPress)

1
Neue Seite anlegenz. B. „Gutschein kaufen" unter /gutschein-kaufen/
2
HTML-Block einfügenIm Gutenberg-Editor: Block-Typ „HTML" (benutzerdefiniertes HTML) hinzufügen.
3
Einbettungscode einfügenDen vollständigen Code aus dem Abschnitt unten hineinkopieren und die markierten Werte anpassen.
4
Seite veröffentlichen & testenAuf einem Mobilgerät und Desktop prüfen.

Einbettungscode

📝 Die settingsUrl erhaltet ihr aus den Ninox-Share-Einstellungen. Die anderen Werte entsprechend anpassen – nicht benötigte optionale Parameter können gelöscht werden.
HTML – in einen HTML-Block kopieren Zum Kopieren markieren

⚙️ Einstellungen im Einbettungscode

Diese Parameter werden direkt im window.OV-Objekt des Einbettungscodes gesetzt. Änderungen hier wirken sofort – kein Ninox-Zugriff nötig.

🔴 Pflichtfelder

settingsUrl Pflichtfeld
Ninox-Share-Link zur Tabelle mit den Shop-Einstellungen. Über diese URL lädt das System beim Start alle Konfigurationsparameter – Farben, Zahlungsarten, Filter, Widmung usw.
Format: "https://share.ninox.com/..."

🟢 Optionale Felder

stripeKey Optional
Öffentlicher Stripe-Publishable-Key. Nur erforderlich wenn Stripe als Zahlungsmethode aktiv ist. Beginnt immer mit pk_.
Test: "pk_test_..."
Live: "pk_live_..."
finalSuccessRedirectUrl Optional
Wohin der Käufer nach einer erfolgreichen Zahlung weitergeleitet wird. Ohne Angabe bleibt er auf der Shop-Seite mit einer Erfolgsmeldung.
Beispiel: "https://example.com/danke"
finalCancelRedirectUrl Optional
Wohin der Käufer nach einem Abbruch der Zahlung weitergeleitet wird. Ohne Angabe bleibt er auf der Shop-Seite.
Beispiel: "https://example.com/shop"
productVisibility Optional
Steuert, welche Produkte aus Ninox angezeigt werden. Im Modus blacklist werden alle Produkte angezeigt außer den gelisteten. Im Modus whitelist werden nur die gelisteten angezeigt. Die Werte sind die Ninox-Produkt-IDs.
Alle außer ID 5 anzeigen:
{ mode: "blacklist", values: ["5"] }

Nur ID 3 und 4 anzeigen:
{ mode: "whitelist", values: ["3", "4"] }

Alle anzeigen (Standard):
{ mode: "blacklist", values: [] }
AFF_MODE Optional
Schaltet den Shop in den AFF-Modus (Accelerated Free Fall). Dabei werden nur AFF-Gutscheine angezeigt, alle anderen Produkte werden ausgeblendet.
true = Nur AFF-Produkte  |  false = Normaler Shop (Standard)
showDedication Optional
Aktiviert oder deaktiviert die Widmungsfunktion direkt im Einbettungscode. Wird normalerweise über das Settings-JSON in Ninox gesteuert (Parameter DEDICATION). Der Ninox-Wert überschreibt diesen hier.
true = Widmung aktiv (Standard)  |  false = Widmung deaktiviert

🗄️ Einstellungen im Ninox Settings-JSON

Der Großteil der Shop-Konfiguration wird direkt in der Ninox-Datenbank gespeichert – als JSON-Datensatz in der Settings-Tabelle. Änderungen dort greifen ohne Code-Anpassung, sobald die Seite neu geladen wird.

💡 Die Parameter sind in Ninox nicht case-sensitiv – MAINCOLOR, MainColor und mainColor werden alle erkannt.

Datenquellen

ParameterBeschreibungBeispielwert
APP_KEYSicherheitsschlüssel für die Server-Kommunikation. Muss mit dem auf dem Server hinterlegten Wert übereinstimmen."mein-shop-key"
VOUCHERLISTNinox-Share-URL zur Produktliste. Falls angegeben, überschreibt dieser Wert die im Embed-Code hinterlegte jsonURL."https://share.ninox.com/..."

Preise & Wertgutscheine

ParameterBeschreibungBeispielwert
VOUCHER_MINMindestwert in Euro für Wertgutscheine mit frei wählbarem Betrag.10
VOUCHER_MAXHöchstwert in Euro für Wertgutscheine mit frei wählbarem Betrag.500
CURRENCYWährungssymbol, das bei allen Preisen angezeigt wird."€", "CHF", "$"

Design

ParameterBeschreibungBeispielwert
MAINCOLORPrimärfarbe aller Schaltflächen und Akzente im Shop. Hex-Farbcode. Hell- und Dunkel-Varianten werden automatisch daraus berechnet."#193459"

Sichtbarkeit & Funktionen

ParameterMögliche WerteBeschreibung
DEDICATIONtrue / falseAktiviert die persönliche Widmungsfunktion. Bei true erscheint unter jedem Produktbild der Widmungs-Banner. Vor dem Abschicken wird ein Hinweis angezeigt, wenn Produkte ohne Widmung im Warenkorb liegen.
SHOWUSERtrue / falseZeigt im Warenkorb ein Feld für den Namen der beschenkten Person an.
SHOWFILTERObjektSteuert die Produktfilter. Enthält die Felder useFilter und weightFilter (je true/false) um den Filter nach Verwendungszweck (Werktage/Sprungtage) und Zusatzgewicht ein- oder auszublenden.
SHIPPINGObjektKonfiguriert den Versandbereich. Enthält u. a. die Versandkosten für den Postversand.
ORDERPAYMENTObjektSteuert welche Zahlungsarten angeboten werden (Überweisung, PayPal, Stripe). Jede Methode kann einzeln ein- oder ausgeblendet werden.

Texte & rechtliche Hinweise

ParameterBeschreibungBeispielwert
CHECKBOXTEXT2Text für die erste Pflicht-Checkbox (AGB/Widerruf). HTML-Links möglich."Ich akzeptiere die AGB"
CHECKBOXTEXT3Text für die zweite Pflicht-Checkbox (Datenschutz). HTML-Links möglich."Ich habe die Datenschutzerklärung gelesen."

💳 Zahlungsarten

🏦 Überweisung
Klassische Banküberweisung. Bestellung wird sofort angelegt, Bankdaten erscheinen in der Bestellbestätigung. Kein zusätzlicher Account erforderlich.
🅿️ PayPal
Weiterleitung zu PayPal nach dem Bestellen. Nach erfolgter oder abgebrochener Zahlung automatische Rückkehr. PayPal-Business-Konto erforderlich.
💎 Stripe
Kreditkarte, SEPA-Lastschrift und Klarna-Sofortüberweisung über einen einzigen Anbieter. Der Zahlungsstatus in Ninox wird nach erfolgreicher Zahlung automatisch aktualisiert. Stripe-Konto erforderlich.
⚠️ Stripe-Konfiguration: Der öffentliche Stripe-Schlüssel (pk_live_... bzw. pk_test_...) muss im Einbettungscode hinterlegt werden. Niemals den geheimen Schlüssel (sk_...) verwenden – dieser gehört ausschließlich auf den Server.
📧 Bezahl-Link in der Eingangsbestätigung: Wenn eine Bestellung mit offener Zahlung (z. B. Stripe-Abbbruch) eingeht, enthält die Bestätigungs-E-Mail automatisch einen direkten Bezahl-Link. Sobald der Käufer nachträglich zahlt, wird der Status in Ninox aktualisiert.

⚖️ Rechtliche Links

Im Bestellformular muss der Käufer zwei Pflicht-Checkboxen bestätigen. Die verlinkten Dokumente sowie deren Texte werden über das Settings-JSON in Ninox konfiguriert.

DokumentKonfigurationPflicht?
AGB & WiderrufsbelehrungLink und Text über CHECKBOXTEXT2 im Settings-JSON. HTML-Markup erlaubt.✅ Ja
DatenschutzerklärungLink und Text über CHECKBOXTEXT3 im Settings-JSON. HTML-Markup erlaubt.✅ Ja
💡 Die Links können direkt auf bestehende Seiten der Website zeigen (z. B. /agb/, /datenschutz/) oder auf externe PDF-Dateien. Ohne beide Bestätigungen ist das Abschicken der Bestellung nicht möglich.

🔢 Produkt-Sortierung im Ninox-Backend

Die Reihenfolge der Produkte im Shop wird direkt in Ninox festgelegt – im Modul Preise unter dem Tab „Shop-Sortierung Gutscheine". Jede Karte entspricht einem Produkt. Die Nummer der Spalte bestimmt die Anzeigereihenfolge im Shop.

🖱️ So geht's: Karte per Drag & Drop in eine andere Spalte ziehen – die Nummer oben ist die neue Position im Shop. Nach dem Verschieben erscheint das Produkt sofort in der neuen Reihenfolge, wenn die Shop-Seite neu geladen wird.

📌 Wichtige Hinweise

🧪 Erst testen, dann live gehen
Stripe-Testmodus mit pk_test_... nutzen. Testkarten und Testzenarien sind in der Stripe-Dokumentation beschrieben. Erst nach erfolgreichem Test auf den Live-Key umstellen.
🔒 SSL-Verschlüsselung
Alle URLs müssen https:// verwenden – besonders wichtig für Seiten mit Zahlungsabwicklung. Ohne SSL funktioniert Stripe nicht und PayPal zeigt Warnungen.
💾 Entwurf-Speicherung
Warenkorb und Formulardaten werden automatisch im Browser-Speicher (localStorage) gesichert. Der Schlüssel ist pro Shop eindeutig (basiert auf dem APP_KEY), sodass mehrere Shops auf der gleichen Domain keine Daten überschreiben. Nach 24 Stunden oder nach erfolgreichem Abschicken der Bestellung wird der Entwurf automatisch gelöscht.
⚠️ Ninox-Share-URLs
Die Share-URLs für Settings und Produktliste müssen in Ninox als öffentlich freigegeben sein. Sie dürfen nicht ablaufen oder passwortgeschützt sein. Bei Änderungen in Ninox (z. B. neue Tabellen-ID) müssen die URLs im Embed-Code aktualisiert werden.
📱 Mobile-Test
Nach jeder Konfigurationsänderung auf einem echten Mobilgerät testen. Besonders bei Produktfiltern, der Widmungseingabe und der Zahlungsabwicklung kann das Verhalten auf kleinen Bildschirmen abweichen.
Schlagwörter , , , , , , ,