Directives are instructions sent from the server to the client, instructing the client to perform a specific action such as playing audio, displaying an image.
Directives can be used in a function node while creating a flow in the Experience Designer.
You can Validate the directives using postman too.
control how a client application renders an experience to an endpoint, such as an Echo Show, Google Home Hub, chatbot, Facebook messenger, and an IVR/phone experience, to name just a few.
It is used to control the experience, for example, log a user out, add a control to record audio, or add a carousel control for rending a list of objects, or buttons, or dynamic ajax adaptive cards, or any HTM5 card.
Directives are instructions sent from the server to the client, instructing the client to perform a specific action such as playing audio, displaying an image.
Directives can be created by a function node, injected after a SAY node in the Experience Designer.
You can Validate the directives using postman.
Orbita makes use of two kinds of directives:
Table of Contents | ||
---|---|---|
|
Directives that render information to the client
When the client invokes a flow that contains this kind of directivesdirective, the server will send the relevant information to the client and no further communication will happen.
...
HTML5
The HTML directive shows an HTML string or URL content within the chat bubble. If the directive object type is html5, then the server will render.
...
Output Payload: This code includes both html and url
Code Block |
---|
msg.payload.orbita.directive =.payload.orbita.directive = [{ type : "html5", options : { template : "500x500", html : "<!DOCTYPE > <html> <head> [{ type : "html5", options : <style> { template : "500x500", html : "<!DOCTYPE > div { width <html> : 900px; <head> <style>height : 100px; div { width : 900px; background-color : red; height -webkit-animation-name : 100pxexample; background-color -webkit-animation-duration : 4s; : red; animation-name -webkit-animation-name : example; -webkit-animation-duration : 4s; : 4s; animation-name } : example; @-webkit-keyframes example { animation-duration : 4s; from {background-color: red;} } @-webkit-keyframes example { to {background-color: yellow;} } @keyframes example from {background-color: red;} tofrom {background-color: yellowred;} } @keyframes example { to {background-color: yellow;} } </style> from {background-color: red;} </head> to {background-color: yellow;} } <body> <p><b>Note:</style>b> This example does not work in Internet Explorer 9 and earlier versions.</p> </head> <body><div></div> <p><b>Note:</b> ThisWhen examplean doesanimation notis workfinished, init Internetchanges Explorerback 9to andits earlieroriginal versionsstyle.</p> <div><</div>body> <p><b>Note:</b>html>", When an animation is} finished, it changes back}, to its original style.</p> { type : "html5", options : { template </body> : "500x500", url : "https://orbita.ai" } }]; </html>", } }, { return msg; |
The Output of “Options – html”.
...
The Output of “Options – url”.
...
Logout
When the client invokes the logout directive, the server responds with a popup window with a custom message.
...
Clicking OK redirects you to the home screen of the app.
...
Output Payload:
Code Block |
---|
msg.payload.orbita.directive = [{ type : "html5logout", options : {title template : "500x500Session logOut", url options : {message: "https://orbita.ai" You are logged out"} }]; return msg; |
The Output of “Options – html”.
...
The Output of “Options – url”.
...
Logout
When the client invokes the logout directive, the server responds with a popup window with a custom message.
...
Clicking OK redirects you to the home screen of the app.
...
Output Payload:
Text Break
The Text Break can be used on the chatbot where we need to provide breaks between conversations, like while transferring to a Live Agent.
Code snippet
Code Block |
---|
msg.payload.orbita.directive == [{ type: 'textbreak', options: { [{ primaryMessage: type"Transferring you to a :live "logoutagent.", //mandatory title secondaryMessage: "Session logOut12:45pm", //optional options : {messagetertiaryMessage: "YouSharron has areentered loggedthe out"}chat." //optional } }]; return msg; |
...
Directives that request information from the client and then render information
When the client invokes a flow that contains this kind of directive, the server responds by asking for input from the client. After the input from the client is received, the server stores the information and responds with a success or failure message.
...
Audio Recorder
If the type of the directive object is audiorecording, the Audio Recorder widget is rendered. It is a floating widget.
...
The success response from the audio upload contains the URL of the recorded audio.
Transcribe
If the type of the directive object is transcribe, the Transcribe widget is rendered. It is a floating widget.
...
After the conversion from speech to text is stopped, you can delete or upload the transcribed file using the Stop or upload buttons.
...
Date Picker
The Date picker directive lets you pick the date.
...
Click the calendar icon to open the Date picker widget.
...
Time Picker
The Time picker directive lets you pick the Time.
...
Select the hours or minutes or am/pm and use the up/down arrows to change.
Date and Time Picker
The Date and Time picker directive lets you pick the date and time simultaneously.
...
Select the hours or minutes or am/pm and use the up/down arrows to change. You can also choose Today’s date.
Reminder Directive
As an admin user, If the chatbot user does not reply for more than a predefined time, then you would like to remind the user that the bot is awaiting a response from the user. Reminder Directive is available to exactly fit this use case.
...
Code Block |
---|
var reminderDirective = { "directive" : [ { "type" : "reminder", "options" : { "waitTime" : "8000", "text" : "select any city name", "buttons" : { "name" : "buttons", "type" : "buttons", "choices" : [ { "text": "Mumbai", value: "Mumbai" }, { "text": "Delhi", value: "Delhi" } ] } } } ] } msg.payload.orbita = reminderDirective; return msg; |
Required parameters
type
The type field should be “reminder”
waitTime
The waitTime is the time, the chatbot will wait, before sending the reminder message.
text
The text is the reminder message.
...
Note: If the response already contains buttons and if you don’t provide the buttons property in the directive, then the chatbot will recall the buttons from the current response.
...
Optional Parameters
buttons
If you want custom buttons in the reminder directive, you can make use of buttons property. This is an optional field.
When you place the custom buttons in the reminder directive, it will override the buttons from the current response.
...
Validating directives in Postman
Login to Postman.
Select the method - POST.
Place the login endpoint in the space provided.
In the Body tab, paste the login credentials as input and click Send.
Code Block { “password” : “XXXXXXX”, “username” : “XXXXXXXX” }
If successful, you will receive a token.
Switch to the Headers tab, and paste the token that you obtained from the earlier step.
Provide the endpoint URL of your chatbot.
Click Send.
In the Body tab, Paste the code below to test the directive and click Send.
...
Code Block |
---|
{ "audio" : 0, "recognizedText" : "help", "utterance" : "transcribe directive", "sessionId" : "yzmTkldt1UehLIC3" } |
...
Example flow
The following image shows an example flow that triggers the directives when invoked with the respective intents.
...
Related Articles
Filter by label (Content by label) | ||||||||
---|---|---|---|---|---|---|---|---|
|