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 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.

Text hyperlink

Redirect the widget to new tab, link through text. Take a look at the following example.

 
Paste this code inside the part of the website code you want to have the hyperlink:

Button

Click on this button redirect the widget to a new tab. Take a look at the following example.

 

Paste this code inside the part of the website code you want to have the button:

Floating button

This button redirect the widget to new tab is fixed and always visible. Take a look at the following example.

 

 

Paste this code inside the <body> tag of your website:

Embedded Iframe

Take a look at the following example.

 

 

Paste this code inside the part of the website code you want to have the iframe::

Embedded 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.

 

screenshot

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:

 

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%

Install your widget in less than a minute with our WordPress plugin

 

  • Access the backadmin page of the WordPress site
  • Go to 'Plugins >> Install New Plugin'
  • Look for TheFork Widgets
  • Click on 'Install Now'
  • Once installed, click on 'Activate'
  • TheFork plugin will appear as a menu item on the sidebar of the backadmin page
  • Configure options with your restaurant UID

 

Visit the official plugin website for further information.