Skip to content
English
Submit request
Learn more about Shore
  • There are no suggestions because the search field is empty.

What are the options to include the online booking function on my website?

Shore offers different options to include your booking button on the website. You can find the different settings directly in the product here.

1.-Fixed integration of the booking button at the desired position

This option is usually supported by all website building kits. It is sufficient to connect the link to your booking page with a simple button. You can get the link here by clicking Book Now and copying the URL.

2.-Floating booking button 

The button is always positioned in the same place on all sub-pages of the website (bottom right or left possible). 
This is a slightly more complex variant, for whose implementation you need access to the <head> element of your website (many construction kits do not offer this).
However, the implementation is relatively simple. Click here and copy the code from point 6. into the <head> element of your page.



3. Booking Widget (iFrame)

An iFrame is a small area on your website in which another page is embedded – in this case, your personal Shore booking page. This allows your customers to book appointments directly on your website without having to leave it.

Below you will find three different integration options:

 


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>


Complete 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→#

 

Important:
In all three code examples, you must replace the link https://connect.shore.com with your personal booking link.

You can obtain the link by clicking Book now in the booking functions of your calendar and copying the URL. Click here to go directly to the booking functions of your calendar.