Prerequisites
To render the scheduler directive, you should switch to chatbot version - v2 in 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
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 available slots dynamically, if not then will take default. query param will have param1, param2, param3 as doctor, hospital, date "availableTimes": [] }, "subList": { "title": "Sublist title", "items": [{ "fullName": "item name 1", "imageUrl": "https://s3.amazonaws.com/orbitahealth/clients/sandbox5/assets/dynamic/images/smallimage192c03a10-384d-11ea-9e3c-4750e1188599.jpg", "description": "Item description 1" }, { "fullName": "item name 2", "imageUrl": "https://orbita.ai/wp-content/uploads/2017/08/vxhero_bg_v2.jpg", "description": "Item description 2" }, { "fullName": "item name 3", "imageUrl": "https://s3.amazonaws.com/orbitahealth/clients/aurora/assets/dynamic/images/Bigimage3073a45d0-3393-11ea-9bc7-5d28415c60bb.jpg", "description": "Item description 3" }], }, "buttons": [{ "text": "Select Appointment", "type": "javascript", "value": "orbitaAction.schedulerDir.submitAction()", "icon": "<i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i>" }] }]
Parameters used for Scheduler
type
The type property should be set as “scheduler”.
title
The Title of the Scheduler window.
headercard
fullName - The full name of the Header.
imageUrl - The URL of the header image.
address - The address of the header.
name - Short name of the header to render it in the card.
description - The text from the description property is rendered in the scheduler window.
calendar
startDate - The date from which the calendar should start. If left empty, the calendar starts from the current date.
endDate - The date until which the calendar gets rendered. If left empty, the calendar ends after 30 days from the startDate.
title - The title for the timeslots section in the scheduler window.
description - The description for the timeslots section in the scheduler window.
getTimeUrl - API for fetching the available time slots. As an example, random time slots are generated and rendered using a function node in the sample flow json (attached).
sublist
title - The title of the sub-list section in the scheduler window.
items - Items can be a doctor, or a hospital, or a drive location, and so on.
fullName - Full name of the items.
imageUrl - Url of the item’s Image.
description - Description of the item.
button
text - The button text
value - The button action to be performed on click.
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)