Einleitung: Automatisieren Sie Ihre Terminplanung wie ein Profi
Die manuelle Verwaltung von Terminen per Telefon oder E-Mail ist ein echter Zeitfresser. Sie ist nicht nur anfällig für Doppelbuchungen und menschliche Fehler, sondern schränkt auch Ihre Erreichbarkeit ein – denn wer kann schon rund um die Uhr Anrufe entgegennehmen? In der heutigen digitalen Welt erwarten Kunden sofortige und unkomplizierte Lösungen.
Hier kommt die leistungsstarke Kombination aus WordPress, dem visuellen Page-Builder Elementor und dem spezialisierten Buchungsplugin Bookly ins Spiel. Gemeinsam bilden sie ein unschlagbares Team, um Ihre Terminplanung vollständig zu automatisieren. Dieser Artikel ist Ihre detaillierte Schritt-für-Schritt-Anleitung, mit der Sie ein professionelles und benutzerfreundliches Online-Buchungssystem auf Ihrer mit Elementor erstellten Website installieren, konfigurieren und perfekt an Ihr Markendesign anpassen.
Kurzüberblick: Bookly Free vs. Bookly PRO
- Bookly Free: Die kostenlose Version ist der perfekte Einstiegspunkt. Sie eignet sich hervorragend für Einzelunternehmer oder kleine Betriebe mit nur einem Dienstleister und einem unkomplizierten Angebot an Dienstleistungen.
- Bookly PRO: Dieses Add-on ist unverzichtbar für professionelle und wachsende Unternehmen. Es schaltet entscheidende Funktionen frei, darunter die Verwaltung mehrerer Mitarbeiter, die Annahme von Online-Zahlungen über Stripe oder PayPal, die automatische Synchronisation mit dem Google Kalender und – für uns besonders wichtig – die dedizierten Elementor-Widgets, die die Integration zum Kinderspiel machen.
Vorbereitung: Was Sie für den Start benötigen
Bevor wir in die Details eintauchen, stellen Sie sicher, dass Sie die folgenden Grundlagen parat haben:
- Eine aktive WordPress-Installation auf Ihrem Webserver.
- Den Elementor Website Builder. Die kostenlose Version, die im WordPress-Verzeichnis verfügbar ist, ist für den Anfang völlig ausreichend.
- Das Plugin „Booking Plugin – Bookly“ (die kostenlose Basisversion) als Grundlage.
- Optional, aber für den vollen Funktionsumfang und die beste Elementor-Integration dringend empfohlen: Das kostenpflichtige Add-on „Bookly PRO“.
Schritt 1: Die Installation der notwendigen Plugins
Die Basis unseres Systems bilden drei Komponenten, die wir nun installieren.
Bookly (Basisversion) aus dem WordPress-Verzeichnis installieren
- Navigieren Sie in Ihrem WordPress-Dashboard zu Plugins > Installieren.
- Geben Sie in das Suchfeld „Bookly“ ein.
- Suchen Sie das Plugin mit dem Namen „Booking Plugin – Bookly“ und klicken Sie auf Jetzt installieren und anschließend auf Aktivieren.
Bookly PRO installieren (Optional)
Bookly PRO ist ein Add-on, das die Funktionalität der kostenlosen Version erweitert. Sie erwerben es typischerweise als ZIP-Datei über Plattformen wie CodeCanyon.
- Navigieren Sie im Dashboard zu Plugins > Installieren.
- Klicken Sie oben auf den Button Plugin hochladen.
- Wählen Sie die erworbene ZIP-Datei von Ihrem Computer aus und laden Sie sie hoch.
- Nach der Installation klicken Sie auf Aktivieren.
Wichtiger Hinweis: Bookly PRO funktioniert nicht ohne die kostenlose Basisversion. Beide Plugins müssen stets gleichzeitig installiert und aktiviert sein.
Elementor installieren
Falls Sie Elementor noch nicht nutzen, ist die Installation ebenso einfach:
- Folgen Sie dem gleichen Prozess wie bei der kostenlosen Bookly-Version. Gehen Sie zu Plugins > Installieren.
- Suchen Sie nach „Elementor Website Builder“.
- Klicken Sie auf Jetzt installieren und Aktivieren.
Schritt 2: Grundkonfiguration in Bookly – Das Fundament Ihrer Dienstleistungen
Nach der Installation schaffen wir die inhaltliche Grundlage für Ihr Buchungssystem: Ihre Mitarbeiter, Ihre Dienstleistungen und Ihre Geschäftszeiten.
Mitarbeiter anlegen (Ihre Dienstleister)
Jede Person, die buchbare Dienstleistungen anbietet, muss als Mitarbeiter angelegt werden.
- Gehen Sie im WordPress-Menü zu Bookly > Mitarbeiter und klicken Sie auf Mitarbeiter hinzufügen.
- Füllen Sie die wichtigen Felder aus:
- Name: Der vollständige Name des Dienstleisters, wie er für Kunden sichtbar sein soll.
- WordPress-Benutzer: (Optional) Verknüpfen Sie den Mitarbeiter mit einem WordPress-Benutzerkonto. Dadurch kann sich diese Person einloggen und nur ihren eigenen Terminkalender einsehen und verwalten.
- Dienste: Weisen Sie hier die spezifischen Dienstleistungen zu, die dieser Mitarbeiter anbietet.
- Arbeitszeiten & Freie Tage: Dies ist das Herzstück der Verfügbarkeitsplanung. Legen Sie hier exakte Arbeitszeiten für jeden Wochentag fest, definieren Sie Pausen (z.B. Mittagspause) und tragen Sie geplante Abwesenheiten wie Urlaub oder Feiertage ein.
Dienste erstellen (Ihre buchbaren Angebote)
Definieren Sie nun die konkreten Leistungen, die Ihre Kunden buchen können.
- Navigieren Sie zu Bookly > Dienste und klicken Sie auf Dienst hinzufügen.
- Konfigurieren Sie die Details Ihrer Leistung:
- Titel: Ein klarer und verständlicher Name für den Service (z.B. „Erstberatung Online“, „Haarschnitt Herren“, „Physiotherapie 30 Min.“).
- Kategorie: Erstellen Sie Kategorien (z.B. „Friseurleistungen“, „Beratung“), um Ihre Angebote bei einer großen Auswahl übersichtlich zu gruppieren.
- Preis & Dauer: Legen Sie fest, wie viel der Termin kostet und wie lange er dauert.
- Pufferzeit: Eine extrem nützliche Funktion. Definieren Sie eine Zeitspanne, die vor und/oder nach einem Termin automatisch blockiert wird, z.B. für die Vor- und Nachbereitung oder den Raumwechsel.
- Mitarbeiter: Weisen Sie die Mitarbeiter zu, die qualifiziert sind, diesen spezifischen Dienst durchzuführen.
Allgemeine Einstellungen anpassen
Werfen Sie einen Blick in die globalen Einstellungen, um das Systemverhalten zu justieren.
- Gehen Sie zu Bookly > Einstellungen.
- Überprüfen Sie diese wichtigen Optionen:
- Allgemein: Die Zeitschlitzlänge bestimmt das Raster, in dem Termine angeboten werden (z.B. alle 15 Minuten). Die Mindestvorlaufzeit für Buchung verhindert, dass Kunden Termine zu kurzfristig buchen (z.B. erst in 2 Stunden).
- Geschäftszeiten: Legen Sie hier die allgemeinen Öffnungszeiten Ihres Unternehmens fest. Diese dienen als Standard, falls bei einem Mitarbeiter keine abweichenden Zeiten hinterlegt sind.
- Zahlungen (PRO): Wenn Sie Bookly PRO nutzen, können Sie hier Online-Zahlungsgateways wie Stripe oder PayPal aktivieren und die entsprechenden API-Schlüssel hinterlegen.
- Google Kalender (PRO): Richten Sie hier die 2-Wege-Synchronisation ein. Buchungen aus Bookly erscheinen im Google Kalender des Mitarbeiters und im Google Kalender eingetragene Termine blockieren die Verfügbarkeit in Bookly.
Schritt 3: Das Buchungsformular mit Elementor auf Ihrer Seite einbinden
Jetzt ist es an der Zeit, Ihr konfiguriertes Buchungsformular für Ihre Kunden sichtbar zu machen.
Methode 1: Der universelle Weg mit dem Shortcode-Widget (Für Bookly Free & PRO)
Diese Methode funktioniert immer und gibt Ihnen durch kleine Anpassungen viel Kontrolle.
- Öffnen Sie eine bestehende Seite oder erstellen Sie eine neue und bearbeiten Sie diese mit Elementor.
- Suchen Sie im Widget-Panel auf der linken Seite nach dem Widget „Shortcode“ und ziehen Sie es per Drag-and-drop an die gewünschte Stelle auf Ihrer Seite.
- Fügen Sie in das Textfeld des Widgets den Basis-Shortcode ein:
Shortcode-Anpassungen für spezifische Anwendungsfälle:
Sie können den Shortcode mit Attributen erweitern, um das Formular vorauszufüllen oder Schritte zu überspringen:
- Einen bestimmten Dienst vorauswählen:
(Die ID des Dienstes finden Sie in der Dienst-Übersicht in Bookly).
- Einen Mitarbeiter vorauswählen:
(Die ID finden Sie in der Mitarbeiter-Übersicht).
- Auswahlschritte ausblenden:
(Perfekt, wenn Sie eine eigene Seite für einen bestimmten Service haben und der Kunde direkt die Zeit auswählen soll).
Methode 2: Die komfortable Lösung mit den Bookly PRO Widgets
Wenn Sie Bookly PRO installiert haben, ist der Prozess noch einfacher und intuitiver.
- Öffnen Sie die gewünschte Seite mit dem Elementor-Editor.
- Scrollen Sie im Widget-Panel nach unten zur Kategorie „Bookly“ oder suchen Sie direkt nach „Bookly“.
- Ziehen Sie das Widget „Bookly – Booking Form“ auf Ihre Seite.
- Anstatt mit Shortcode-Attributen zu arbeiten, nutzen Sie nun die übersichtlichen Widget-Einstellungen in der linken Elementor-Seitenleiste. Hier können Sie per Dropdown-Menü oder einfachen Checkboxen Dienste, Mitarbeiter oder Kategorien vorauswählen und Felder ausblenden – ganz ohne Code und Rätselraten.
Schritt 4: Design und Optik – Passen Sie das Formular an Ihre Marke an
Ein nahtlos integriertes Formular schafft Vertrauen. Wir nutzen eine Kombination aus Bookly-Einstellungen und der Power von Elementor.
Anpassungen direkt im Bookly-Menü
Globale Design-Anpassungen nehmen Sie direkt in Bookly vor.
- Navigieren Sie zu Bookly > Erscheinungsbild.
- Texte anpassen: Hier können Sie die Beschriftungen jedes Schrittes und jedes Buttons ändern. Statt „Dienst“ könnten Sie zum Beispiel „Wählen Sie Ihre Behandlung“ schreiben.
- Farben ändern: Passen Sie die Primärfarben des Fortschrittsbalkens und der Buttons an Ihr Corporate Design an.
- Felder verwalten: Im Schritt „Details“ können Sie festlegen, welche Kundeninformationen abgefragt werden (Telefon, E-Mail, Name), ob diese Pflichtfelder sind und in welcher Reihenfolge sie erscheinen.
Feinschliff mit den Styling-Optionen von Elementor
Für das Layout und die Einbettung in Ihr Seitendesign ist Elementor das Werkzeug der Wahl.
- Klicken Sie in Elementor den übergeordneten Container an, in dem sich Ihr Bookly-Formular (bzw. der Shortcode) befindet – also entweder die Spalte oder den gesamten Abschnitt.
- Wechseln Sie in der linken Seitenleiste zu den Reitern Stil und Erweitert:
- Hintergrund: Geben Sie dem Abschnitt eine dezente Hintergrundfarbe, um das Buchungsformular visuell vom Rest der Seite abzuheben.
- Abstand: Erhöhen Sie den Innenabstand (Padding), um dem Formular mehr „Luft zum Atmen“ zu geben und es nicht an den Rändern kleben zu lassen.
- Rahmen & Schatten: Fügen Sie einen feinen Rahmen und einen leichten Box Shadow (Schlagschatten) hinzu. Das verleiht dem Formular eine moderne Tiefe und lässt es auf der Seite schweben.
Schritt 5: Der letzte Schliff – Automatische Benachrichtigungen einrichten
Ein automatisiertes Buchungssystem lebt von professioneller Kommunikation. Bookly nimmt Ihnen auch diese Arbeit ab.
Professionelle Kommunikation automatisieren
- Navigieren Sie zu Bookly > E-Mail-Benachrichtigungen. Wenn Sie Bookly PRO nutzen, finden Sie hier auch den Punkt SMS-Benachrichtigungen.
- Vorlagen anpassen: Bookly bietet eine Vielzahl von Vorlagen für jede erdenkliche Aktion: neue Buchung, ausstehende Genehmigung, Terminerinnerung, Terminänderung, Stornierung etc. Es gibt jeweils eine Vorlage für den Kunden und eine für den zuständigen Mitarbeiter. Gehen Sie die wichtigsten durch und passen Sie den Wortlaut an Ihre Unternehmenssprache an.
- Platzhalter (Placeholders) nutzen: Die wahre Magie liegt in den Platzhaltern. Dies sind dynamische Codes, die beim Versand der Nachricht automatisch durch die jeweiligen Termindetails ersetzt werden. Nutzen Sie Codes wie {client_name}, {service_name}, {appointment_date}, {staff_name} und den wichtigen {cancellation_link}, um hochgradig personalisierte, informative und nützliche Nachrichten zu erstellen.
Fazit: Ihr Online-Buchungssystem ist einsatzbereit
Herzlichen Glückwunsch! Sie haben die fünf Kernschritte erfolgreich durchlaufen: die Installation der Plugins, die Grundkonfiguration Ihrer Dienste und Mitarbeiter, die nahtlose Integration in Ihre Elementor-Seite, das visuelle Styling für ein professionelles Erscheinungsbild und die Einrichtung automatischer Benachrichtigungen.
Die Kombination aus der Flexibilität von Elementor und der spezialisierten Power von Bookly bietet eine erstklassige und skalierbare Lösung für praktisch jede dienstleistungsorientierte Website. Sie sparen nicht nur wertvolle Zeit in der Verwaltung, sondern bieten Ihren Kunden auch einen modernen und jederzeit verfügbaren Service.
Von hier aus können Sie weitere Pro-Funktionen erkunden, wie das Erstellen von Gutscheinen, das Hinzufügen benutzerdefinierter Felder im Buchungsformular oder die Aktivierung einer Wartelisten-Funktion für ausgebuchte Termine. Ihre automatisierte Terminplanung ist nun Realität.
FAQ – Häufig gestellte Fragen
- Frage: Muss ich Bookly PRO verwenden?
- Antwort: Nein, die kostenlose Basisversion ist funktionsfähig. Bookly PRO wird jedoch für die meisten professionellen Anwendungsfälle dringend empfohlen. Funktionen wie die Verwaltung mehrerer Mitarbeiter, die Annahme von Online-Zahlungen, die Google Kalender-Synchronisation und die komfortablen Elementor-Widgets sind nur in der PRO-Version enthalten.
- Frage: Mein Buchungsformular erscheint nicht. Was kann ich tun?
- Antwort: Überprüfen Sie zuerst den Shortcode auf Tippfehler, falls Sie diesen verwenden. Leeren Sie anschließend den Cache Ihrer Website (falls Sie ein Caching-Plugin nutzen) und den Cache Ihres Webbrowsers. Als letzten Schritt können Sie vorübergehend andere Plugins deaktivieren, um mögliche Konflikte auszuschließen.
- Frage: Kann ich mit der kostenlosen Version von Bookly Online-Zahlungen annehmen?
- Antwort: Nein, für die Integration von bekannten Zahlungsgateways wie PayPal, Stripe, Mollie oder anderen ist die Lizenz von Bookly PRO zwingend erforderlich.
- Frage: Wie synchronisiere ich Buchungen mit meinem Google Kalender?
Antwort: Dies ist eine Kernfunktion von Bookly PRO. Sie können die Synchronisation unter Bookly > Einstellungen > Google Kalender einrichten. Die Konfiguration kann für jeden Mitarbeiter individuell vorgenommen werden, sodass jeder seine Termine in seinem eigenen Kalender sieht.
