Guides

Javascript SDK

Suggest Edits

You can use the SDK with your own UI or with the provided Seatninja UI.

Using your own UI

Setup:

Include the main seatninja js file:

<script src="https://sdk.seatninja.com/web/sn.js"></script>

Initialization:

Before making any calls, you must first set the API key. The init call takes an object with an apiKey property and an optional isDebug property:

sn.setApiKey({apiKey: "YOUR_API_KEY"});

//or to use the sandbox environment:
sn.setApiKey({apiKey: "YOUR_API_KEY", isDebug: true});

Usage:

List of available methods:

sn.getReservation(customerId, reservationId);
sn.updateReservation(customerId, reservationId, reservationRequest); 
sn.deleteReservation(customerId, reservationId);
sn.checkInReservation(customerId, reservationId);
sn.confirmReservation(customerId, reservationId);
sn.getSections(restaurantId);
sn.getMemberTiers(restaurantId);
sn.createReservation(restaurantId, reservationRequest);
sn.addToWaitList(restaurantId, waitListRequest);
sn.getAvailableReservationTimes(restaurantId, date, partySize);
sn.getWaitTime(restaurantId);
sn.getWaitTimeBatch(restaurantId);
sn.getWaitTimeByPartySize(restaurantId, partySize);

The API calls use Promises, and will return a result object at success and an error object at failure.

Your code should look something like:

sn.getSections(123456).then(
	result => 
	{
		// do something with result object
	},
	error => 
	{
		// do something with error object
	});

For code requiring a waitlist create request, or a reservation create/update request, use the provided constructors. They take a single object argument, the properties that are defaulted to null are optional, the others are required:

Creating a reservation

/*
sn.ReservationRequest = function (
        {
            time,
            firstName,
            phoneNumber,
            email,
            partySize,
            customerId = null,
            lastName = null,
            imageUrl = null,
            memberNumber = null,
            memberTier = null,
            notes = null,
            partyFlags = null
        })  {…};
*/

let request = new sn.ReservationRequest({time: "2019-01-01T12:00:00.000Z", firstName: "Joe", lastName: "Customer", phoneNumber:"9165551212", email:"[email protected]", partySize: 4, customerId: "dw9mdk39d"});

sn.createReservation(restaurantId, request).then(
                result =>
                {
                    //do something
                },
                error =>
                {
                    //handle error
                }
            );

Creating a wait list

/*
sn.WaitListRequest = function (
        {
            time,
            firstName,
            phoneNumber,
            email,
            partySize,
            customerId = null,
            lastName = null,
            imageUrl = null,
            memberNumber = null,
            memberTier = null,
            notes = null,
            partyFlags = null
        })  {…};
*/

let request = new sn.WaitListRequest({firstName: "Joe", lastName: "Customer", phoneNumber:"9165551212", email:"[email protected]", partySize: 4, customerId: "dw9mdk39d"});

sn.addToWaitList(restaurantId, request).then(
                result =>
                {
                    //do something
                },
                error =>
                {
                    //handle error
                }
            );

Using the built-in UI

📘

Examples

You can see an examples of the buttons and the experience at https://sdk.seatninja.com/web/examples.html.

Setup:

Include both the main and UI Seatninja javascript files, as well as the Seatninja css file.

<link rel="stylesheet" href="https://sdk.seatninja.com/web/sn.css" type="text/css" />

<script src="https://sdk.seatninja.com/web/sn.js"></script>
<script src="https://sdk.seatninja.com/web/sn-ui.js"></script>

Initialization:

To use the UI SDK, you must first initialize the object. The init function takes an object with properties apiKey and restaurantId, and optionally customerId, callback, and isDebug:

sn.init({apiKey:"YOUR_API_KEY", restaurantId: "YOUR_RESTAURANT_ID"});

//or to use the sandbox environment:
sn.init({apiKey:"YOUR_API_KEY", restaurantId: "YOUR_RESTAURANT_ID", isDebug: true});

//if you were tracking customers you would initialize like this
sn.init({apiKey:"YOUR_API_KEY", restaurantId: "YOUR_RESTAURANT_ID", customerId:  "ID_OF_CUSTOMER_IN_YOUR_DATABASE"});

If you want to be notified when successful reservations/wait lists are created then supply a callback when initializing the SDK. The callback is called at creation and supplied the created object (or error).

sn.init({
    apiKey: "YOUR_API_KEY",
    restaurantId: "YOUR_RESTAURANT_ID",
    callback: function(error, result) {
        if (error != null) {
            //handle error
        } else {
            //do something with result
        }
    }
});

Usage:

You can either add the SDK provided button to start the reservation or waitlist process, or you can set up your own button to do so.

Using the SDK provided button

  1. Create a div with a unique ID.
  2. Call SDK method with the div's ID to create button:
// Create a WaitList button
sn.waitListUi("sn-addToWaitList");
  
// Create a reservation button
sn.reservationUi("sn-bookReservation");

Using your own button

Add an event handler to trigger the UI modal:

// show the wait list UI
onclick="sn.showWaitListSelector();"

// show the reservation UI
onclick="sn.showReservationSelector();"

Updated about 5 years ago