Shore bietet verschiedene Optionen deinen Buchungsbutton auf der Website einzubauen. Klicke in deinem Kalender auf deinen Namen oben rechts > Einstellungen > Buchungsfunktion. Hier geht es direkt zu den Buchungsfunktionen deines Kalenders.
1. Feste Einbindung des Buchungsbuttons an der gewünschten Position.
Diese Option wird in der Regel von allen Website Baukästen unterstützt. Es genügt, den Link zu deiner Buchungsseite mit einem einfachen Button zu verbinden. Den Link erhältst du, indem du in den Buchungsfunktionen deines Kalenders auf Jetzt buchen klickst und die URL kopierst. Hier geht es direkt zu den Buchungsfunktionen deines Kalenders.
2. Schwebender Buchungsbutton
Der Button ist auf allen Unterseiten der Website immer an derselben Stelle positioniert (unten rechts oder links möglich).
Dies ist eine etwas komplexere Variante, für deren Umsetzung du Zugriff auf das <head> Element deiner Website benötigst (viele Baukästen bieten dies nicht an).
Die Umsetzung ist jedoch relativ einfach. Gehe zu den Buchungsfunktionen in deinem Kalender und kopiere den Code aus Punkt 6. in das <head> Element deiner Seite.
3. Buchungs-Widget
Die Buchungsfunktion wird in einem Fenster an einer bestimmten Position auf Ihrer Website eingebunden. Hier eine Auswahl verschiedener Varianten wie der iframe gestaltet werden kann. Die Umsetzung erfordert erweiterte technische Kenntnisse.
Reduziertes Design:
<div style="overflow-x: hidden; width: 840px;"><iframe frameborder="0" height="750" src="https://connect.shore.com/widget/nolayout/SLUG" width="771"></iframe></div>
Kompletter iFrame:
<div style="overflow-x: hidden; width: 1150px;"><iframe frameborder="0" height="1250" src="https://connect.shore.com/widget/SLUG" width="771"></iframe></div>
Responsive:
<!ShoreBookingIframeStyling START→
<style>
@media only screen and (minwidth:
770px) {
iframe.shorebookingiframe
{
width: 770px;
}
}
@media only screen and (minwidth:
1100px) {
iframe.shorebookingiframe{
width: 1100px;
}
}
</style>
<!ShoreBookingIframeStyling
END→
Body Element für Root Level:
<!ShoreBookingIframe
START>
<iframe class="shorebookingiframe"
src="https://connect.shore.com/widget/SLUG?
locale=de" frameborder="1"
height="850" width="350"> </iframe>
<!ShoreBookingIframe END→#
