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.
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 have two HTML options:
1.Horizontal view (view on desktop)
2. Vertical View
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.
<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>
<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>
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 unit settings.
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.
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 ‘AddOns’ to ‘Extras’. To do this go to the booking form ‘Headings’ area in the Anytime Booking account. Click here 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 24 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 before going live on their website.
Q.Can I place any search and calendar widgets within an iframe?
Q. The outgoing emails are sent from firstname.lastname@example.org,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 Google Tag Manager code and we’ll add this.
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 unstyled and display our default look at feel.
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 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.
This is a Girl Guiding centre that offers a combination of camping, selfcatering 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 unit setting level).
They are using an interactive pitchmap 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 pitchmap 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 base16 numbering system used to define colors online. Hex numbers include the numerals 09 and letters AF. 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 predefined style will take on the style of their parent element within the document tree.
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 buzzword 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.
Serverside This refers to scripts run on a web server, as opposed to in a user’s browser. Serverside scripts often take a bit longer to run than a clientside 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.