In diesem Tutorial zeigen wir dir, wie du die Shore Online-Terminbuchung auf deiner Website einbindest. Die Vorgehensweise hängt davon ab, wie du die Buchungsfunktion auf deiner Seite darstellen möchtest und ob du mit einem Website-Baukasten arbeitest.
Es gibt mehrere Möglichkeiten, die Buchungsfunktion auf deiner Website einzubinden:
| 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. |
| Buchungsbutton auf einzelnen 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. |
| 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. |
| Buchungsseite als Fenster direkt auf Ihrer Website | Die Buchungsfunktion wird in einem Fenster an einer bestimmten Position auf Ihrer Website eingebunden. |
Option 1: Online-Buchung im Menü
- Lege im Menü deiner Website einen weiteren Eintrag an (z.B. Online-Buchung).
- Öffne deinen Shore Account. Klicke auf deinen Benutzernamen oben rechts und anschließend auf Einstellungen > Buchungsfunktion. Hier geht es direkt zu den Buchungsfunktionen deines Kalenders.
- Deaktiviere die Option Schwebenden Button verwenden.
- Kopiere die Webadresse deiner Buchungsseite aus dem HTML-Code.
- Verlinke den Menüeintrag auf deiner Website mit der Webadresse deiner Buchungsseite. Fertig!
Dieses Video-Tutorial zeigt, wie du die Webadresse mit einem Menüeintrag auf deiner Website verlinkst, wenn du einen Website-Baukasten nutzt. Hier geht es zum Video.
Option 2: Buchungsbutton auf einzelnen Unterseiten
Du kannst an beliebigen Stellen auf einer oder mehreren Unterseiten (z.B. unter “Kontakt” oder “Leistungen”) einen Button oder Link einbauen, der mit deiner Buchungsseite verknüpft ist.
Tipp: Wir empfehlen, die Buchungsfunktion entweder im Menü oder auf mehreren Seiten einzubauen, zum Beispiel unter Kontakt und Leistungen.
- Öffne deinen Shore Account. Klicke auf deinen Benutzernamen oben rechts und anschließend auf Einstellungen > Buchungsfunktion. Auf dieser Seite kannst du deinen Buchungsbutton und deine Buchungsseite personalisieren. Hier geht es direkt zu den Buchungsfunktionen deines Kalenders.
- Deaktiviere die Option Schwebenden Button verwenden.
- Ändere auf Wunsch den Buttontext (2), das Farbschema deiner Buchungsfunktion (3) und die Textfarbe des Buchungsbuttons (4). Weitere Informationen zu diesen Schritten findest du auch hier.
- Klicke auf Änderungen speichern.
- Alle Einstellungen werden automatisch in dem HTML-Code gespeichert, der im Fenster in Punkt (5) angezeigt wird. Kopiere den Code, indem du über dem Fenster auf In Zwischenablage kopieren klicken.
- Im letzten Schritt musst du den Code auf deiner Website einbetten. Dieses Video-Tutorial zeigt, wo du den kopierten HTML-Code einfügen musst, wenn du einen Website-Baukasten nutzt. Hier geht es zum Video.
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” kannst du 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 deine Kunden auf jeder Seite buchen können.
Der Buchungsbutton rechts unten auf der folgenden Beispielseite zeigt, wie der Einbau als schwebender Button aussieht. Hier geht es zur Beispielseite.
Hinweis: Die Umsetzung ist nicht schwierig, aber du benötigst Zugriff auf das <head> Element deiner Website, was nicht mit allen Website-Baukästen möglich ist.
- Öffne deinen Shore Account. Klicke auf deinen Benutzernamen oben rechts und anschließend auf Einstellungen > Buchungsfunktion. Auf dieser Seite kannst du deinen Buchungsbutton und Ihre Buchungsseite personalisieren.
- Aktiviere die Option Schwebenden Button verwenden.
- Ändere auf Wunsch den Buttontext (3), das Farbschema deiner Buchungsfunktion (4) und die Textfarbe des Buchungsbuttons (5). Weitere Informationen zu diesen Schritten findest du auch hier.
- Klicke auf Änderungen speichern.
- Alle Einstellungen werden automatisch in dem HTML-Code gespeichert, der im Fenster in Punkt (6) angezeigt wird. Kopiere den Code, indem du über dem Fenster auf In Zwischenablage kopieren klickst.
- Im letzten Schritt musst du den Code im Header (d.h. direkt vor dem </head> Tag) in den Quellcode deiner Website einfügen. Im Folgenden zeigen wir dir, wie du den Code mit einem Website-Baukasten oder mit WordPress einbettest.
Einbau mit einem Website-Baukasten
Dieses Video-Tutorial zeigt wie du vorgehen musst, wenn du einen Website-Baukasten nutzt. Hier geht es zum Video.
Hinweis: In dem Beispiel wurden Farbe und Beschriftung des Buttons nicht angepasst.
Einbau mit WordPress
So geht der Einbau, wenn du deine Website mit WordPress verwaltest:
- Öffne den Admin-Bereich deiner WordPress Seite (http://Ihre-Website.de/wp-admin/).
Klicke links im Menü auf Design > Editor.
- Wähle das Template Header (header.php) aus.
- Füge den kopierten Code direkt über dem </head> Tag ein. Fertig!
Option 4: Buchungsseite als Fenster direkt auf deiner Website
Bei dieser Option wird die Buchungsfunktion ohne Link oder Button als Fenster (iframe) an einer bestimmten Position auf deiner Website eingebunden.
In dieser Übersicht (Punkt 3 iframe) findest ein Beispiel sowie verschiedene Gestaltungsmöglichkeiten.
Die Umsetzung erfordert erweiterte technische Kenntnisse, da du den Code anpassen und manuell in deiner Website einbetten musst. Bitte kontaktiere hierfür deinen Webmaster oder unseren Support, wenn du Unterstützung benötigst.
Hinweis für Entwickler: Wenn du Google Analytics-Ereignisse auf dem übergeordneten Frame trackst, musst du das folgende Skript in den iFrame aufnehmen.
<script> window.addEventListener('message', e => { if (e.origin === 'https://connect.shore.com' && window.dataLayer) { if ( typeof window.dataLayer.push === 'function' && e.data && e.data.event && e.data.eventAction && e.data.eventCategory ) { window.dataLayer.push({ event: e.data.event, eventAction: e.data.eventAction, eventCategory: e.data.eventCategory, eventLabel: e.data.eventLabel, eventValue: e.data.eventValue, }); } } }); </script>