가입

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}');
방법 결과
응답 본문
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!

왜 전세계의 수많은 비즈니스들이 저희 SimplyBook.me API (응용프로그램 인터페이스) 를 선택할까요?

명확하고 간단한 인터페이스. 최상의 방법으로 귀사만의 예약 서비스를 구축해 드립니다.

귀하께서 필요로하시는 모든 기능을 손쉽게 플러그인 할 수 있습니다.

실시간 스케줄링 – 귀하의 고객들은 24시간 언제든, 어디서건 귀하와 예약을 완료할 수 있습니다.

저희 앱은 여러분에게 또 다른 유용한 기능을 제공합니다. 앱의 기능에 대해 더 알아 보려면 여기를 클릭하세요.

지원 센터 질문이 있나요?
개발자

고객들이 당신의 앱을 떠나지 않고 서비스를 예약할 수 있는 기능을 즐겨보세요!

귀하의 고객들과 그분들이 원하시는 가게/서비스를 연결시켜 주는 기능을 제공하여, 귀사의 웹사이트의 사업성과 수익성을 증가시켜보세요. 저희 SimplyBookMe의 API (응용프로그램 인터페이스)를 사용하시면, 귀하의 웹 페이지에 '직접 예약하기'버튼이 설치되어, 귀하의 고객들께서 원하시는 서비스를 직접 쉽고 간편하게 예약하실 수 있습니다.

저희의 API (응용프로그램 인터페이스)를 이용하시면, 귀사의 고객들이 귀사의 서비스를 예약할 때 필요한 모든 절차를 간편하게 해결할 수 있습니다.

고객들의 귀사의 비즈니스 스케줄과 직접 연결하여, 상거래의 완전히 새롭고 손쉬운 기능을 전달합니다. 귀하의 홈페이지, 혹은 앱 상에서 고객들이 직접 예약을 완료할 수 있으므로 고객 잠재력 뿐만 아니라, 더 향상된 토털 고객 만족 서비스를 구축하실 수 있습니다.