How to set up Instant Book Availability Widget

Modified on Mon, 18 Sep, 2023 at 4:22 PM

TABLE OF CONTENTS

Setup venuedirectory availability widget
Setup venuedirectory WordPress availability plugin

Setup information for the wordpress version of the plugin can be found here

Step 1. Include the Javascript file to the HEAD section of your web page

<script src="//www.smallmeetings.co.uk/widget/scripts/availability.min.js" type="text/javascript"></script>

Step 2. Add a widget container div

Add a container div for the widget in the BODY section of your web page, the content of the widget will be injected into this container. The ID of the container needs to be specified in the initialisation script in the next step.

Example

<body>      <div id="widget-holder"></div></body>                                                 

The widget has following configuration parameters:

availabilityWidget.init(container,  // *required: your HTML page element the widget will be appended to, e.g. <div>, <p>, etc.
key,        // *required: a unique key that identifies your venue or group. This will be given to you by Venuedirectory
options     //  optional: widget style settings
{   
 columns, // 1, 2, 3 or 4 column layout, default value is 3 
 labelColour, // caption colour, default value is grey #666
 buttonColour, // button colour, default value is green #367a01
 buttonText,  // submit button text, default value is 'Search'
 inheritParentDatepickerStyle, // inherit jquery datepicker style from the parent website, dafault value is false
 maxDelegatesNumber // the maximum number of delegates, default value is 30
}
);

For stability, it is advised to place the script at the end of the HTML document, before the closing 'body' tag.

Example #1 (default layout and styling)

<script type="text/javascript">                          availabilityWidget.init("#widget-holder","key");</script>                                                 

Pic. 1. Default Availability Widget Layout

Example #2 (1 column layout and configured styling)

<script type="text/javascript">                          availabilityWidget.init("#widget-holder","key",{ columns:1, labelColour: '#fff', buttonColour:'#cc2a37',buttonText:'check availability'});</script>                                                 

Default Availability Widget Layout Pic. 2. Availability Widget Configured Layout

Custom layout and styling

If needed the widget content can be styled locally on your page. Please review the widget structure.

Widget Content

Field container * Available to venue groups only

Venue/Location Label

Dropdown List

Field container

Arrival Date Label

Datepicker

Field container

Number of Delegates Label

Input Field

Field container

Submit Button

Below is an example HTML markup rendered by the widget, the IDs and class names highlighted can be used for styling customisations. (Please note, the HTML code like below should be automatically generated by the widget, please do not copy and paste the example code to your webpage)

<div id="widget-holder"><div id="tvd-widget-availability">
<div id="widget-box" class="widget-box">
<div class="widget-venue-div widget-item-holder">
<p id="widget-venue-label" class="widget-label"> Choose venue / location </p>
<select id="tvd-widget-availability-ddlVenue" class="widget-select-venue"><option>...</option></select>
</div>
<div class="widget-arrival-div widget-item-holder">
<p id="widget-arrival-label" class="widget-label"> Arrival date </p>
<div>
<span class="widget-datepicker-arrival-container">
<input type="text" id="tvd-widget-availability-dpArrivalDate" class="widget-datepicker-arrival" readonly="readonly" value="">
</span>
</div>
</div>
<div class="widget-delegates-div widget-item-holder"> 
<p id="widget-delegates-label" class="widget-label"> Delegates </p>
<div>
<input id="tvd-widget-availability-Delegate" type="number" min="1" max="30" step="1" class="widget-input-delegates" value="1" />
</div>
</div> 
<div class="widget-search-div widget-item-holder">
<p> &nbsp;</p>
<input type="submit" value="Search" id="tvd-widget-availability-btnSearch">
</div>
</div>
<div style="clear:both";>
</div>
</div>

Custom Styled Availability Widget Layout Pic. 3. Custom Availability Widget Layout

Setup venuedirectory WordPress availability plugin

1. Download the zipped version of an availability plugin from here.

2. In your wordpress admin area go to "Plugins" -> "Add new" press "Upload plugin" and select the downloaded zip file.

3. Go to "Plugins" -> "Installed Plugins" and find "Venuedirectory Live Availability Widget". Click "Activate"

4. Go to "Appearance" -> "Widgets" and drag the "Live Availability" widget to an area where you want your plugin to be displayed.

The "Live Availability" widget has a number of settings: expand the widget form and enter your widget key that will be supplied to you by Venuedirectory. In addition to the widget key, you can specify the widget display options, e.g. number of columns, button text and colour, section name, etc.