Website instructions
You can install TheFork´s booking widget directly in your website, Facebook Fanpage or Instagram account to increase your bookability.
The widget can either redirect users to a new page containing the booking platform or allow them to book on the current page by installing the iframe widget. The choice is yours! The installation process is quick and easy and compatible with all devices such as desktops, tablets, smartphones, etc.
Below you can find the steps to install each of our available widget options.
Redirect to new tab, link through text
Use the link to your widget as follows:
<a href=" WIDGET LINK ">Text</a>
Paste the resulting code into your site.
EXAMPLE
<a href="https://module.lafourchette.com/en_GB/module/263821-13c83">Online Booking</a>
Redirect to new tab, link through button
Change the text for a button:
<a href="WIDGET LINK "><img src="/imagen.png"></a>
Paste the resulting code into your site.
EXAMPLE:
<a href="https://module.lafourchette.com/en_GB/module/263821-13c83"><img src="https://calendarexamples.thefork.com/wp-content/uploads/2020/12/56567_new_GB.png"></a>
Embedded into your site through iframe
Use the following code:
<iframe src=" WIDGET LINK " style="width: 100%; min-height:800px; border:none; overflow:scroll;"></iframe>
EXAMPLE:
<iframe src="https://module.lafourchette.com/en_GB/module/263821-13c83" style=" width: 100%; min-height:800px; border:none; overflow:scroll;"></iframe>
Link inside an iframe adapted to size of the screen (using Media Queries)
When users are booking on different platforms, the size of the screen may vary. In order to create the easiest booking experience, our reservation engine adapts to the size, length and height of the screen.
Widget during the reservation process
In order to avoid a fixed longitude in all cases and to prevent the scroll from appearing, we use Media Queries to adapt it to the different screen sizes of any given device.
Use a class in the iframe:
<iframe class="thefork" src="https://module.lafourchette.com/en_GB/module/56567-a3fd1"></iframe>
Paste the following styles before the </head> tag:
<style type="text/css"> .thefork{ width: 100%; border:none; overflow: scroll; } /* Media queries widget */ @media only screen and (max-width : 320px) { .thefork{ min-height: 840px; } } @media only screen and (min-width : 321px) and (max-width : 516px){ .thefork{ min-height: 650px; } } @media only screen and (min-width : 517px) { .thefork{ min-height: 550px; } } </style>
From now on, the height of the iframe will change depending on the width of the screen and the html block that contains it. The following table shows the relationship of measures.
Screen width | Widget height | Widget width |
---|---|---|
Up to 320px | 840px | 100% |
From 321 to 516px | 650px | 100% |
From 517px | 550px | 100% |