Add javascript online booking calendar

Firstly log in to your freetobook online booking software, go to the widget menu and create a widget for your property. There are detailed video tutorials on the widget page to help you with this step.

Once you have a widget click the view code button and you will be taken to a page with several options. To add the calendar based widget, Highlight the contents of the first box and copy it. (CTRL-C on PC ,or ⌘C on Mac).

Go to the source file for the page you want to add the widget to. It should look something like this:
(*NOTE* Do not copy the code on this page.
The following code snippets are examples only.)

<html>
<head>
<title>Mayfield Guest House</title>
</head>
<body>
<div>
<h1>Stay at the Mayfield Guest House</h1>
</div>
</body>
</html>

Paste the Javascript widget code (CTRL-V PC ,or ⌘V Mac) in at the appropriate point, the code should now look something like this

<html>
<head>
<title>Mayfield Guest House</title>
</head>
<body>
<div>
<h1>Stay at the Mayfield Guest House</h1>

<div id="f2b-widget"> <script src="http://www.freetobook.com/affiliates/dynamicWidget/js/widget-js.php? w_id=6&amp;w_tkn=Ozy7MdBSvxrfzocHejxHAh1o8vIBzYMEarF4EhLIq2gu
V0T0jMlcMtp9Tn9w9" type="text/javascript"></script></div>

</div>
</body>
</html>

Your free booking calendar is now installed. Load your webpage in a web browser and check that the widget loads correctly, and is in the right position.

Advanced

For best performance you can put the script tag in the head section of the html, and the div in the body where you want the widget to appear. Currently we only support one widget per page. Pasting the widget in multiple places on the same page can cause issues.

<html>
<head>
<title>Mayfield Guest House</title>
<script src="http://www.freetobook.com/affiliates/dynamicWidget/js/widget-js.php? w_id=6&amp;w_tkn=Ozy7MdBSvxrfzocHejxHAh1o8vIBzYMEarF4EhLIq2gu
V0T0jMlcMtp9Tn9w9" type="text/javascript"></script>
</head>

<body>
<div>
<h1>Stay at the Mayfield Guest House</h1>
<div id="f2b-widget"></div>
</div>
</body>
</html>


facebook twitter blog inkedin youtube