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;
Usage
If you want a button to display when the help intent is triggered. Place a function node as shown in the below screenshot and place any of the sample codes given in this document.
If you are importing this Button Sample.json, please make sure that you have only one HelpIntent in your project.