Pitched Widget Integration

Include files

Please add the stylesheet within the HEAD tag, and the JavaScript file before the closing BODY tag.

// Include Styles within the HEAD tag.
<link  rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/pitched-widget-standard@latest/dist/pitched-widget-standard.min.css"/>

// Include Javascript before the closing BODY tag.
<script  src="https://cdn.jsdelivr.net/npm/pitched-widget-standard@latest/dist/pitched-widget-standard.min.js"></script>

Initialize Widget

Include this JavaScript code after you have included the JavaScript file above. Note that if your bookingURL contains api.pitchedbooking.com, you must include the 'key' argument.

// Create the widget
var widget =  new  PitchedWidget({

    // REQUIRED: Your booking URL
    'bookingURL': '...',
    
    // REQUIRED if your booking url contains api.pitchedbooking.com
    'key': '...',

    // REQUIRED: Add the widget to the element with this ID
    'appendTo': '#myWidgetContainer',

    // REQUIRED: Colour theme, hex or rgba colour
    'color': '#275881',

    // OPTIONAL: Change the label for adults
    'adultsLabel': 'Adults (18+)', 
    
    // OPTIONAL: Change the label for teenagers
    'teenagersLabel': 'Teenagers (13-17)', 
    
    // OPTIONAL: Change the label for children
    'childrenLabel': 'Children (4-13)', 
    
    // OPTIONAL: Change the label for infants
    'infantsLabel': 'Infants (0-3)',
    
    // OPTIONAL: Change the label for pets
    'petsLabel': 'Pets',
    
    // OPTIONAL: Change the search button label
    'buttonLabel': 'SEARCH', // Optional

    // OPTIONAL: Collapse the widget
    'collapsed': false, // true or false
    
    // OPTIONAL: Set a min date for the datepicker
    'minDate': new  Date(2020, 09, 30),
    
    // OPTIONAL: Can only book X days from min dates
    'daysOffset': 7,
    
    // OPTIONAL: Disables specific days of the week (example below disables mondays and tuesdays)
    'disableDaysOfWeek': [0, 1],
    
    // OPTIONAL: Open the results in a new tab (default is true)
    'openResultsInNewTab': true,
});