We have introduced button directive to add the buttons in the chatbot.
The directive “type” should be “button”.
The List of Buttons in the Button Directive are :
Default Button
Button with Link
Button with AJAX
Button with script
You can use the sample code given in the below sections in a function node to get the buttons in the chatbot.
Default Button
Using the default button, you can trigger a custom utterance upon button click.
Place the below code in the function node.
text: Text to show on the button.
value: Utterance that you wanted to trigger.
msg.payload.orbita.directive= [{
"type": "button",
"buttons": [
{
"text": "Default Button",
"value": "open"
}
]
}];
return msg;
Button with Link
You can open links upon button clicks.
In a new tab
In the same tab
Opening link in a new tab
text: Text to show on the button.
value: Place the URL here.
type: This property should be set “link” to use an URL in the value property.
msg.payload.orbita.directive= [{
"type": "button",
"buttons": [
{
"text": "Button with Link",
"value": "https://orbita.ai",
"type" : "link"
}
]
}];
return msg;
Opening link in the same tab
text: Text to show on the button.
value: Place the URL here.
type: This property should be set “link” to use an URL in the value property.
target: This property lets you choose where to open the link. If this property is set to “_blank”, the URL link will open in a new tab.
msg.payload.orbita.directive= [{
"type": "button",
"buttons": [
{
"text": "Button with Link and target",
"value": "https://orbita.ai",
"type" : "link",
"options":
{
"target": "_top" // default target is "_blank"
}
}
]
}];
return msg;
Button with AJAX
You can trigger any REST API methods using this type.
The default REST API method is get and the default content type is application/json
text: Text to show on the button.
value: Place the URL here.
type: This property should be set “ajax” to use REST API methods.
Sample Button directive with Get Request code
msg.payload.orbita.directive= [{
"type": "button",
"buttons": [
{
"text": "Button with Get Request",
"value": "https://randomuser.me/api/",
"type" : "ajax",
"options": {
"method": "get",
"contentType": "application/json"
},
"responseHandler": //optional
`if(error) {
console.log("error", error);
callback({utterance: "error"});
} else if(result) {
console.log("result", result);
callback({utterance: "help", data : result.results[0]});
}`
}
]
}];
return msg;
Sample Button directive with Patch Request code
msg.payload.orbita.directive= [{
"type": "button",
"buttons": [
{
"text": "Button with Patch request",
"value": "http://localhost:3030/api/projects",
"type" : "ajax",
"options": {
"method": "patch", //default method : get
"payload": {"q":{"condition":{"isDeleted":false},"sort":{"name":1}}},
"contentType": "application/json", //default contentType 'application/json'
},
"responseHandler":
`if(error) {
console.log("error", error);
callback({utterance: "open"});
} else if(result) {
console.log("result", result);
callback({utterance: "open", data: result});
}`,
},
]
}];
return msg;
Button with script
You can execute scripts inside the chatbot using this type of button.
text: Text to show on the button.
value: Place the script here.
type: The “type” should be set to “js” for JavaScript.
Sample Button code that executes a JavaScript
msg.payload.orbita.directive= [{
"type": "button",
"buttons": [
{
"type" : "js",
"text": "Button with script",
"value": `
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
console.log("Geolocation is not supported by this browser.");
callback({utterance: "help"});
}
function showPosition(position) {
console.log("Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude);
callback({utterance: "help", data: [position.coords.latitude, position.coords.longitude]});
}
`,
}
]
}];
return msg;