Iscriviti

Documentazione API

Get api token

Using Simplybook API methods require an authentification. To authorize in Simplybook API you need to get an access key — access-token. In order to get this access-token you should call the JSON-RPC method getToken on http://user-api.simplybook.me/login service passing your personal API-key. You can copy your API-key at admin interface: go to the 'Plugins' link and select API plugin 'Settings'.

var token = loginClient.getToken(companyLogin, apiKey);

var loginClient = new JSONRpcClient({
	'url': 'https://user-api.simplybook.me/login',
	'onerror': function (error) {
		alert(error);
	}
});
var token = loginClient.getToken('{companyLogin}', '{apiKey}');
Risultato del metodo
Corpo della risposta
Richiesta HTTP

Get event list

You have just received auth token. Now you need to create JSON RPC Client, set http headers and then use this client to get data from Simplybook server. To get services list use getEventList() function as it is shown in code example below.

var events = client.getEventList();

var client = new JSONRpcClient({
	'url': 'https://user-api.simplybook.me',
	'headers': {
		'X-Company-Login': '{companyLogin}',
		'X-Token': '{token}'
	},
	'onerror': function (error) {
		alert(error);
	}
});
var services = client.getEventList();
Risultato del metodo
Corpo della risposta
Richiesta HTTP

Get performer list

Also you need to get list of all service performers. For this purpose use getUnitList() function.

var units = client.getUnitList();

var performers = client.getUnitList();
Risultato del metodo
Corpo della risposta
Richiesta HTTP

Filter performers by service

Now let users select service and then performer. Please note that services can be attached to certain performer or can be provided by any performer from list. That is why you should filter performers before users make selection, use unit_map param in service object for this. See code example below.

// fetch service and performers selects here
var serviceId;
var performerId;
jQuery('#select_event_id').empty();
jQuery('#select_unit_id').empty();
jQuery('#select_event_id').append('<option value=""></option>');
jQuery('#select_unit_id').append('<option value=""></option>');
for (var id in services) {
    jQuery('#select_event_id').append('<option value="' + id + '">' + services[id].name + '</option>');
}
for (var id in performers) {
    jQuery('#select_unit_id').append('<option value="' + id + '">' + performers[id].name + '</option>');
}
jQuery('#select_event_id').change(function () {
	// service id
	serviceId = jQuery(this).val();
	var selectedService = services[serviceId];
	// filter available performers
	if (selectedService) {
		if (typeof(selectedService.unit_map) != 'undefined' && selectedService.unit_map.length) {
			jQuery('#select_unit_id option').attr('disabled', true);
			jQuery('#select_unit_id option[value=""]').attr('disabled', false);
			for (var i = 0; i < selectedService.unit_map.length; i++) {
				jQuery('#select_unit_id option[value="' + selectedService.unit_map[i] + '"]').attr('disabled', false);
			}
		} else {
			jQuery('#select_unit_id option').attr('disabled', false);
		}
	}
	jQuery('#eventId').val(serviceId).change();
});
jQuery('#select_unit_id').change(function () {
	performerId = jQuery(this).val();
});

Get closest day with available time slots

After user has selected service and perfomer you should get first working day for the selected performer and set it as datepicker active date. Use getFirstWorkingDay() function for this purpose.

var firstWorkingDay = client.getFirstWorkingDay(performerId);

var firstWorkingDay = client.getFirstWorkingDay(performerId);
Risultato del metodo
Corpo della risposta
Richiesta HTTP

Disable not working time in calendar

Becides setting active date in your datepicker you also can disable dayoffs in it using data of work calendar. See how the getWorkCalendar() function works in code example.

workCalendar = client.getWorkCalendar(year, month, performerId);

// Init datepicker.
var workCalendar = {};
jQuery('#datepicker').datepicker({
	'onChangeMonthYear': function (year, month, inst) {
		workCalendar = client.getWorkCalendar(year, month, performerId);
		jQuery('#datepicker').datepicker('refresh');
	},
	'beforeShowDay': function (date) {
		var year = date.getFullYear();
		var month = ("0" + (date.getMonth() + 1)).slice(-2);
		var day = ("0" + date.getDate()).slice(-2);
		var date = year + '-' + month + '-' + day;
		if (typeof(workCalendar[date]) != 'undefined') {
			if (parseInt(workCalendar[date].is_day_off) == 1) {
				return [false, "", ""];
			}
		}
		return [true, "", ""];
	}
});
var firstWorkingDateArr = firstWorkingDay.split('-');
workCalendar = client.getWorkCalendar(firstWorkingDateArr[0], firstWorkingDateArr[1], performerId);

jQuery('#datepicker').datepicker('refresh');
Risultato del metodo
Corpo della risposta
Richiesta HTTP

Get available time slots

When user has selected a date you can load time intervals when service is available to be booked. Use the getStartTimeMatrix() function to get list of start time of time slots.

var startMatrix = client.getStartTimeMatrix(from, to, eventId, unitId, count)

// Handle date selection
var count = 1; // How many slots book
function formatDate(date) {
	var year = date.getFullYear();
	var month = ("0" + (date.getMonth() + 1)).slice(-2);
	var day = ("0" + date.getDate()).slice(-2);
	
	return year + '-' + month + '-' + day;
}

function drawMatrix(matrix) {
	jQuery('#starttime').empty();
	
	for (var i = 0; i < matrix.length; i++) {
		jQuery('#starttime').append('<span data-time="' + matrix[i] + '">' + matrix[i] + '</span>');
	}
	jQuery('#starttime span').click(function () {
		startTime = jQuery(this).data('time');
		
		jQuery('#starttime span').removeClass('selected');
		jQuery(this).addClass('selected');
	});
}

jQuery('#datepicker').datepicker('option', 'onSelect', function () {
	var startDate = formatDate(jQuery(this).datepicker('getDate'));
	jQuery('#dateFrom, #dateTo').val(startDate);
	
	var startMatrix = client.getStartTimeMatrix(startDate, startDate, serviceId, performerId, count);
	
	drawMatrix(startMatrix[startDate]);
});
var startMatrix = client.getStartTimeMatrix(firstWorkingDay, firstWorkingDay, serviceId, performerId, count);
drawMatrix(startMatrix[firstWorkingDay]);
Risultato del metodo
Corpo della risposta
Richiesta HTTP

Check if additional fields plugin is activated

Now check if additional fields plugin is active to define what should be shown to client in the next step. See isPluginActivated() function usage example.

var additionalFieldsActivated = client.isPluginActivated('event_field');

var additionalFieldsActivated = client.isPluginActivated('event_field');
Risultato del metodo
Corpo della risposta
Richiesta HTTP

Get additional fields

If addtional fields plugin is active, you should load additional field list using getAdditionalFields() function and add them to client details form.

// load additional fields
var additionalFields = [];

function clearAdditionalFields() {
	jQuery('#additional-fields').empty();
	additionalFields = [];
}

function addAdditionalField(field) {
	var container = jQuery('<div class="form-group"></div>');
	var title = jQuery('<div class="control-label">' + field.title + '</div>');
			
	container.append(title);
			
	var fieldContainer = jQuery('<div class="field"></div>');
			
	container.append(fieldContainer);
			
	var fieldNode = null;
	switch (field.type) {
		case 'checkbox':
			fieldNode = jQuery('<input type="checkbox" name="' + field.name + '" id="' + field.name + '" value="1" />');
			if (field['default']) {
				fieldNode.attr('checked', true);
			}
			break;
		case 'select':
			fieldNode = jQuery('<select class="select select2" name="' + field.name + '" id="' + field.name + '"></select>');
			var values = field.values.split(',');
			for (var k = 0; k < values.length; k++) {
				fieldNode.append(jQuery('<option value="' + values[k].trim() + '">' + values[k].trim() + '</option>'));
			}
			if (field['default']) {
				fieldNode.val(field['default']);
			}
			break;
		case 'textarea':
			fieldNode = jQuery('<textarea name="' + field.name + '" id="' + field.name + '"></textarea>');
			if (field['default']) {
				fieldNode.val(field['default']);
			}
			break;
		default:
			fieldNode = jQuery('<input type="text" name="' + field.name + '" id="' + field.name + '" />');
			if (field['default']) {
				fieldNode.val(field['default']);
			}
			break;
	}
	if (fieldNode) {
		if (field.type == 'checkbox') {
			fieldNode.addClass('checkbox');
		} else {
			fieldNode.addClass('form-control');
		}
		fieldContainer.append(fieldNode);
		jQuery('#additional-fields').append(container);
	}
}

if (additionalFieldsActivated) {
	clearAdditionalFields();
	additionalFields = client.getAdditionalFields(serviceId);
	for (var i = 0; i < additionalFields.length; i++) {
		addAdditionalField(additionalFields[i]);
	}
}
Risultato del metodo
Corpo della risposta
Richiesta HTTP

Perform booking

After client has filled his information into additional fields you should start booking process by calling book() method.

// Collect client data
var clientData = {
	'name': jQuery('#clientName').val(),
	'email': jQuery('#clientEmail').val(),
	'phone': jQuery('#clientPhone').val()
};
// Collect additional fields
var additionalFieldValues = {};
jQuery('#additional-fields input, #additional-fields select, #additional-fields textarea').each(function () {
	var val = '';
	if (jQuery(this).attr('type') == 'checkbox') {
		if (jQuery(this).is(':checked')) {
			val = 1;
		} else {
			val = 0;
		}
	} else {
		val = jQuery(this).val();
	}
	additionalFieldValues[jQuery(this).attr('name')] = val;
});
var count = 1;

var result = client.book(serviceId, performerId, startDate, startTime, clientData, additionalFieldValues, count);
Risultato del metodo
Corpo della risposta
Richiesta HTTP

Summary

It was simple example how you can use Simplybook API. Check out all available API methods here. Feel free to contact us and ask any questions.

Thank you for reading!

Perché migliaia di clienti scelgono l'API SimplyBook.me?

Interfaccia chiara e semplice. Costruire il tuo sito di prenotazioni personale è facilissimo

Puoi attivare facilmente tutte le funzionalità di cui hai bisogno

Pianificazione in tempo reale – i tuoi clienti possono prenotare appuntamenti quando e dove vogliono 24 ore su 24 e 7 giorni su 7

La nostra applicazione ti offre un sacco di altre caratteristiche utili. Clicca qui per scoprire di più sulle nostre funzioni.

Centro assistenza Qualche domanda?
API

Fa in modo che i tuoi clienti prenotino i servizi senza abbandonare la tua app!

Rendi il tuo sito web o la tua app più importanti, coinvolgenti e redditizi, dando la possibilità ai tuoi clienti di poter fare quello che desiderano, scoprendo le attività commerciali locali. La nostra API renderà facile includere un pulsante 'Prenota ora' direttamente nel tuo sito web, consentendo ai tuoi clienti di pianificare appuntamenti in tempo reale, giorno e notte.

La nostra API ti da accesso a tutti i dati delle prenotazioni di cui hai bisogno per creare e offrire funzionalità di pianificazione al tuo gruppo di clienti.

Connettendo un cliente con la tua pianificazione aziendale, stiamo creando un nuovo modo di fare commercio. Riteniamo che la prenotazione diretta dell'appuntamento tramite la tua app o il nostro sito web ci consenta di farti trovare un nuovo cliente, non solo uno potenziale.