Взаимодействие с виджетом¶
Для передачи данных в виджет можно использовать url, добавляя определённые параметры и их значения, или метод postMessage
Передача данных пользователя на виджет¶
Для передачи в окно виджета, открытом на клиентском сайте, клиентских данных используется метод postMessage.
При открытии виджет отправляет сообщение 'widget.init',после которого можно вызвать метод postMessage с параметром name:'setClientData' и передать в объект data объект clientData, имеющий интерфейс IClientPresetData, описанный ниже
export interface IClientPresetData {
name?: string;
surname?: string;
patronymic?: string;
email?: string;
phone?: string;
extraID?: string;
extraData?: any;
birthday?: string;
comment?: string;
gender?: string; // NOT_SPECIFIED | MALE | FEMALE
insuranceNumber?: string;
insuranceProgram?: string;
receptionType?: string;
}
Фрагмент когда ниже выведет список сообщений, отправляемых виджетом в консоль, а также передаст клиентские данные в виджет.
window.addEventListener('message', function(event) {
'use strict';
var data = event.data;
var messageEvent = JSON.parse(data);
console.log(
'Message received event "' + messageEvent.name + '":',
messageEvent.data,
);
switch (messageEvent.name) {
case 'widget.init':
event.source.postMessage(
JSON.stringify({
name: 'setClientData',
data: {
clientData: {
name: 'tes2t',
surname: 'te2st',
patronymic: 't2est',
email: '[email protected]',
phone: '+79030864396',
extraID: '89030864396',
comment: 'Some important note',
extraData: {
calendarId: '89030864396',
},
birthday: '1986-11-24',
gender: 'MALE',
insuranceNumber: '12345',
insuranceProgram: 'ФАКТ',
receptionType: 'ST',
},
},
}),
'*',
);
break;
case 'appointment.confirm':
break;
case 'appointment.confirmFail':
break;
default:
break;
}
});
Список сообщений из виджета¶
| Название | Описание | Передаются данные |
|---|---|---|
| widget.init | Открытие виджета клиентом | |
| business.select | выбор филиала для записи ( не передаётся при открытии одиночного бизнеса ) | {business:{ id: string}} |
| widget.backclick | перемещение в виджете на предыдущий экран, очистка ранее выбранного параметра | {business:{ id: string},from:{ step: params.fromScreen }} |
| service.select | выбор услуги или категории для записи | {business:{ id: string} |
| service.group.select | выбор категории для записи | service:{ id: string, parent_id: string}} |
| resource.select | выбор услуги для записи | {business:{ id: string},resource:{ id: string}} |
| datetime.select | успешный выбор времени для записи, создание резерва | {business:{ id: string},selectedDateTime:{ date: String, time: string}} |
| datetime.selectFail | ошибка ри резервировании слота времени для записи, означает что создать резерв для записи по каким-то причинам не удалось | {business:{ id: string }, client: {extraID: string,extraData:any},appointment: {resourceId:string,taxonomyId:string}} |
| appointment.confirm | подтверждение записи , интерфейс данных | {business:{ id: string }, appointment:{ id: string}, client: { extraID: string, extraData: any}} |
| appointment.confirmFail | подтвердить резерв/создать запись не удалось | {business:{ id: string}, appointment:{ selectedTime: String, selectedDate: string,resourceId: string,taxonomyId:String}, client: { extraID: string, extraData: any }} |
Передача страховых данных в виджет через адресную строку¶
Для передачи Вида помощи и страховой программы можно использовать postmessage механизм, описанный выше, или адресную строку.
Для передачи данных через адресную строку необходимо сформировать JSON объект реализующий интерфейс IClientPresetData и обернуть его в encodeURI() или аналогичный кодирующий uri строку метод и передать через GET-параметр ClientJSON в адресную строку брузера, пример ссылки и JSON объекта:
const clientData = {
"name":"Вася",
"surname": "Пупкин",
"patronymic": "Леонидович",
"email": "[email protected]",
"phone": "+7903086493",
"extraID": "some id",
"extraData": "any data",
"birthday": "ММ.ДД.ГГГГ",
"comment": "string",
"gender": "MALE",
"insuranceNumber":"12345",
"insuranceProgram": "ФАКТ",
"receptionType": "ST",
}
const clientDataURI = encodeURI(JSON.stringify(clientData))
URL для открытия виджета тогда будет выглядеть следующим образом:
https://widget.med.me/?BUSINESS_ID=4000000006308&ClientJSON=%7B%22name%22:%22%D0%92%D0%B0%D1%81%D1%8F%22,%22surname%22:%22%D0%9F%D1%83%D0%BF%D0%BA%D0%B8%D0%BD%22,%22patronymic%22:%22%D0%9B%D0%B5%D0%BE%D0%BD%D0%B8%D0%B4%D0%BE%D0%B2%D0%B8%D1%87%22,%22email%22:%[email protected]%22,%22phone%22:%22+7903086493%22,%22extraID%22:%22some%20id%22,%22extraData%22:%22any%20data%22,%22birthday%22:%22%D0%9C%D0%9C.%D0%94%D0%94.%D0%93%D0%93%D0%93%D0%93%22,%22comment%22:%22string%22,%22gender%22:%22MALE%22,%22insuranceNumber%22:%2212345%22,%22insuranceProgram%22:%22%D0%A4%D0%90%D0%9A%D0%A2%22,%22receptionType%22:%22ST%22%7D
Для передачи кода филиала нужно использовать GET-параметр business, ссылка для подключения виджета в таком случае будет вести на список услуг и будет выглядить следующим образом
для Сетевого бизнеса:
https://widget.med.me/category?
business=someExtraId&
route=c|sc|s|l|r&
lang=ru-ru&
NETWORK_ID=311&
ClientJSON=%7B...%7D
для витрины:
https://widget.med.me/category?
business=someExtraId&
route=c|sc|s|l|r&
lang=ru-ru&
BUSINESS_ID=6000000006308&
ClientJSON=%7B...%7D
Передача данных договора¶
Для передачи данных о договоре ( если нужно передать только номер договора ) следует использовать GET-параметр contractID при вызове виджета, он будет соответстовать внутреннему порядковому номеру договора в системе Gbooking.
Если нужно передать больше данных, в том числе номер договора клиента, который будет осуществлять запись, данные следует представить в виде объекта, реализущего интерфейс IContract
interface IContract {
clientContractID?: string;
id?: string;
contractID?: string;
}
Подготовив объект contract вы можете передать его значение через postmessage, отправив событие с именем setContractData , либо перевести объект contract в строку и передать через GET параметр ContractJSON
window.addEventListener('message', function(event) {
'use strict';
var data = event.data;
var messageEvent = JSON.parse(data);
...
switch (messageEvent.name) {
case 'widget.init':
event.source.postMessage(
JSON.stringify({
name: 'setContractData',
data: {
contract
},
}),
'*',
);
break;
...
}
});