Website für Heaven Studio Stuttgart: Wellness, Massage

+49 172 6067457 Kostenloses Erstgespräch

Website mit Online-Buchung für ein Massagestudio: Heaven Studio aus Stuttgart

Website / Wellness, Massage, Stuttgart

Live ansehen

Kunde: Heaven Studio Stuttgart
Branche: Wellness, Massage, Stuttgart
Live: www.heaven-studio.de
Leistungen: Konzept, Bildwelt und Webdesign mit freier Hand
Design und erste Version in Framer
Neubau in Next.js als statischer Export
Eigenes Buchungssystem mit Dashboard
Online-Zahlung und Gutscheine über Stripe
Kontaktformular und Cookie-Banner ohne Tracking
Hosting auf Hostinger
Technik: Framer (erste Version)
Next.js 15 (statischer Export)
TypeScript
Lenis
PHP (Buchung und Kontaktformular)
Stripe
Hostinger
Google Workspace (E-Mail-Versand)

So entsteht der Preis

01 / Auf einen Blick

Ausgangslage
Ein Massagestudio, dessen Termine zuerst über Instagram-Nachrichten liefen und später über ein eingebettetes Fremdtool.
Lösung
Erst eine Framer-Seite als Scroll-Story, dann ein Neubau in Next.js mit eigener Buchung, Gutscheinen und Dashboard auf dem eigenen Hosting.
Ergebnis
Über 140 Buchungen in einem halben Jahr. Gäste buchen in wenigen Schritten und bekommen sofort eine Bestätigung, das Studio verwaltet alle Termine im eigenen Dashboard.

über 140Buchungen im eigenen Buchungstool in einem halben Jahr
2 Wochenbis zur ersten Version in Framer
13Seiten im Next.js-Neubau

02 / Ausgangslage

Wo das Projekt stand.

Wer eine Massage sucht, entscheidet nach Gefühl. Wirkt das Studio ruhig, gepflegt und seriös? Ein Instagram-Profil allein beantwortet das selten. Dazu kommt der Aufwand: Termine per Direktnachricht kosten beide Seiten Zeit und gehen leicht unter.

Heaven Studio hatte zunächst keine Website. Beim Design hatten wir komplett freie Hand. Gestaltung und erste Version entstanden direkt in Framer, in zwei Wochen von der Idee bis live, mit Calendly für die Buchung. Im nächsten Schritt haben wir unsere Seite mit unverändertem Design auf Next.js umgezogen. Damit ließ sich ein eigenes Buchungssystem direkt auf dem Hosting des Studios ergänzen, mit Gutscheinen, Online-Zahlung und Rabattcodes.

03 / Die Lösung

Was wir gebaut haben, und warum.

Erklärung wählenEinfach gesagtFür Leute vom Fach

01
Eine Scroll-Story in fünf Kapiteln
Auf den Einstieg „Heaven Studio. Professional Aesthetic Massage Experience“ folgen fünf Kapitel: Leistungen, About, Preise, Termin buchen und Kontakt. Jedes füllt den Bildschirm mit einem Foto aus dem Studio und führt per Klick auf die passende Unterseite.
Bildschirmfüllende Panels mit einer Kapitelüberschrift, die beim Scrollen stehen bleibt. Für das Handy gibt es eigene Bildausschnitte. Lenis sorgt für weiches Scrollen. Die Bildwelt ist dunkel, mit violettem und warmem Licht, und zeigt Lounge, Liege und Details aus dem Studio.
- Ein Kapitel pro Bildschirm
- Jedes Kapitel führt auf seine Unterseite
- Eigene Bildausschnitte für das Handy
02
Unser Design, jetzt auf eigenem Code
Die Seite sieht aus wie vorher, läuft aber auf eigenem Code direkt beim Hosting des Studios. Kleine Fehler der ersten Version haben wir dabei behoben, etwa einen falschen Instagram-Link.
Next.js 15 als statischer Export, Layout-Wechsel bei 1200 und 810 Pixeln. Bilder, Videos und Schriften liegen selbst gehostet auf dem Server. 13 Seiten: Start, Klassisch, Sport, Ayurveda, Specials, About, Preise, Kontakt, drei Rechtstexte sowie Danke- und Coming-Soon-Seite. Jede Seite hat einen eigenen Seitentitel statt überall nur „Heaven Studio“.
- 13 Seiten als statischer Export
- Link- und Tippfehler der ersten Version behoben
- Eigene Seitentitel für jede Seite
03
Eigene Buchung statt Fremdtool
Gäste wählen Behandlung, Tag und Uhrzeit direkt auf der Seite und bekommen sofort eine Bestätigung per E-Mail. Einen Tag vorher kommt eine Erinnerung. Absagen können sie selbst über einen Link.
Buchungsstrecke auf allen Seiten mit Terminbereich, dahinter ein PHP-Backend auf dem Hosting des Studios, Versand über Google Workspace. Ein Cronjob verschickt Erinnerungen 24 Stunden vorher und eine Danke-Mail nach dem Termin. Gastdaten werden nach 24 Monaten anonymisiert. Die bisherigen Termine aus Calendly wurden übernommen.
- Buchung ohne Seitenwechsel
- Erinnerung 24 Stunden vorher
- Termine aus Calendly übernommen
04
Dashboard, Gutscheine und Online-Zahlung
Das Studio sieht alle Termine in einer Wochenansicht. Urlaub oder Pausen trägt es selbst ein, dann ist die Zeit online sofort gesperrt. Gutscheine lassen sich direkt kaufen und kommen als PDF per E-Mail.
Dashboard mit Kalender, Sperrzeiten und manueller Terminverwaltung, bei der Gäste automatisch informiert werden. Rabattcodes lassen sich als Link teilen, Gutscheine bekommen einen eigenen Code. Zahlung über Stripe: Gäste wählen beim Buchen zwischen vor Ort und online. Bei einer Absage bis 24 Stunden vorher wird automatisch erstattet.
- Zeiten sperren ohne externen Kalender
- Gutschein als PDF mit eigenem Code
- Rabattcodes als Link für WhatsApp oder Instagram
- Vor Ort oder online zahlen
05
Datenschutz ohne Tracking
Die Seite setzt keine Tracking- oder Werbe-Cookies. Google-Bewertungen mit Profilbildern lädt sie erst, wenn Gäste zustimmen. Das Kontaktformular läuft über den eigenen Server.
Eigenes Cookie-Banner mit Einstellungen und versionierter Einwilligung. Profilbilder zu Google-Bewertungen kommen erst nach Zustimmung von Google-Servern. Das Kontaktformular sendet per PHP, mit Honeypot gegen Spam. Das Wunschfeld der Buchung weist darauf hin, gesundheitliche Themen vor Ort zu besprechen.
- Keine Tracking-Cookies
- Google-Bilder erst nach Einwilligung
- Kontaktformular mit Spamschutz

04 / Das Ergebnis

über 140Buchungen im eigenen Buchungstool in einem halben Jahr

Heaven Studio hat eine Website, die wie ein ruhiger Kurzfilm wirkt, und dahinter ein eigenes Buchungssystem. Gäste buchen, zahlen und kaufen Gutscheine direkt auf heaven-studio.de. Das Studio verwaltet Termine, Sperrzeiten und Rabattcodes selbst, ohne externen Buchungsanbieter. In einem halben Jahr zeigt das Buchungstool über 140 Buchungen.

Über 140 Buchungen in einem halben Jahr
Erste Version in Framer nach 2 Wochen live
Neubau in Next.js mit 13 Seiten
Eigene Buchung mit Bestätigung und Erinnerung
Gutscheine und Online-Zahlung über Stripe

05 / Kurz erklärt

Scroll-Story: Eine Seite, die beim Scrollen wie ein kurzer Film Kapitel für Kapitel erzählt.
Statischer Export: Die Website wird vorab in fertige Dateien übersetzt. Der Server liefert sie nur aus, das ist schnell und robust.
Buchungsstrecke: Die Schritte von der Wahl der Behandlung bis zur Bestätigung, direkt auf der Website.
Stripe: Ein Zahlungsdienst für Karte, Apple Pay und Google Pay. Das Studio bekommt das Geld, ohne Kartendaten selbst zu speichern.

Fragen, die dazu oft kommen.

Brauche ich als Massagestudio eine Website, wenn Instagram gut läuft?

Ja, sobald Termine Zeit kosten. Eine eigene Seite mit Online-Buchung nimmt Ihnen die Nachrichten ab und wird auch bei Google gefunden.

Calendly oder eigenes Buchungssystem: Was passt zu meinem Studio?

Ein eingebettetes Tool ist schnell eingerichtet und reicht für den Start. Ein eigenes System lohnt sich, wenn Gutscheine, Rabattcodes, Online-Zahlung und Sperrzeiten an einer Stelle laufen sollen.

Kann ich meine Framer-Website später in Code umziehen?

Ja. Bei Heaven Studio haben wir die von uns gestaltete Seite mit unverändertem Design auf Next.js umgezogen. Die eigene Buchung kam danach dazu.

Was kostet eine Website mit Online-Terminbuchung?

Der Preis richtet sich vor allem nach Bildwelt, Animationen und Buchungsfunktionen. Sie erhalten einen Festpreis, einen Werktag nach dem Erstgespräch.

Ähnliche Projekte