How to set up Instant Book Availability Widget

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

This help document will explain how to set up the Instant Book Availability Widget.



TABLE OF CONTENTS

Setup venuedirectory availability widget


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>                                                 


Step 3. Configure and initialise the widget

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>                                                 


Default Availability Widget Layout 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


Widget HTML Markup

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. 

5. Preview the result


Test 

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article