Drei Wege, denselben Termin zu buchen.
Alle drei lesen die freien Zeiten über die Calendly REST API und rendern sie in unserem eigenen Design. Die Slots unten sind Mockdaten in exakt der Struktur, die /event_type_available_times zurückgibt.
Die Prompt-Bar klappt zum Kalender auf.
Der Abschluss-CTA bleibt genau die Bar, die auf allen Seiten steht. Nur klappt sie beim Klick nicht in einen fremden Tab weg, sondern nach unten auf. Chat-first bis zum Schluss, kein Bruch in der Bildsprache.
Die nächsten fünf Termine, ohne Kalenderraster.
Niemand will ein Raster durchsuchen, die meisten nehmen ohnehin den erstbesten passenden Slot. Also zeigen wir gar keinen Kalender, sondern fünf Zeilen in Alltagssprache: morgen 14:00, Donnerstag 09:30. Radikal kurz, und der Mensch dahinter steht daneben.
Was in den 30 Minuten passiert
Wir zeigen hermine.ai live an einer Aufgabe aus Ihrem Haus. Danach wissen Sie, ob es passt.
Die ganze Woche auf einen Blick.
Wenn Auswahl das Argument ist: sieben Spalten, alle Zeiten sichtbar, im dunklen Tech-Panel. Zeigt nebenbei, dass wirklich Termine frei sind, was ein leerer Kalender-Button nie schafft.
Die Datenquelle ist bei allen dreien dieselbe.
Ein Route Handler holt die Slots serverseitig mit dem Personal Access Token, cached fünf Minuten und liefert nur noch Uhrzeiten aus. Das Token verlässt nie den Server, im Browser landet kein Calendly-Skript, solange niemand bucht. Damit ist die Seite ohne Consent-Banner sauber.
// src/app/api/booking/slots/route.ts const res = await fetch( `https://api.calendly.com/event_type_available_times?event_type=${TYPE}&start_time=${from}&end_time=${to}`, { headers: { Authorization: `Bearer ${process.env.CALENDLY_API_TOKEN}` }, next: { revalidate: 300 } }, ) // -> [{ status: 'available', start_time: '2026-08-07T12:00:00Z', scheduling_url: '…' }, …]