It is extremely quick and easy to get started with the BookingBug Javascript API. Let’s start by understanding how to set up and load the right data:
<script src="http://uk.booking-bug.com/assets/widget.js"></script><div ng-app="BB" ng-controller="BBCtrl" ng-init="set_company(company: '14')"> ... </div>
The first <script> section here just loads the BookingBug widget script. This should be put at the <head> section of your web page.
This section initializes the specific company and associated information that you want to load. There are three important things to note here:
This needs to go in once for each widget you embed. It can be at the top of your page in the <html> tag, it could be in the <body> tag, or it can just be tightly bound to the div. It all depends whether you are using multiple widgets, or also using other AngularJS apps in the page. This is covered in more detail later.
The ng-controller atrribute is a key part of using BookingBug data in your webpage. The Controller creates a set of data and tools for you to use depending on the situation. There are controllers for displaying calenders, showing lists of services, collecting customer details and for checking out. Each controller creates a local context and set of data that can be used within it in the HTML DOM. In this case we are using the parent level BBCtrl which is used to hold the entire context of booking and checking out of a time slot or event.
This is an action to be called at the start of initialilizing the controller. In this case we are setting the company we wish to use by calling set_company
In this example we are only passing in one parameter, which is the BookingBug company ID you are loading, however in practice there are several parameters you can pass in, which you can see in the documenation on BBCtl.
