Table of Contents | ||
---|---|---|
|
You can use the We have introduced button directive to add the buttons that do a variety of actionsin 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.
...
Code Block |
---|
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
Code Block |
---|
msg.payload.orbita.directive= [{ "type": "button", "buttons": [ { "text": "Button with PostPatch 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; |
...
type: The “type” should be set to the script language. Here we have put “js” for JavaScript.
Sample Button code that executes a JavaScript
Code Block |
---|
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; |
Do not use single quotes (') in the value property.
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.
...
Attachments | ||||||||
---|---|---|---|---|---|---|---|---|
|
Note |
---|
If you are importing this Button Sample.json, please make sure that you have only one HelpIntent in your project. |
Related Articles
Filter by label (Content by label) | ||||||||
---|---|---|---|---|---|---|---|---|
|