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
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
Step 3. Configure and initialise the widget
The widget has following configuration parameters:
Example #1 (default layout and styling)
Pic. 1. Default Availability Widget Layout
Example #2 (1 column layout and configured styling)
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 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)
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
Feedback sent
We appreciate your effort and will try to fix the article