Wie richte ich die Online-Buchungsfunktion auf meiner Website ein?

In diesem Tutorial zeigen wir Ihnen, wie Sie die Shore Online-Terminbuchung auf Ihrer Website einbinden. Die Vorgehensweise hängt davon ab, wie Sie die Buchungsfunktion auf Ihrer Seite darstellen möchten und ob Sie mit einem Website-Baukasten arbeiten.

 

Entscheiden Sie, wie Sie die Online-Buchung auf Ihrer Website darstellen möchten

Es gibt mehrere Möglichkeiten, die Buchungsfunktion auf Ihrer Website einzubinden:

  1. Online-Buchung im Menü
    Bei dieser Option verlinken Sie einen Menüeintrag auf Ihrer Website mit Ihrer Buchungsseite. Die Umsetzung ist sehr einfach und wird von fast jedem Website-Baukasten unterstützt.
  2. Buchungsbutton auf einer oder mehreren Unterseiten
    Bei dieser Option fügen Sie die Buchungsfunktion als Button bzw. Link auf einer oder mehreren Unterseiten in Ihre Website ein. Die Umsetzung ist ebenfalls sehr einfach und wird von fast jedem Website-Baukasten unterstützt.
  3. Buchungsbutton an einer festen Position auf allen Seiten
    In diesem Fall ist der Buchungsbutton als sogenannter “schwebender Button” auf allen Unterseiten an derselben Stelle (unten rechts oder links) positioniert.
    Vorteil: Kunden sehen den Buchungsbutton sofort und können auf jeder Seite buchen. Sie entscheiden, ob der Button rechts oder links unten angezeigt werden soll.
  4. Buchungsseite als Fenster (iframe) direkt auf Ihrer Website
    Die Buchungsfunktion wird in einem Fenster an einer bestimmten Position auf Ihrer Website eingebunden.

 

Nachfolgend zeigen wir Ihnen Schritt für Schritt, wie Sie für jede dieser Optionen vorgehen müssen.

 

Option 1: Online-Buchung im Menü

  1. Legen Sie im Menü Ihrer Website einen weiteren Eintrag an (z.B. Online-Buchung).
  2. Öffnen Sie Ihren Shore Account. Klicken Sie auf Ihren Benutzernamen oben rechts und anschließend auf Einstellungen > Buchungsfunktion.
  3. Deaktivieren Sie die Option Schwebenden Button verwenden.

    Einstellungen Buchungsfunktion
  4. Kopieren Sie die Webadresse Ihrer Buchungsseite aus dem HTML-Code.

    HTML-Code kopieren
  5. Verlinken Sie den Menüeintrag auf Ihrer Website mit der Webadresse Ihrer Buchungsseite. Fertig!

Dieses Video-Tutorial zeigt, wie Sie die Webadresse mit einem Menüeintrag auf Ihrer Website verlinken, wenn Sie einen Website-Baukasten nutzen.

 

Option 2: Buchungsbutton auf einer oder mehreren Unterseiten

Sie können an beliebigen Stellen auf einer oder mehreren Unterseiten (z.B. unter “Kontakt” oder “Leistungen”) einen Button oder Link einbauen, der mit Ihrer Buchungsseite verknüpft ist.

Tipp: Wir empfehlen, die Buchungsfunktion entweder im Menü oder auf mehreren Seiten einzubauen, zum Beispiel unter Kontakt und Leistungen.

  1. Öffnen Sie Ihren Shore Account. Klicken Sie auf Ihren Benutzernamen oben rechts und anschließend auf Einstellungen > Buchungsfunktion. Auf dieser Seite können Sie Ihren Buchungsbutton und Ihre Buchungsseite personalisieren.
  2. Deaktivieren Sie die Option Schwebenden Button verwenden.

    Einstellungen Buchungsfunktion
  3. Ändern Sie auf Wunsch den Buttontext (2), das Farbschema Ihrer Buchungsfunktion (3) und die Textfarbe des Buchungsbuttons (4). Weitere Informationen zu diesen Schritten finden Sie auch hier.
  4. Klicken Sie auf Änderungen speichern.
  5. Alle Einstellungen werden automatisch in dem HTML-Code gespeichert, der im Fenster in Punkt (5) angezeigt wird. Kopieren Sie den Code, indem Sie über dem Fenster auf In Zwischenablage kopieren klicken.

    HTML-Code kopieren
  6. Im letzten Schritt müssen Sie den Code auf Ihrer Website einbetten. Dieses Video-Tutorial zeigt, wo Sie den kopierten HTML-Code einfügen müssen, wenn Sie einen Website-Baukasten nutzen (Hinweis: In dem Beispiel wurden Farbe und Beschriftung des Buttons nicht angepasst).

 

Option 3: Buchungsbutton an einer festen Position auf allen Seiten

Mit dem sogenannten “schwebenden Button” können Sie den Buchungsbutton auf jeder Unterseite an einer festen Stelle (unten rechts oder links) anzeigen. Dies ist eine besonders elegante Lösung und hat den Vorteil, dass der Button nicht übersehen wird und Ihre Kunden auf jeder Seite buchen können.

Der Buchungsbutton rechts unten auf dieser Beispielseite zeigt, wie der Einbau als schwebender Button aussieht.

Hinweis: Die Umsetzung ist nicht schwierig, aber Sie benötigen Zugriff auf das <head> Element Ihrer Website, was nicht mit allen Website-Baukästen möglich ist.

  1. Öffnen Sie Ihren Shore Account. Klicken Sie auf Ihren Benutzernamen oben rechts und anschließend auf Einstellungen > Buchungsfunktion. Auf dieser Seite können Sie Ihren Buchungsbutton und Ihre Buchungsseite personalisieren.
  2. Aktivieren Sie die Option Schwebenden Button verwenden.

    Schwebenden Button aktivieren
  3. Ändern Sie auf Wunsch den Buttontext (3), das Farbschema Ihrer Buchungsfunktion (4) und die Textfarbe des Buchungsbuttons (5). Weitere Informationen zu diesen Schritten finden Sie auch hier.
  4. Klicken Sie auf Änderungen speichern.
  5. Alle Einstellungen werden automatisch in dem HTML-Code gespeichert, der im Fenster in Punkt (6) angezeigt wird. Kopieren Sie den Code, indem Sie über dem Fenster auf In Zwischenablage kopieren klicken.

    HTML-Code kopieren
  6. Im letzten Schritt müssen Sie den Code im Header (d.h. direkt vor dem </head> Tag) in den Quellcode Ihrer Website einfügen. Im Folgenden zeigen wir Ihnen, wie Sie den Code mit einem Website-Baukasten oder mit WordPress einbetten.

 

Einbau mit einem Website-Baukasten

Dieses Video-Tutorial zeigt wie Sie vorgehen müssen, wenn Sie einen Website-Baukasten nutzen (Hinweis: In dem Beispiel wurden Farbe und Beschriftung des Buttons nicht angepasst).


Einbau mit WordPress

So geht der Einbau, wenn Sie Ihre Website mit WordPress verwalten:

  1. Öffnen Sie den Admin-Bereich ihrer WordPress Seite (http://Ihre-Website.de/wp-admin/).
    Klicken Sie links im Menü auf Design > Editor.

    Einbau in Wordpress
  2. Wählen Sie das Template Header (header.php) aus.
  3. Fügen Sie den kopierten Code direkt über dem </head> Tag ein. Fertig!

    HTML-Code in Wordpress einfügen

 

Option 4: Buchungsseite als Fenster (iframe) auf Ihrer Website

Bei dieser Option wird die Buchungsfunktion ohne Link oder Button als Fenster an einer bestimmten Position auf Ihrer Website eingebunden.

In dieser Übersicht (Punkt 3 iframe) finden Sie ein Beispiel sowie verschiedene Gestaltungsmöglichkeiten.

Die Umsetzung erfordert erweiterte technische Kenntnisse, da Sie den Code anpassen und manuell in Ihre Website einbetten müssen. Bitte kontaktieren Sie hierfür Ihren Webmaster oder unseren Support, wenn Sie Unterstützung benötigen.

 


Sie benötigen Hilfe beim Einbau? Dann schreiben Sie uns eine E-Mail oder kontaktieren Sie uns über den Live-Chat in Ihrem Account.

War dieser Beitrag hilfreich? 0 von 0 fanden dies hilfreich

Kommentare