Prerequisites
To render the scheduler directive, you should switch to chatbot version - v2 in the Bot view template node.
API to get the scheduled times.
URLs of the images from Orbita backend. see How do I upload an image? for more information.
Scheduler
The Scheduler directive lets you render the time and date in a window from which the user can choose the time and date of his/her appointment.
Sample scheduler directive
if(!msg.payload.orbita) { msg.payload.orbita = {} } // Set the Url for getting time slots var timeSlotsServerURL = '/oeapi/gettimeslots-support'; // Create the scheduler Directive msg.payload.orbita.directive= [{ "type": "scheduler", "title": "<h3>Title of the Window</h3>", "headercard": { "fullName": "Header Text", "imageUrl": "https://s3.amazonaws.com/orbitahealth/clients/aurora/assets/dynamic/images/orbitascheduler13d408b0-32af-11ea-9bc7-5d28415c60bb.png", "address": "Header address", "name": "Header Name", "description": "Header Description" }, "calendar": { "startDate": "", // if empty start from current date "endDate": "", //if empty end with next 30 day's, "title": `<strong>Available Times:</strong>`, "description": "Please select a time that is convenient for you.", "getTimeUrl":timeSlotsServerURL, // http url to load the available slots dynamically. }, "subList": { "title": "Sublist title", "items": [{ "fullName": "Item fullname 1", "imageUrl": "https://s3.amazonaws.com/orbitahealth/clients/sandbox5/assets/dynamic/images/smallimage192c03a10-384d-11ea-9e3c-4750e1188599.jpg", "description": "Item description 1", "name": 'Item Name 1', "address": '', "phone": '', "paramValue":'Param1', "paramName": `facility`, }, { "fullName": "Item fullname 2", "imageUrl": "https://orbita.ai/wp-content/uploads/2017/08/vxhero_bg_v2.jpg", "description": "Item description 2", "name": 'Item Name 2', "address": '', "phone": '', "paramValue":'Param2', "paramName": `facility`, }, { "fullName": "Item fullname 3", "imageUrl": "https://s3.amazonaws.com/orbitahealth/clients/aurora/assets/dynamic/images/Bigimage3073a45d0-3393-11ea-9bc7-5d28415c60bb.jpg", "description": "Item description 3", "name": 'Item Name 3', "address": '', "phone": '', "paramValue":'Param3', "paramName": `facility`, }], }, "buttons": [{ "text": "Select Appointment", "type": "javascript", "value": "orbitaAction.schedulerDir.submitAction()", "icon": "<i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i>" }] }] return msg;
Parameters used for Scheduler
Parameter | Description |
---|---|
| The type property should be set as “scheduler”. |
| The Title of the Scheduler window. |
| headercard
|
| calendar
|
| sublist
The |
| button
Clicking on the button generates a chat bubble with the appointment details. You can change the contents of the chat bubble from the chat.js. (scheduler - index.js file) |
Time Slot API
You can use an API to create a set of timeslots for your selected item. The variable in the above example code is created for the same.
You should call the time slots from the API and pass them to the getTimeUrl
property.
Any changes to the time slots should be done in the API based on the paramValue
defined for each of the sublist items.
Sample code for Generate Slot function node
var result = []; var slots; if (msg.payload.facilityID == "Param1") { slots = [ {"text":"Morning","value":"10:30 AM"}, {"text":"Afternoon","value":"2:00 PM"}] } else if (msg.payload.facilityID == "Param2"){ slots = [ {"text":"Evening","value":"4:30 PM"}, {"text":"Night","value":"7:00 PM"}] } else { slots = [ {"text":"Morning","value":"10:30 AM"}, {"text":"Afternoon","value":"2:00 PM"}, {"text":"Evening","value":"4:30 PM"}, {"text":"Night","value":"7:00 PM"}] } msg.payload = slots return msg;
Sample Scheduler directive flow