Deine Website. Mit Shopvento verbunden.
Mit @shopvento/ui baust Du Buchungen und Verkauf in Deine eigene React-Website ein. Du bestimmst den Auftritt. Die Komponenten sprechen mit der Shopvento-API.
Vom freien Platz bis zum Kundenkonto
Veranstaltungen und Termine
Zeige verfügbare Termine und freie Plätze. Gäste wählen ihren Termin, buchen Plätze und lösen Gutscheine ein.
Gutscheine
Verkaufe Wert- und Veranstaltungsgutscheine. Auch Mehrzweckgutscheine und ihre Einlösung bleiben mit der steuerlichen Behandlung im Backoffice verbunden.
Warenkorb und Checkout
Verbinde Angebote mit einem gemeinsamen Warenkorb. Preise, Verfügbarkeit und Zahlungen prüft die API.
Kundenkonto
Gib Deinen Gästen Zugang zu Anmeldung, Registrierung und ihren Buchungen und Bestellungen auf Deiner Website.
Eine API für Deine Abläufe
Die Komponenten laden Angebote und Termine über die öffentliche Shopvento-API. Buchungen und Bestellungen gehen an dasselbe Backoffice, in dem Dein Team auch Gutscheine und die Kassenanbindung verwaltet.
Du hinterlegst die Adresse Deiner Shopvento-Installation. Für den Zugriff wird Deine Website als erlaubte Adresse eingerichtet. Im Kundenkonto verwendet die Integration die Anmeldung des jeweiligen Gastes.
Verfügbare Plätze, Gutscheinwerte und Buchungsregeln kommen aus dem Backend. So gelten für Deine Website und den fertigen Shop dieselben Regeln.
Eine Buchung einbauen
TastingBooking zeigt die Termin- und Platzwahl für eine Veranstaltung. Ersetze die Beispieladresse, Veranstaltungs- und Standortnummer durch Deine Werte. Für Gastbuchungen hinterlegst Du Deinen öffentlichen Turnstile-Schlüssel.
"use client";
import { TastingBooking } from "@shopvento/ui";
import "@shopvento/ui/styles.css";
export default function EventBooking() {
return (
<TastingBooking
baseUrl="https://deinbetrieb.shopvento.app"
tastingId={123}
locationId={3}
turnstileSiteKey="DEIN_OEFFENTLICHER_TURNSTILE_SCHLUESSEL"
termsUrl="/agb"
privacyUrl="/datenschutz"
/>
);
}In Next.js lädst Du die CSS-Datei einmal im Layout und setzt die Buchung in eine Client-Komponente. Die Adressen für AGB und Datenschutz führen zu Deinen eigenen rechtlichen Seiten.
Passt sich Deiner Gestaltung an
Über CSS-Variablen legst Du Farben, Schrift, Abstände und Rundungen fest. Du kannst ganze Abläufe übernehmen oder einzelne Komponenten in Dein Layout einfügen. Deine Website behält ihre Navigation und ihre Seitenstruktur.
Bald auf GitHub
Wir veröffentlichen @shopvento/ui als Open Source in unserer GitHub-Organisation shopventoapp. Dort findest Du dann den Quellcode, die Dokumentation und den Link zum npm-Paket.
Was möchtest Du in Deine Website einbauen?
Zeig uns Deine Website und die Abläufe, die Du verbinden möchtest.