1. Register your website as an application in Bookertools

Login to Bookertools and go to the Team > Applications page. (https://app.bookertools.com/team/applications)
Click the “Add Application” button and add  the website url of the WordPress website where you want to install the plug-in (e.g. http://www.bookingagency.com)

Copy the generated Key to your clipboard (select the Key and press Ctrl-C to copy, or click the copy icon next to the key)

2. Download the plugin

Download the plugin from the WordPress Store (search for Bookertools) or from this location
Login to your WordPress website and browse to the Plugins > Add New plugin.
Click the “Upload Plugin” button on top and install the “Bookertools Integration” plug-in.
After installation, activate the plug-in.

3. Setup the plug-in

In your WordPress website’s backend, browse to the Settings > Bookertools settings page.
Bookertools url field should have the “https://api.bookertools.com” as a value.

In the “Unique key” field, paste the application key received from the Bookertools application (on your clipboard – press Ctrl-V to paste – see 1)

Press the “Get Token” button and check if the “Key validated successfully” checkbox is checked.

4. Add the upcoming shows to your website

The Bookertools plug-in offers two ways of adding announced shows to your website :

1. WidgetAdd the list of upcoming shows to the one of the widget areas of your website by navigating to the Appearance > Widgets page.
   Drag the “Bookertools Shows” widget on the widget area you’d like to add the list of announced upcoming shows.
   Set the title and add a limit number of shows if necessary.
2. ShortcodeThe Bookertools plug-in also offers a shortcode which can be used on any page of your WordPress website.
   Just add the [bookertools_shows] shortcode on the page and this placeholder will be replaced by a list of shows in table format.Available shortcode parameters are :
   – limit : only show a limited number of upcoming shows
   usage : [bookertools_shows limit=”10″]- band : only show the upcoming shows of a particular band
   usage : [bookertools_shows band=”Madonna”]- venue : only show the upcoming shows in a particular venue
   usage : [bookertools_shows venue=”Madison Square Garden”]

5. Adjust the style by changing css

The table rendered by the “Bookertools Integration” plug-in uses clear css classnames which makes it easy to target and change the layout of each individual item through css.

The basic structure of the rendered table can be seen below :

<table class=”bookertools-data”>
<tbody>
<tr class=”header”>
<th scope=”col” class=”date”>Date</th>
<th scope=”col” class=”band”>Band</th>
<th scope=”col” class=”location”>Location</th>
<th scope=”col” class=”city”>City</th>
<th scope=”col” class=”country”>Country</th>
</tr>
<tr>
<td class=”date”>[ date of the show]</td>
<td class=”band”>[ name of the band]</td>
<td class=”location”>[location of the show]</td>
<td class=”city”>[show city]</td>
<td class=”country”>[show country]</td>
</tr>
… [ more shows ] …
</tbody>
</table>