You need to login into TheFork Manager to get the code and change the design: https://manager.thefork.com/

1. For colors (header, highlight, button, background color): Settings » Design » Design Kit
   (transparent hex not accepted)
2. Website Widget (iFrame, Button, Full Page URL): Settings » Booking Module » Settings
   (doesn’t include the language code)
3. Languages: https://calendarexamples.thefork.com/widget-preview/
   (Restaurant ID: Settings » Billing and payment » Billing » open an invoice)
   • Link (opens new tab)
   • Button (opens new tab)
   • Floating Button (opens new tab)
   • IFrame + Button (This script switches between iframe and button depending on the screen size. The button is displayed on smartphones to avoid the horizontal scroll in the iframe.)

Each method above gives a different widget code: with/without the language, with the client ID or the widget link.

Default iFrame (old)

<iframe src="https://module.lafourchette.com/nl_NL/module/RESTAURANTID-CODE" style="width: 100%; min-height:800px; border:none; overflow:scroll;"></iframe>Code language: HTML, XML (xml)

Default iFrame (new)

<iframe
        src="https://widget.thefork.com/FULL-PAGE-WIDGET-LINK"
        allow="payment *"
        style="width: 100%; min-height:800px; border:none; overflow:scroll;">
</iframe>Code language: HTML, XML (xml)

Best iFrame (with media query)

This lets the height depend on the screen width, but the defaults from TheFork give a vertical scrollbar. This is fixed in the code below. This is still bad though because persons/date/time input requires a screen width of 400px.

<iframe class="thefork" src="https://widget.thefork.com/FULL-PAGE-WIDGET-LINK"></iframe>

<style type="text/css">
.thefork{
width: 100%;
border:none;
overflow: scroll;
}
/* Media queries widget */ 
@media only screen and (max-width : 374px) { 
    .thefork{
    min-height: 1450px;
    }
}
@media only screen and (min-width : 375px) and (max-width : 750px){
    .thefork{
    min-height: 1350px; 
    }
}
@media only screen and (min-width : 751px) { 
    .thefork{
    min-height: 950px; 
    }
}
</style>
Code language: HTML, XML (xml)