Website Integration Guide for Developers

This help guide provides useful information about integrating Anytime Booking with a website and is aimed at the website developer, with some basic technical guidance. Depending on the CMS the website is based around, the web developer will need to interpret this guide and make adaptations. The Anytime Booking account holder will be able to use this guide to make an informed decision about which search and/or availability calendars they wish to use on their website.

With regard to Widgets, please note that if the Anytime Booking account holder is using a self-build website, such as Wixx, Vistaprint, Mr.Site, 1and1 or Webs.com, the javascript used in these websites can interfere with the code in the widgets, stopping them from working.

In these cases we would normally advise account holders in this situation to use a ‘Book Now’ button to take your customers to your booking page.

Please note that we can provide you with any number of single unit availability calendars and EITHER one multi-unit availability calendar OR one search widget (horizontal or vertical) free of charge but the production of additional widgets is chargeable.

The Search Widget

Allowing customers to do a quick search for availability is helpful if the customer is looking for a specific date range. In most cases, we will recommend a search facility if you have more than two categories or multiple units. This will save the customer time in looking at individual calendars per pitch, room or property.

We send the search widget to the web developer as a file in html and JavaScript that gives it all the functionality to filter and search for availability. When placing the search widget on the landing/homepage, you can adapt its look and feel through CSS.

We have two HTML options:­

1.Horizontal view (view on desktop)

 

Availability & Book Online





 

2. Vertical View

 

Availability & Book Online

Arrival Date
Party Size
Length Of Stay

 

Depending on how the Anytime Booking account is configured, you may have additional fields for Category (dropdown), Unit (dropdown), Pet Friendly (tick box), Electric Hookup (tick box) and so on.

The web developer can control the minimum and maximum options on the Party Size and Length of Stay by commenting out HTML tags for rules you would like them to remove.

Here is a sample of HTML code, where you would delete the bold section below if you want more than one person booking to stay on more than one day.

<div>

<h3>Party Size</h3>
<select id=”search_party_size” name=”search_party_size”>​
<option value=”1″>1 person</option>
<option value=”2″>2 people</option>
<option value=”3″>3 people</option>
<option value=”4″>4 people</option>
<option value=”5″>5 people</option>
<option value=”6″>6 people</option>
</select>
<h3>Length Of Stay</h3>
<select id=”search_period” name=”search_period”>​
<option value=”1″>1 day</option>
<option value=”2″>2 days</option>
<option value=”3″>3 days</option>
<option value=”4″>4 days</option>
<option value=”5″>5 days</option>
<option value=”6″>6 days</option>
<option value=”7″>7 days</option>
<option value=”8″>8 days</option>
<option value=”9″>9 days</option>
<option value=”10″>10 days</option>
<option value=”11″>11 days</option>
<option value=”12″>12 days</option>
<option value=”13″>13 days</option>
<option value=”14″>14 days</option>
</select>

</div>

 

Search Results

Once the online customer chooses their search criteria, they are redirected to the search results page hosted on Anytime Booking’s server.

The client is able to control the thumbnails, unit title and description by going to the u​nit settings.

Displaying Availability

 

The Single Unit Monthly Calendar View

As their web developer, you can ask your client for login details to their Anytime Booking back office in order to obtain the calendar widget coding to then embed it onto the client’s website. You can choose with your client how many months you would like to display and the colour theme of the widget ­ there is a choice of black, orange, blue and green themes.

Further instructions on how to auto-generate the code for availability calendars

Full technical instructions on how the edit the CSS.

The Multi Unit Daily Calendar View

We have to prepare this calendar widget for you at this end and then send it to you via email in order to embed it onto the client website.

Installing Search Widgets & Calendars

In the majority of cases, the installation of our availability widgets should be a simple copy and paste from the code that we supply onto a web page on your website. This will certainly be the case if you are using traditional desktop software e.g. Adobe Dreamweaver or if you simply build your website from scratch.

For sites that use a Content Management System (CMS) such as WordPress, you can copy and paste the code straight onto a new WordPress page, in text mode, and instantly preview the output.

However in certain scenarios, you may need to separate the Javascript and CSS elements from the HTML and embed these within the settings of your theme. The reason for this is that some themes will sanitise or modify any custom code in order to prevent potential malicious scripts from being embedded onto your pages. To get around this, most themes allow the ability to embed your own custom CSS and Javascript. Please refer to the documentation of your theme for further details.

If your theme does not support the above, then the final option is to directly modify the header file of your theme. This is usually a file contained within your theme folder called header.php. Simply place any Javascript and CSS before the closing head tag.

The Booking Form


The most fundamental part of taking a booking is the booking form. Once the online customer has chosen their dates via a search or through the calendar, they will enter the booking form hosted on our servers.

The ‘booking form’ URL will look like: https://578911.anytimebooking.eu/place_booking. Those who choose to have the booking form and customer login header and footer styled will also receive a vanity URL: https://mycompanyname.anytimebooking.eu.

The form itself is defined by how the Anytime Booking account is configured. The client can rename the titles of each section of the form. For example, renaming ‘Add­Ons’ to ‘Extras’. To do this go to the booking form ‘Headings’ area in the Anytime Booking account. Click h​ere​ to learn how to do this.

 

Customer Login Area

After a booking has been created, the customer can login to the Customer Login Area to view their bookings and make any balance payments. This page is also hosted on our servers.

The URL to access this is will look like: https://companyname.anytimebooking.eu/my_account

Most website developers will create a link in the footer of the client website for customers to login.

Once a booking is made, the customer is sent their login details via email with their username and password.

Within this area, the customer can make another booking, purchase items in the Anytime Booking shop (if enabled), view previous and existing bookings (default view) and change their password.
Styling the Hosted Pages
We can style the hosted pages, namely the ‘Search Results’, the ‘Booking Form’ and the ‘Customer Login Area’ to closely match the client’s website.

We do charge an additional development fee for doing this element at £75 + VAT per hour. This typically takes between 2­4 hours depending on the level of detail or complexity within the client’s website.

If you are developing a brand new website, we will only do the styling once the website is complete. This avoids us going back and forth in updating the header and/or footer whilst you are making those final touches.

We also recommend to the client that their Anytime Booking account is fully configured and are already taking bookings through their new account b​efore​ going live on their website.

 

Additional FAQs

Q.​Can I place any search and calendar widgets within an iframe?

A. We are not able to place any widgets onto your website through an iframe. This is because our widgets come from a secure server with additional JavaScript functionality, which often breaks when exposed in an iframe environment.

Q​. The outgoing emails are sent from ​mycompanyname@anytimebooking.co.uk,​can we change this?

A. Yes this can be changed, but we will need to have access to your DNS (Domain Named Server) records to create additional records which will allow our servers to send email using your domain.

Q​. Can we have the hosted pages displayed on the client’s website?

A. You can only have the search results displayed on your client’s website where we provide you with a data feed via an API. This data will be in JSON format. This will require advance knowledge of the developer to interpret the data and display the results in your own way.

The Booking Form and the Customer Login Area can only be hosted on Anytime Booking’s server.

Q.​Why can’t I have my WordPress weather widget on the hosted pages?

A. If the client has chosen to have the hosted pages styled, we can copy everything across apart from any plugins powered by WordPress, such as social media feeds, weather apps or items that change frequently.

Q.​Why do the hosted pages not display certain web fonts?

A. Depending on which font library service your website theme uses, you may have to add the Anytime Booking domain name to your allowed list of websites to order for that web font to be inherited. For example, Adobe’s TypeKit is one of web font providers where you can add a list of the domain that need to access said font.

Q.​Can I track the hosted pages through my Google Analytics account?

A. Yes, provide us with your G​oogle Tag Manager​ code and we’ll add this.

 

Some Examples

Skybarn Farm, Lincoln ​

Sky Barn Farm opted to keep everything really simple. They have downloaded the monthly calendar widgets from within their account and added them to their website. All the hosted pages are un­styled and display our default look at feel.

Tregarton Park, Cornwall ​

Tregarton Park is actually our account number one! They simply have a Book Now button using the account booking form URL, but what is slightly different for their customers booking online is the restriction on whether the customer can choose their own pitch number or not ­ this is dependent on the length of stay. Those who stay more than 7 nights can choose a pitch, for those who choose less, the system will automatically assign the next pitch available which allows staff to move those small stays around to free up more availability.

Scamper Holidays, Swansea 

Scamper Holidays has taken our vertical search widget and changed the CSS to blend more with their existing website. They have chosen to have all Anytime Booking hosted pages styled to match their website header and footer.

The Jarman Centre ­ GirlGuiding UK, Cambridgeshire ​

This is a Girl Guiding centre that offers a combination of camping, self­catering and activities. They are using monthly availability calendars for all their units which have been generated from the back office and installed into their website. In some instances, they do not want the customer to book online, but enquire instead (booking enquiry is switched on at the u​nit setting level).

Debden House, London

They are using an interactive pitch­map to channel their bookings, mainly to help customers choose their appropriate field, and they also have a minimum occupancy setting to make sure bigger pitches accommodate appropriately sized groups.

Those clients wanting a pitch­map can provide the image and we then give a quotation for the technical integration which is dependent on size. If they want a map of their site online but don’t yet have an image, we can connect them with our chosen partner for creating maps, The Clear Mapping Company, here in Cornwall. Contact us for more information.

 

Glossary of technical terms

Content Management System (CMS) The area used to log into the back of a website ­suggest as with WordPress built sites.

Browser The program used to a view a website ­ think Chrome, Firefox, Internet Explorer and Safari.

Cache/Caching Cached files are those that are saved (downloaded) by a web browser, so the next time the user comes to the website, it appears to load quicker. When the web developer is making multiple changes to a website and you don’t instantly see them, your browser may have ‘cached’ the previous view. We love F5! A good refresh will help.

Cascading Style Sheets (CSS) ​These sheets are used to refine the look and feel of a website outside of the HTML file(s). When a search widget is sent, you may have a master CSS file controlling colours.

DNS:​Domain Name Service (alternately Domain Name System or Domain Name Server). Basically, it’s the thing that converts IP addresses into domain names. DNS servers are provided with the IP address of your web server when you assign your domain name to those servers. In turn, when someone types your domain name into their web browser, those DNS servers translate the domain name to the IP address and point the browser to the correct web server.

Domain ​The domain is the name by which a website is identified. The domain is associated with an IP address. Domains can be purchased with any combination of letters, hyphens (­), and numbers (though it can’t start with a hyphen). Depending on the extension (.com, .net, .org, etc.), a domain can be anywhere up to 26 to 63 characters long.

eCommerce Short for electronic commerce. It’s the buying and selling of goods online, through websites. In our case, it’s bookings!

External Style Sheet ​This is a CSS document that is written in a separate, external document. The biggest advantage to using an external style sheet is that it can be linked to by multiple HTML/XHTML files. We can provide this if you require us to style the search widget.

Hexadecimal ​Also referred to as “hex” numbers, they are a base­16 numbering system used to define colors online. Hex numbers include the numerals 0­9 and letters A­F. Hexadecimal numbers are written in three sets of hex pairs. Because screen colors are RGB (Red, Green, Blue), the first pair defines the red hue, the second pair defines the green hue, and the third pair defines the blue.

HTML Hypertext Markup Language, the primary language used to write web pages. HTML is primarily intended as a way to provide content on websites (with CSS handling the layout and stylistic options), though it can also be used to determine how that content is displayed.

HTTPS Similar to HTTP, HTTPS stands for HyperText Transfer Protocol over SSL (Secure Socket Layer) or, alternately, HyperText Transfer Protocol Secure. Like HTTP, it’s a set of rules for transferring hypertext requests between browsers and servers, but this time it’s done over a secure, encrypted connection.

Hyperlink​ A hyperlink is a link from one web page to another, either on the same site or another one. Generally these are text or images, and are highlighted in some way (text is often underlined or put in a different color or font weight). The inclusion of hyperlinks are the “hyper” part of “hypertext.”

Inheritance In CSS, elements that don’t have a pre­defined style will take on the style of their parent element within the document tree.

JSON ​Stands for JavaScript Object Notation is a lightweight data­ interchange format. It is easy for humans to read and write.

JavaScript ​An object­ oriented computer programming language commonly used to create interactive effects within web browsers.

Landing/Home Page A landing page is the page where a visitor first enters a website. Sometimes, a special landing page is created to elicit a specific action from the new visitor (usually in connection with an advertising or marketing campaign).

Responsive Design The buzz­word for making websites resize depending on which device the customer is using to view the web page. All our hosted pages are responsive to work seamlessly on different devices.

Server­side This refers to scripts run on a web server, as opposed to in a user’s browser. Server­side scripts often take a bit longer to run than a client­side script, as each page must reload when an action is taken.

URL Stands for Uniform Resource Locator. A site’s URL is its address, the item that specifies where on the Internet it can the found.

Tom Grant

Leave a Reply

You must be logged in to post a comment.