Search...

Generic filters

Exact matches only

Search in title

Search in content

Search in excerpt

Filter by Custom Post Type

Website Integration: Create a search and current status widget

Modified December 16, 2020 | Created December 8, 2016 | Jeff Valair

Filed under Website Integration

How to create a custom search and current status widget on your website.

Prerequisite
» Install a Book Now button or link on your website

Search Widget

Adding the following code will allow your company to fully customized (style and function) the booking search fields.

<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/blue-gray.css">
    <!-- Optional -->
    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="//blueskybooking.blob.core.windows.net/widget/blueskybooking-widget.css">
  </head>
  <body>
    <!-- Company -->
    <input type="hidden" class="blueskybooking-company_id" value="{Company_ID}" />

    <!-- Date Format (Optional) -->
    <input type="hidden" class="blueskybooking-dateformat" value="mm/dd/yy" />

    <!-- Departure Location -->
    <select class="blueskybooking-widget-search-departure_location_id
                   blueskybooking-widget-search-location-unselected-allowed
                   blueskybooking-widget-status-departure_location_id
                   blueskybooking-widget-status-location-unselected-allowed">
      <option value="-1">Departure</option>
    </select>

    <!-- Swap Departure / Return (Optional) -->
    <a class="blueskybooking-widget-search-location-swap">Swap</a>

    <!-- Reset Departure / Return (Optional) -->
    <a class="blueskybooking-widget-search-location-reset">Reset</a>

    <!-- Arrival Location -->
    <select class="blueskybooking-widget-search-arrival_location_id
                   blueskybooking-widget-search-location-unselected-allowed
                   blueskybooking-widget-status-arrival_location_id
                   blueskybooking-widget-status-location-unselected-allowed">
      <option value="-1">Arrival</option>
    </select>

    <!-- Departure Pickup (Optional) -->
    <select class="blueskybooking-widget-search-departure-pickup">
      <option value="" selected="selected">Pickup</option>
    </select>

    <!-- Departure / Dropoff (Optional) -->
    <select class="blueskybooking-widget-search-departure-dropoff">
      <option value="" selected="selected">Dropoff</option>
    </select>

    <!-- Return / Pickup (Optional) -->
    <select class="blueskybooking-widget-search-return-pickup">
      <option value="" selected="selected">Pickup</option>
    </select>

    <!-- Return / Dropoff (Optional) -->
    <select class="blueskybooking-widget-search-return-dropoff">
      <option value="" selected="selected">Dropoff</option>
    </select>

    <!-- Departure Date -->
    <input type="date" class="blueskybooking-widget-search-departure_date
                              blueskybooking-widget-status-departure_date">

    <!-- Departure Date Range (Optional) -->
    <select class="blueskybooking-widget-search-departure_date_range">
      <option value="0">+/- 0 days</option>
      <option value="1">+/- 1 days</option>
      <option value="2">+/- 2 days</option>
      <option value="3">+/- 3 days</option>
    </select>

    <!-- Departure Time Range (Optional) -->
    <select class="blueskybooking-widget-search-departure_time_range">
      <option value="0,1440">Any Time</option>
      <option value="0,720">Morning</option>
      <option value="720,1080">Afternoon</option>
    </select>

    <!-- Return -->
    <input type="checkbox" class="blueskybooking-widget-search-return">

    <!-- Return Date -->
    <input type="date" class="blueskybooking-widget-search-return_date" disabled="disabled">

    <!-- Return Date Range -->
    <select class="blueskybooking-widget-search-return_date_range" disabled="disabled">
      <option value="0">+/- 0 days</option>
      <option value="1">+/- 1 days</option>
      <option value="2">+/- 2 days</option>
      <option value="3">+/- 3 days</option>
    </select>

    <!-- Return Time Range -->
    <select class="blueskybooking-widget-search-return_time_range" disabled="disabled">
      <option value="0,1440">Any Time</option>
      <option value="0,720">Morning</option>
      <option value="720,1080">Afternoon</option>
    </select>

    <!-- Return Location (Optional) -->
    <input type="checkbox" class="blueskybooking-widget-search-return_location" disabled="disabled">
    <select class="blueskybooking-widget-search-return_location_id" disabled="disabled"></select> 

    <!-- Passenger Types [ul style] -->
    <div class="blueskybooking-widget-search-types-DISABLED">
      <ul class="blueskybooking-widget-search-types-model-DISABLED" style="display: none;">
        <li>
          <input type="hidden" class="blueskybooking-widget-search-types-weight_id" />
          <select class="blueskybooking-widget-search-types-total">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
          </select>
        </li>
        <li><span class="blueskybooking-widget-search-types-gender"></span></li>
        <li><span class="blueskybooking-widget-search-types-web_preview"></span></li>
      </ul>
    </div>

    <!-- Passenger Types [table style] -->
    <table class="blueskybooking-widget-search-types">
      <!--<tr>
        <th>#</th>
        <th>Gender</th>
        <th>Description</th>
      </tr>-->
      <tr class="blueskybooking-widget-search-types-model" style="display: none;">
        <td>
          <input type="hidden" class="blueskybooking-widget-search-types-weight_id" />
          <select class="blueskybooking-widget-search-types-total">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
          </select>
        </td>
        <td><span class="blueskybooking-widget-search-types-gender"></span></td>
        <td><span class="blueskybooking-widget-search-types-web_preview"></span></td>
      </tr>
    </table>

    <!-- Maximum Passengers (Optional, Default 6) -->
    <input type="hidden" class="blueskybooking-widget-search-types-maximum" value="6" />

    <!-- Maximum Passengers Warning (Optional) --> 
    <div class="blueskybooking-widget-search-types-warning" style="display: none;">
      Maximum number of passengers has been reached
    </div>

    <!-- Sort by Lowest Price (Optional) -->
    <input id="chkSorting" type="checkbox" class="blueskybooking-widget-search-sorting">
    <label for="chkSorting">Lowest Price</label>

    <!-- Agent # (Optional) -->
    <input type="hidden" class="blueskybooking-widget-search-agent_id" value="n" />

    <!-- Widget Search -->
    <input type="button" class="blueskybooking-widget-book" value="Search" /> |
    <a class="blueskybooking-widget-book">Search</a>

    <!-- Widget Current Status -->
    <input type="button" class="blueskybooking-widget-status" value="Status" /> |
    <a class="blueskybooking-widget-status">Status</a>
  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

<html>

<head>

</head>

<body>

<select class="blueskybooking-widget-search-departure_location_id

blueskybooking-widget-search-location-unselected-allowed

blueskybooking-widget-status-departure_location_id

blueskybooking-widget-status-location-unselected-allowed">

<option value="-1">Departure</option>

</select>

<a class="blueskybooking-widget-search-location-reset">Reset</a>

<select class="blueskybooking-widget-search-arrival_location_id

blueskybooking-widget-search-location-unselected-allowed

blueskybooking-widget-status-arrival_location_id

blueskybooking-widget-status-location-unselected-allowed">

<option value="-1">Arrival</option>

</select>

<option value="" selected="selected">Pickup</option>

</select>

<option value="" selected="selected">Dropoff</option>

</select>

<option value="" selected="selected">Pickup</option>

</select>

<option value="" selected="selected">Dropoff</option>

</select>

<input type="date" class="blueskybooking-widget-search-departure_date

blueskybooking-widget-status-departure_date">

</select>

<option value="0,720">Morning</option>

<option value="720,1080">Afternoon</option>

</select>

</select>

<option value="0,720">Morning</option>

<option value="720,1080">Afternoon</option>

</select>

<li>

</select>

</li>

</ul>

</div>

<!--<tr>

<th>Gender</th>

<th>Description</th>

</tr>-->

<td>

</select>

</td>

</tr>

</table>

Maximum number of passengers has been reached

</div>

<label for="chkSorting">Lowest Price</label>

<input type="button" class="blueskybooking-widget-book" value="Search" /> |

<a class="blueskybooking-widget-book">Search</a>

<input type="button" class="blueskybooking-widget-status" value="Status" /> |

<a class="blueskybooking-widget-status">Status</a>

</body>

</html>

» Create a login widget

Current Status

The following code is the minimum requirement for the current status.

<html>
  <body>
    <!-- Departure Location -->
    <select class="blueskybooking-widget-search-departure_location_id
                   blueskybooking-widget-status-departure_location_id
                   blueskybooking-widget-status-location-unselected-allowed"></select>
 
    <!-- Arrival Location -->
    <select class="blueskybooking-widget-search-arrival_location_id
                   blueskybooking-widget-status-arrival_location_id
                   blueskybooking-widget-status-location-unselected-allowed"></select>

    <!-- Status Date (Optional) -->
    <input type="date" class="blueskybooking-widget-search-departure-date
                              blueskybooking-widget-status-departure-date">

    <!-- Widget Status -->
    <input type="button" class="blueskybooking-widget-status" value="Status" /> |
    <a class="blueskybooking-widget-status">Status</a>
  </body>
</html>

<html>

<body>

<select class="blueskybooking-widget-search-departure_location_id

blueskybooking-widget-status-departure_location_id

blueskybooking-widget-status-location-unselected-allowed"></select>

<select class="blueskybooking-widget-search-arrival_location_id

blueskybooking-widget-status-arrival_location_id

blueskybooking-widget-status-location-unselected-allowed"></select>

<input type="date" class="blueskybooking-widget-search-departure-date

blueskybooking-widget-status-departure-date">

<input type="button" class="blueskybooking-widget-status" value="Status" /> |

<a class="blueskybooking-widget-status">Status</a>

</body>

</html>

Technical

Departure Date

Class:
blueskybooking-widget-search-departure_date
blueskybooking-widget-status-departure_date

Syntax:
Departure_Date=mm/dd/yyyy

Example:
Departure_Date=11/22/2020

Return

A flag to enable return listings for booking.

Class:
blueskybooking-widget-search-return

Syntax:
Return={0,1}

Default:
0

Example:
Return=1

Return Date

Class:
blueskybooking-widget-search-return_date

Syntax:
Return_Date=mm/dd/yyyy

Requirements:
Return=1

Example:
Return_Date=11/22/2020

Departure Location

Class:
blueskybooking-widget-search-departure_location_id
blueskybooking-widget-status-departure_location_id

Syntax:
Departure_Location_ID=n

Example:
Departure_Location_ID=123

Options:
blueskybooking-widget-search-location-unselected-allowed
blueskybooking-widget-status-location-unselected-allowed

Arrival Location

Class:
blueskybooking-widget-search-arrival_location_id
blueskybooking-widget-status-arrival_location_id

Syntax:
Arrival_Location_ID=n

Example:
Arrival_Location_ID=123

Options:
blueskybooking-widget-search-location-unselected-allowed
blueskybooking-widget-status-location-unselected-allowed

Pickup / Dropoff

Class:
blueskybooking-widget-search-departure-pickup
blueskybooking-widget-search-departure-dropoff
blueskybooking-widget-search-return-pickup
blueskybooking-widget-search-return-dropoff

Syntax:
Departure_Pickup={string}
Departure_Dropoff={string}
Return_Pickup={string}
Return_Dropoff={string}

Example:
Departure_Pickup=Windy%20Harbour
Departure_Dropoff=Premier%20Hotel
Return_Pickup=Premier%20Hotel
Return_Dropoff=

Departure Date Range

Number of +/- days to display for the departure date.

Class:
blueskybooking-widget-search-departure_date_range

Syntax:
Departure_Date_Range=n

Options:
0, 1, 2, 3

Default:
0

Example:
Departure_Date_Range=1

Return Date Range

Number of +/- days to display for the return date.

Class:
blueskybooking-widget-search-return_date_range

Syntax:
Return_Date_Range=n

Options:
0, 1, 2, 3

Default:
0

Example:
Return_Date_Range=3

Departure Time of Day

Class:
blueskybooking-widget-search-departure_time_range

Syntax:
Departure_Time_Range=x,y

Options:
0,1440 (Anytime)
0,720 (Morning)
720,1080 (Afternoon)
1080,1440 (Evening)

Default:
0,1440

Example:
Departure_Date_Time=0,720

Return Time of Day

Class:
blueskybooking-widget-search-return_date_range

Syntax:
Return_Time_Range=x,y

Options:
0,1440 (Anytime)
0,720 (Morning)
720,1080 (Afternoon)
1080,1440 (Evening)

Default:
0,1440

Example:
Return_Date_Time=0,720

Passenger Types

The passenger type defines the gender, seat, weight and fare allocation of each customer.
A parameter can be sent for each passenger type.

A list of passenger types ID numbers obtained from the API
https://api.blueskybooking.net/genders/?Web=True

» Connecting to the API (Pending)

Classes:
blueskybooking-widget-search-types
blueskybooking-widget-search-types-model
blueskybooking-widget-search-types-weight_id
blueskybooking-widget-search-types-total
blueskybooking-widget-search-types-gender
blueskybooking-widget-search-types-web_preview

blueskybooking-widget-search-types-maximum

blueskybooking-widget-search-types-warning

Syntax:
Weight_ID[{Weight_ID}]=n

Example:
Weight_ID[4]=1&Weight_ID[22]=2&Weight_ID[18]=0

Sorting

Sorting of booking results by time of day or grouped by price.

Class:
blueskybooking-widget-search-sorting

Syntax:
Sorting=n

Options:
0 (Time)
1 (Lowest price)

Default:
0

Example:
Sorting=1

Segments

Select specific segments to filter the booking results.

A list of segment ID numbers obtained from the API
https://api.blueskybooking.net/segments/

» Connecting to the API (Pending)

Class:
(No class)

Syntax:
Segment_ID=x,y,z

Example:
Segment_ID=8,2,41,22

Classes

Select a single specific class to filter the booking results.
Examples: First class, Business class, Economy

A list of class ID numbers obtained from the API
https://api.blueskybooking.net/classes/ (Pending)

» Connecting to the API (Pending)

Class:
(No class)

Syntax:
Class_ID=n

Example:
Class_ID=132

Tiers

Select a single specific tier to filter the booking results.
Examples: Premium, Regular, Saver

A list of tier ID numbers obtained from the API
https://api.blueskybooking.net/tiers/

» Connecting to the API (Pending)

Class:
(No class)

Syntax:
Tier_ID=n

Example:
Tier_ID=41

Search Button|Link

Class:
blueskybooking-widget-book

Example:
<a class=”blueskybooking-widget-book”>Search</a>

Status Button|Link

Class:
blueskybooking-widget-status

Example:
<a class=”blueskybooking-widget-status”>Status</a>