注册

API Documentation 技术文件

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}');
方法结果
响应内容
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();
方法结果
响应内容
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();
方法结果
响应内容
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);
方法结果
响应内容
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');
方法结果
响应内容
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]);
方法结果
响应内容
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');
方法结果
响应内容
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]);
	}
}
方法结果
响应内容
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);
方法结果
响应内容
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!

为何数以千计的客户都选择使用 SimplyВook.me API 呢？

简单利落的界面，轻松打造您自己的预约服务。

您可轻易地置入所有您需要的功能。

实时排程——您的客户能够天天 24 小时随时随地与您预约。

我们集成多种实用功能，打造专属预约管理 App 应用，点击这里查看更多 相关预约管理功能。

支持中心 需要协助吗？
开发人员

让您的客户不用离开您的应用程序就能预约服务！

提供您的客户发现在地商家时会想采取的动作，藉此让您的网站或应用程序更加贴切、迷人、更有效益。我们的 API 让您轻松在您的网页上直接添加一个「现在预约」的按钮，以让您的客户能够不分日夜做实时预约。

我们的 API 提供您所有需要的预约数据之访问权限，让您架构并配置适合您的客户群之预约功能。

藉由将客户连结至您的营业时间表，我们会创造一个全新的交易层面。我们相信直接在您的应用程序或网站上预约将允许我们提供您实际的有效客户，而不仅是潜在客户。