Stell dir vor, du betreibst ein Yogastudio. Deine Website ist seit zwei Jahren online – eine Freundin hat sie damals gebaut, und das Passwort musst du wahrscheinlich erst zurücksetzen. Jetzt hat dir jemand erzählt, dass ein „Jetzt buchen"-Button nur ein eingefügtes Code-Snippet entfernt ist.
Stimmt. Und du schaffst das in etwa 20 Minuten.
Das Wichtigste auf einen Blick:
- Jede Website – WordPress, Wix, Squarespace, reines HTML – kann heute noch einen funktionierenden „Jetzt buchen"-Button haben
- Setmore, Cal.com und Calendly bieten echte Gratistarifen ohne Zeitlimit
- Es gibt drei Widget-Stile; der schwebende Button ist für mobile Besucher die beste Wahl
- Du brauchst keinen Webentwickler, kein Plugin und keinerlei Programmierkenntnisse
In diesem Artikel
- Warum ein eingebettetes Buchungsformular besser ist als ein Link
- Drei Varianten: Inline, Popup oder schwebender Button
- Die besten kostenlosen Buchungstools im Vergleich
- So holst du dir deinen Einbettungscode
- Einfügen: 7 Plattformen erklärt
- Vor dem Start: 3-Minuten-Check auf dem Handy
- Wenn etwas nicht klappt: Schnelle Lösungen
- FAQ
Try this prompt⌘+Enterto launch
Warum ein eingebettetes Buchungsformular besser ist als ein Link
Die meisten Kleinunternehmer starten damit, einen Calendly-Link in ihre Instagram-Bio zu packen oder ihn im Footer der Website zu verstecken. Das funktioniert – bis es nicht mehr funktioniert.
Das Problem: Sobald Kundinnen und Kunden deine Website verlassen müssen, um einen Termin zu buchen, verlierst du einen Teil von ihnen. Der neue Tab lädt nicht schnell genug. Ein anderes Fenster lenkt ab. Sie sagen sich, sie kommen später wieder. Tun sie nicht.
Mehrere Buchungsplattformen haben Daten veröffentlicht, die einen 2- bis 3-fachen Anstieg abgeschlossener Buchungen zeigen, wenn der Kalender direkt auf der Unternehmenswebsite eingebettet ist – verglichen damit, Kunden auf eine externe Seite zu schicken. Sobald du das kurze Snippet deines Buchungstools eingefügt hast, läuft der gesamte Prozess auf deiner Website ab – keine Weiterleitungen, keine unnötigen Hürden.
Das ist besonders wichtig für mobile Besucher, die bei den meisten lokalen Dienstleistungsbetrieben die Mehrheit des Traffics ausmachen. Jeder zusätzliche Schritt weg von deiner Website sind Buchungen, die du einfach liegen lässt.
Drei Varianten: Inline, Popup oder schwebender Button
Bevor du einen Einbettungscode holst, entscheide dich für einen Stil, der zu deiner Website passt:
Inline-Widget – Der vollständige Buchungskalender erscheint direkt auf der Seite. Besucher sehen ihn sofort, ohne irgendetwas anklicken zu müssen. Am besten geeignet für: Betriebe, bei denen das Buchen der Hauptgrund für den Seitenbesuch ist (Massagepraxis, Nachhilfezentrum, Tattoostudio). Wird meist auf einer eigenen „Buchen"-Seite platziert.
Popup-Widget – Ein Button befindet sich auf deiner Seite; ein Klick öffnet den Kalender in einem Overlay-Fenster. Hält die Seiten übersichtlich. Am besten geeignet für: Betriebe, die zuerst Inhalte zeigen möchten – ein Restaurant mit seiner Speisekarte, ein Fotograf mit seinem Portfolio – bevor die Buchungsoption erscheint.
Schwebender Button – Ein dauerhafter „Jetzt buchen"-Button klebt an der unteren Ecke jeder Seite. Egal ob ein Besucher gerade deine „Über uns"-Seite liest oder durch deine Galerie scrollt – der Button ist immer sichtbar. Die beste Standardwahl für jedes mobilgeprägte Publikum, also für die meisten Dienstleistungsbetriebe.
Entscheide dich für eine Variante. Alle drei auf derselben Seite zu kombinieren erzeugt Unordnung und verwirrt deine Besucher.
Die besten kostenlosen Buchungstools im Vergleich
Alle fünf Tools unten haben echte Gratistarifen – keine Testversionen, kein „kostenlos mit Kreditkarte".
| Tool | Kostenloser Tarif enthält | Widget-Typen | Am besten für |
|---|---|---|---|
| Setmore | Unbegrenzte Termine, bis zu 4 Mitarbeiter, E-Mail-Erinnerungen | Inline, Popup, schwebend | Salons, Spas, Trainer, Nachhilfelehrer |
| Cal.com | Unbegrenzte Event-Typen, Kalender-Sync, Stripe-Zahlungen | Inline, Popup, schwebend | Technikaffine Betreiber, die volle Kontrolle wollen |
| Calendly | 1 Event-Typ, unbegrenzte Buchungen | Inline, Popup | Berater, Coaches, Solopreneure |
| TidyCal | Unbegrenzte Buchungen, 1 Kalenderverbindung | Inline (iframe) | Freelancer, einfache 1:1-Termine |
| Timify | Bis zu 5 Mitarbeiter, Basis-Buchungsseite | Inline, Popup | DACH-Betriebe mit Fokus auf europäischen Anbieter |
Meine ehrliche Empfehlung für den Einstieg: Setmore. Das kostenlose Kontingent ist 2026 das großzügigste – unbegrenzte Termine, bis zu vier Mitarbeiter, E-Mail-Erinnerungen, und es funktioniert reibungslos auf jedem Website-Baukasten. Kein Kleingedrucktes.
Cal.com ist eine starke Alternative, wenn dir Open-Source-Kontrolle wichtig ist und du einen etwas längeren Setup-Prozess nicht scheust. Calendly ist der bekannteste Name, auf dem kostenlosen Tarif aber schnell frustrierend – ein Event-Typ bedeutet, dass ein Friseurbetrieb nicht gleichzeitig Schnitt, Farbe und Styling separat anbieten kann, ohne zu zahlen.
Für Betriebe im DACH-Raum, die Wert auf DSGVO-Konformität ohne großen Aufwand legen, ist Timify (München) eine echte Alternative zu US-amerikanischen Diensten – der Anbieter hat seinen Sitz in der EU und speichert Daten entsprechend.
So holst du dir deinen Einbettungscode
Alle Tools generieren für dich ein kurzes HTML-Snippet. Hier findest du es bei den drei beliebtesten Optionen:
Setmore:
- Einloggen → Einstellungen → Website-Integration
- Widget-Stil wählen (Inline, Popup oder schwebender Button)
- Buttonfarbe an deine Website anpassen
- Code kopieren klicken – du bekommst ein kurzes Snippet
Calendly:
- Deinen Event-Typ öffnen → Teilen → Zur Website hinzufügen
- Inline, Popup-Text oder Popup-Widget wählen
- Code-Snippet kopieren
Cal.com:
- Deinen Event-Typ öffnen → Teilen → Einbetten
- Stil wählen, Farben anpassen → Snippet kopieren
Das Snippet sieht aus wie ein kurzer Block mit kryptisch wirkenden Zeichen. Lass dich davon nicht abschrecken – es ist nur Text, den du gleich an einer bestimmten Stelle einfügst.
Einfügen: 7 Plattformen erklärt
Try this prompt⌘+Enterto launch
WordPress – Öffne deine Seite, wechsle zum Code-Editor (oder füge im Gutenberg-Editor einen „Benutzerdefiniertes HTML"-Block hinzu) und füge das Snippet ein. Für den schwebenden Button: Design → Theme-Datei-Editor → footer.php – direkt vor </body> einfügen.
Wix – Ziehe ein Einbettungselement auf deine Seite, wähle „HTML-iframe" und füge das Snippet darin ein. Für den schwebenden Button: Einstellungen → Benutzerdefinierter Code → Code zu Seiten hinzufügen → Seitenende.
Squarespace – Füge einen Code-Block zu einer beliebigen Seite hinzu und füge dein Snippet ein. Für den schwebenden Button: Einstellungen → Erweitert → Code-Einschleusung → Fußzeile.
Webflow – Ziehe ein HTML-Einbettungselement auf die Seite und füge das Snippet ein. Für den schwebenden Button: Projekteinstellungen → Benutzerdefinierter Code → Footer-Code.
Reines HTML (die Seite, die ein Kumpel mal schnell zusammengeklickt hat) – Öffne die .html-Datei in einem beliebigen Texteditor und füge das Snippet dort ein, wo es erscheinen soll. Für den schwebenden Button: kurz vor </body> in jeder Seitendatei. Ein kostenloser Editor wie VS Code reicht völlig.
Shopify – Design → Code bearbeiten → theme.liquid öffnen → Snippet für den schwebenden Button direkt vor </body> einfügen. Für ein Inline-Widget auf einer Seite: einen benutzerdefinierten HTML-Abschnitt im Seiteninhalt hinzufügen.
Google Sites – Einfügen → Einbetten → „Per Code." Hinweis: Google Sites schränkt bestimmtes JavaScript ein – Cal.coms iframe-Option funktioniert hier zuverlässiger als JS-basierte Einbettungen.
Falls deine Website auf einer Plattform läuft, die hier nicht aufgeführt ist: Die Logik ist überall dieselbe. Suche nach der Möglichkeit, benutzerdefiniertes HTML oder einen Code-Block hinzuzufügen, füge dein Snippet ein und speichere. Jede größere Plattform bietet das.
Vor dem Start: 3-Minuten-Check auf dem Handy
Hol dein Smartphone und geh diese drei Punkte durch, bevor du den Widget ankündigst:
1. Lädt der Kalender auf dem Handy? Öffne deine Seite im Browser deines Smartphones. Erscheint er nicht innerhalb von 3 Sekunden, wechsle zur iframe-Version deines Buchungstools statt zum JavaScript-Embed – diese ist in der Regel kompatibler mit älteren Geräten.
2. Ist der Button sichtbar, ohne zu scrollen? Schwebende Buttons lösen das automatisch. Wenn du ein Inline-Widget verwendet hast, stelle sicher, dass es auf dem Handy „above the fold" sitzt – Besucher sollten nicht erst scrollen müssen, um es zu entdecken. Verschiebe es bei Bedarf weiter nach oben.
3. Kannst du eine Testbuchung komplett durchführen? Mach es auf deinem Smartphone durch – Service wählen, Uhrzeit aussuchen, Namen eingeben, bestätigen. Klappt etwas nicht, überprüfe, ob die mobilen Einstellungen deines Buchungstools aktiviert sind. Die meisten Tools haben einen Schalter für die mobiloptimierte Ansicht unter den Anzeigeeinstellungen.
Drei Minuten. Erledige das, bevor du Kunden sagst, dass der Button live ist.
Wenn etwas nicht klappt: Schnelle Lösungen
Leeres weißes Feld statt Widget – Die Sicherheitseinstellungen deiner Website blockieren die Einbettung. Versuche, von der iframe-Version auf das JavaScript-Embed zu wechseln (oder umgekehrt). Wenn du ein verwaltetes Hosting-Paket nutzt, wende dich an den Support und bitte darum, Einbettungen aus der Domain deines Buchungstools zuzulassen.
Buttonfarbe passt nicht zur Website – Geh zurück zu den Einbettungseinstellungen in deinem Buchungstool (Setmore und Calendly haben beide visuelle Farbwähler) und passe die Farbe an, bevor du den Code erneut kopierst. CSS musst du dafür nicht anfassen.
Funktioniert auf dem Desktop, auf dem Handy unsichtbar – Manche WordPress-Themes oder Page-Builder deaktivieren benutzerdefinierten Code auf mobilen Geräten separat vom Desktop. Überprüfe die mobilen Einstellungen deines Themes, oder verlinke auf mobilen Geräten direkt auf die gehostete Buchungsseite deines Tools statt auf das eingebettete Widget.
Buchungen tauchen nicht im Kalender auf – Du hast wahrscheinlich den Kalender-Sync-Schritt beim Einrichten übersprungen. Geh zu Einstellungen → Integrationen in deinem Buchungstool und verbinde deinen Google- oder Outlook-Kalender. Sowohl Setmore als auch Calendly führen dich in etwa 60 Sekunden durch diesen Schritt.
Wenn du das Rätsel „Einbettung in bestehende Website" lieber komplett überspringen möchtest: Fardino baut dir eine Website, bei der die Buchungsfunktion von Anfang an integriert ist – beschreib dein Unternehmen, und du bekommst eine fertige Website mit vorkonfiguriertem Buchungsbereich.
Für einen umfassenderen Überblick über den Aufbau einer Kleinunternehmer-Website findest du alles im Small Business Website Playbook – von Templates bis zum Launch. Für Dienstleistungsbetriebe gehen unsere Guides zu Friseursalon-Websites mit Buchungsfunktion und Websites für Personal Trainer und Yogastudios tief in die Buchungseinrichtung für diese konkreten Kontexte.
Du willst den schnellsten Weg zu deinem ersten Buchungswidget? Starte mit Online-Buchung in 15 Minuten einrichten – Tool-Auswahl und Grundeinrichtung in einem.
Häufige Fragen
Wie füge ich kostenlos einen Online-Buchungswidget zu meiner Website hinzu?
Registriere dich bei Setmore, Calendly, Cal.com oder TidyCal – alle haben Gratistarifen ohne Ablaufdatum. Geh in deinem Account zu den Einbettungs- oder Widget-Einstellungen, kopiere das Code-Snippet und füge es in das HTML oder den Seiteneditor deiner Website ein. Die meisten Website-Baukästen haben ein „Benutzerdefiniertes HTML"- oder „Code-Block"-Element, das das Einfügen zum Kinderspiel macht.
Kann ich einen Buchungswidget auf einer Website einbetten, die ich nicht selbst gebaut habe?
Ja. Solange du Zugang zum Backend hast – selbst wenn es nur das Bearbeiten einer einzelnen Seite ist – kannst du das Widget-Snippet einfügen. Wer die Website gebaut hat, spielt keine Rolle. Die einzige echte Ausnahme sind vollständig gesperrte Plattformen wie Linktree oder Facebook-Seiten, bei denen du keinen benutzerdefinierten Code hinzufügen kannst; in diesen Fällen verlinkst du stattdessen direkt auf deine Buchungsseite.
Was ist 2026 der einfachste kostenlose Buchungswidget zum Einbetten?
Setmore ist für technisch weniger versierte Nutzer am einfachsten: visuelle Einrichtung, Ein-Klick-Kopieren, und es funktioniert auf jedem gängigen Baukasten. Calendly ist bekannter, aber das Ein-Event-Typ-Limit des kostenlosen Tarifs frustriert die meisten Dienstleistungsbetriebe schnell.
Was ist der Unterschied zwischen einem Inline- und einem Popup-Buchungswidget?
Inline zeigt den vollständigen Kalender direkt auf deiner Seite – kein Klick nötig. Popup hält deine Seite übersichtlicher und zeigt den Kalender, wenn jemand auf deinen „Jetzt buchen"-Button klickt. Der schwebende Button ist ein dritter Stil: ein dauerhafter Button, der in der Ecke sichtbar bleibt, während Besucher durch jede Seite deiner Website scrollen. Für die meisten mobilgeprägten Dienstleistungsbetriebe ist schwebend die beste Standardwahl.
Wie füge ich einen Buchungswidget zu einer reinen HTML-Website hinzu?
Öffne deine .html-Datei in einem beliebigen Texteditor und füge das Snippet aus deinem Buchungstool dort ein, wo es erscheinen soll. Für einen schwebenden Button: direkt vor dem </body>-Tag einfügen. Kein Framework, keine Plugins, keine besonderen Kenntnisse nötig – reines Text-Einfügen.
Geschrieben vom 0xMinds-Team – wir testen KI-Tools, damit du es nicht musst. Website mit KI bauen →
