Search...

Generic filters

Exact matches only

Search in title

Search in content

Search in excerpt

Filter by Custom Post Type

Website Integration: Install a Book Now button or link on your website

Modified May 5, 2023 | Created December 8, 2016 | Jeff Valair

Filed under Website Integration

How to install a Book Now button or link onto your website.

1. Obtain your Company_ID.

This can be done from the Booking Agent, click File > Configuration > Services > Settings.

You will need administrator access to review these settings.

2. Add the following code references of your web page.

<html>
  <head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="//blueskybooking.blob.core.windows.net/widget/blueskybooking-integration.js"></script>

    <link rel="stylesheet" type="text/css" href="//blueskybooking.blob.core.windows.net/styles/web/fancybox/default.css">
  </head>
  <body>
    <input type="hidden" class="blueskybooking-company_id" value="{Company_ID}" />
    <a class="blueskybooking-widget-book">Book Now</a>
  </body>
</html>

<html>

<head>

</head>

<body>

</body>

</html>

You may optionally link to any other clickable <input /> object using the blueskybooking-book class.

Syntax:

<input type="button" class="blueskybooking-widget-book" value="Book Now" />

1	<input type="button" class="blueskybooking-widget-book" value="Book Now" />

» Create a search widget on your website

Change your color scheme

This optional step allows custom coloring to be applied. If it is not specified, the default color scheme will be applied.

default.css
black-blue.css
blue-gray.css
blue-sky.css
blue-teal.css
gray.css
green-blue.css
orange-blue.css
red-blue.css
red-gray.css
yellow-blue.css

Add custom CSS to your website

In special cases, a custom style sheet can be applied to overtake the base style sheet. This is only recommended for advanced users and any technical issues that arise which require support would be billed as out of scope work.

Requirements

A valid https:// secured server must be used to host the external CSS file.

Please note that technical support issues arising from custom styling are out of scope and may incur service billing.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="//blueskybooking.blob.core.windows.net/styles/web/fancybox/black-blue.css">
  </head>
</html>

<html>

<head>

</head>

</html>

Element:
//Configuration/Web/Settings/Css

Attribute:
File

Example:
orange-blue.css

Element:
//Configuration/Web/Settings/Css

Attribute:
Path

Example:
http://www.mydomain.com/themes/

Element:
//Configuration/Web/Settings/Css

Attribute:
Source

Example:
https://www.mycompany.com/themes/mytheme.css,https://www.mycompany.com/themes/mytheme2.css

Added to the configuration:

<Configuration>
  <Web>
    <Settings>
      <Css Path="https://blueskybooking.blob.core.windows.net/styles/web/" File="black-blue.css" />
    </Settings>
  </Web>
</Configuration>

<Web>

</Settings>

</Web>

</Configuration>

Element:
//Configuration/Mobile/Settings/Css

Attribute:
File

Example:
orange-blue.css

Element:
//Configuration/Mobile/Settings/Css

Attribute:
Path

Example:
http://www.mydomain.com/themes/

Element:
//Configuration/Mobile/Settings/Css

Attribute:
Source

Example:
https://www.mycompany.com/themes/mytheme.css,https://www.mycompany.com/themes/mytheme2.css

Added to the configuration:

<Configuration>
  <Web>
    <Settings>
      <Css Path="https://blueskybooking.blob.core.windows.net/styles/mobile/" File="black-blue.css" />
    </Settings>
  </Web>
</Configuration>

<Web>

</Settings>

</Web>

</Configuration>