The BookingBug Javascript API is a powerful set of tools that you can use in any web page that allows you to embed javascript.
It’s designed to be extremely simple to use, even for someone with only basic HTML skills and no Javascript experience. It’s also designed to be flexible and powerful enough to enable even the most demanding or sophisticated use cases.
Here is an example which shows a list of bookable services which a company offers through BookingBug.
<script src="http://uk.booking-bug.com/assets/widget.js"></script><div ng-app="BB" ng-controller="BBCtrl" ng-init="set_company(14, 'http://uk.booking-bug.com', './', 'none')"> <div ng-controller="ServiceList"> <div ng-repeat="service in items"> <h3>{{service.name()}}</h3> </div> </div> </div>
You can edit this and see it in action in a plnkr here
The BookingBug Javscript API is in fact built on top of the Google library Angular JS
It then in turn uses the BookingBug REST API to access data, which means that you can also use the REST API on top, and extend the Javascript API as much as you need for different businesses and use cases.
The API makes use of HTML attributes to identify important sections of your page in which to add data or respond to actions. These special attributes derive different meaning, such as specifying the data you wish to load, controlling a loop around a list of items, or deciding which HTML elements to show or hide in different circumstances.
Angular JS uses a notation to display custom data embedded directly in your HTML. The BookingBug script parses these special tags when it loads to replace with the correct live data. This allows you to show dynamic and real-time data quickly and easily in your website. That data could be anything from a list of services you offer, to the number of spaces remaining for an event.
A key part of the booking process is the need for the customer to navigate around a clear and simple interface that starts with them seeing services and availability, and ends with them receiving a confirmation of their booking. BookingBug gives you, the developer or web designer, complete flexiblity over this journey. Our role is to help provide the data and the tools – not to tell you how your website should look and feel – every business is different!
A key part of how BookingBug makes this possible without using iframes is to use a series of HTML partials. We can host and run these partials, or you can host them in your own site as you help the client navigate through the checkout. These can be full pages, popups, or just small AJAX loaded pages. BookingBug gives you the tools to nagivate and cache the data and pages creating a smooth, rich customer experience. We are also working on a host of examples and demos you can copy and customize and tailor for your own needs and requirements.
The fastest way to get started is to use the Yeoman generator generator-bookingbug
Install the required tools: yo, gulp, bower
npm install -g yo gulp bower
Install generator-bookingbug
npm install -g generator-bookingbug
Generate new project
yo bookingbug
