You can use the button directive to add the buttons that do a variety of actions.
The directive “type” should be “button”.
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 Post Request code
msg.payload.orbita.directive= [{ "type": "button", "buttons": [ { "text": "Button with Post 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 the script language. Here we have put “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;