Booking Alert

The Booking Alert widget allows you to display events relevant to a web search on your site and lets your users know of upcoming events explaining why demand might be high.

There are two main parts of a Booking Alert:

  • The JavaScript snippet
  • One or more DOM elements placed where you'd like the Booking Alert to show

Beta

The Booking Alert widget is only available to our selected Beta users, please contact us if you would like to use it on your site.


JavaScript Snippet

The Javascript Snippet is used to load the Booking Alert JavaScript file on your website. Once the JavaScript Snippet has loaded, it will look for and process Booking Alert DOM Elements.

Copy and paste the JavaScript snippet into the page(s) you'd like to show a Booking Alert on, before the </body> tag. The snippet should only appear once per page (even if you want to show more than one Booking Alert on the same page).


Booking Alert DOM Element

The Booking Alert DOM Element defines where the Booking Alert(s) should be placed. Make sure to replace {widget-id} with the Booking Alert widget ID you've been given.

Properties

There are a number of options you can specify in your Booking Alert by adding extra data-* parameters to the DOM element. Below are the parameters you can specify.

Key

Value

data-location string

Well formatted, location name. Either specify the location here, or use data-latlon. Note that only city, state/region and country names should be used.

E.g. New York, USA

data-latlon string

A geo centre in the form {latitude},{longitude} which should be combined with data-within

E.g. -36.844480,174.768368

data-within string

Radius from the geo centre specified in data-latlon in the form {radius}{unit}. The radius unit can be one of: m, km, ft, mi.

E.g. 10km

data-date date

UTC date to search events on in ISO 8601 format. Use either data-date or a combination of data-date-from and data-date-to.

E.g. 2016-02-14

data-date-from date

Search events that start after this date in UTC ISO 8601 format. Best used in combination with data-date-to.

E.g. 2016-02-13

data-date-to date

Search events that start before this date in UTC ISO 8601 format. Best used in combination with data-date-from.

E.g. 2016-02-15

data-categories string

A comma-separated list of categories. Supports any category as listed in the events documentation.

E.g. school-holidays,public-holidays

data-labels string

A comma-separated list of labels. Supports any label as listed in the events documentation.

E.g. holiday,observance

data-ranks number

A comma-separated list of numbers between 1 and 5, corresponding to the PredictHQ rank levels. The default ranks are 3,4,5

Possible values:

  • 1 - Minor (rank between 0 and 20).
  • 2 - Moderate (rank between 21 and 40).
  • 3 - Important (rank between 41 and 60).
  • 4 - Significant (rank between 61 and 80).
  • 5 - Major (rank between 81 and 100).

E.g. 4,5

data-max number

The maximum number of events to display. The default is 5. It is also possible to limit the number of results shown within the Booking Alert template.

E.g. 10


Methods

There's nothing more you need to do to get the Booking Alert up and running, but if you'd like more control over it, the following options are available.

Global Configuration

If you need to specify some global configuration options, add the following before the JavaScript snippet:

window._PHQConfig = {
    /* Below are some example settings
    bookingAlert: {
        autoload: true
    }
    */
};

Manually Load

In order to programmatically instantiate the Booking Alert widget, use the following method:

PredictHQ.app.bookingAlert.load();

If you have multiple Booking Alerts on the same page, you can pass the widget-id to the load method to specify which Booking Alert to load.

Note that by default the Booking Alert widget will automatically load when the page has finished loading. If you would like to prevent Booking Alerts from loading right away, you can add a global config object with autoload set to false as below:

window._PHQConfig = {
    bookingAlert: {
        autoload: false
    }
};

Manually Unload

If your website needs to remove old Booking Alerts from the page, use the following method:

PredictHQ.app.bookingAlert.unload();

If you have multiple Booking Alerts on the same page, you can pass the widget-id to the unload method to specify which Booking Alert to unload.


Template

Booking Alert templates can be fully customised. If you would like to customise the template for your Booking Alerts, please drop us a line.

Below is an example of the default Booking Alert template. The default template displays a maximum of 3 events. With the default template, clicking on an event title will open a new tab to show the event details.