Page Comparison

In this document, you will learn to use an HTML directive and get user input

For illustration, we will use a simple HTML form in the HTML directive to get the data from the user and post it to an intent.

Template node

Code Block

<html>
  <head>
      <style>
       </style>
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <form> 
        <p><label for="fname">First name:</label> <input type="text" id="fname" name="fname"></p> 

        <p><label for="lname">Last name:</label> <input type="text" id="lname" name="lname"></p> 
        <p style="text-align: center;"><button onclick="window.parent.htmlFormSendData(event)">Submit</button></p>
  
    </form>
  </body>
</html>

HTML Directive

Use the HTML form (above) in the HTML Directive (below).

Code Block

msg.payload.orbita = msg.payload.orbita || {};
    msg.payload.orbita.directive = msg.payload.orbita.directive || [];
    //node.warn(msg.payload.multiagent.chat.chatText );
    msg.payload.orbita.directive.push({
        type: "html5",
        options: {
            template: "400x150",
            url: `/oeapi/userdata`
        }
    });
return msg;

Property	Description
`type : “html5“`	The type should be set to html5 to invoke the HTML Directive.
`options: {}`	The options object contains the following properties. template html id renderBubble
`template : "300x300"`	(OPTIONAL) The template property defines the size of HTML content.
html: ``	URL to the HTML page
`id:"html-content-1"`	(OPTIONAL) This property helps to set the id value of the iframe.
`renderBubble : true`	(OPTIONAL) This property defines how to render the html5 directive in the chatbot. If it is true, it will render inside the chat bubble and if it is false it will render outside of the chat bubble. By default, the `renderBubble` is set to `true`

renderBubble: true

renderBubble: false

Bot View Template

To handle the Submit button from the HTML form, you have to create a function in the Custom JS tab of the Bot View Template node and use the self.submitQuery property.

If using an intent utterance to trigger an intent:

self.submitQuery('intent utterance','display text', 'Event', Custom Object}

if using an event to trigger the intent,

self.submitQuery('FlowMessageFreeTextEvent','display text', 'FlowMessageFreeTextEvent', Custom Object}

For event:

For utterance:

Code Block

var htmlFormSendData = function(e) { 
     var fname = $('#'+$('iframe').attr('id')).contents().find('#fname').val();
     var lname = $('#'+$('iframe').attr('id')).contents().find('#lname').val();
     // self.submitQuery('FlowMessageFreeTextEvent', 'Thanks','FlowMessageFreeTextEvent', { "fname": fname, "lname": lname });
     self.submitQuery('utterance intent formResult', 'Thanks','', { "fname": fname, "lname": lname });
    e.preventDefault();
 };

When the user fills the form and clicks the submit button, the intent utterance mentioned in the Bot view template code will be sent to cause the formResult intent to fire.

The example flow is in the attachment.

View filenameHTML_Directive.json

Your details Say node:

Code Block
Your details: First Name is : {{msg.payload.originalDetectIntentRequest.payload.extPayload.fname}} Last Name is : {{msg.payload.originalDetectIntentRequest.payload.extPayload.lname}}

Image Added

The example flow, everything except the javascript for the Bot View Template.

Code Block

[{"id":"9ab6af65.44a53","type":"function","z":"90a4d408.2e36e8","name":"html5 directive","func":"msg.payload.orbita = msg.payload.orbita || {};\n    msg.payload.orbita.directive = msg.payload.orbita.directive || [];\n    //node.warn(msg.payload.multiagent.chat.chatText );\n    msg.payload.orbita.directive.push({\n        type: \"html5\",\n        options: {\n            template: \"400x150\",\n            url: `/oeapi/userdata`\n        }\n    });\nreturn msg;\n\n","outputs":1,"noerr":0,"x":380,"y":500,"wires":[["922bf62f.856878"]]},{"id":"c9e83795.c44548","type":"alexa-http intent","z":"90a4d408.2e36e8","name":"","skillConfig":"91aa18ea.44c798","url":"/alexa_test","intent":"HTMLform","lastIntent":"anystate","x":150,"y":500,"wires":[["9ab6af65.44a53"]]},{"id":"8a4a97b2.9e0318","type":"alexa-http response","z":"90a4d408.2e36e8","name":"","x":820,"y":500,"wires":[]},{"id":"53341621.d9fbc8","type":"alexa-say","z":"90a4d408.2e36e8","name":"","saytext":"<p>Your details:</p><p>First Name is :  {{msg.payload.originalDetectIntentRequest.payload.extPayload.fname}}</p><p>Last Name is :  {{msg.payload.originalDetectIntentRequest.payload.extPayload.lname}}  </p>","reprompttext":"","chatText":"","chatRePrompt":"","screenShortTitle":"","screenLongTitle":"","screenBody":"","screenSmallImage":"","screenLargeImage":"","ablabel":"","endsession":false,"lastIntent":"","requireLastIntent":false,"buttons":"{\"type\":\"\",\"name\":\"\",\"choices\":[]}","exporttext":"{\n   \"voice\": {\n      \"sayText\": \"<p>Your details:</p><p>First Name is :  {{msg.payload.originalDetectIntentRequest.payload.extPayload.fname}}</p><p>Last Name is :  {{msg.payload.originalDetectIntentRequest.payload.extPayload.lname}}  </p>\",\n      \"rePrompt\": \"\"\n   },\n   \"chat\": {\n      \"chatText\": \"\",\n      \"rePrompt\": \"\"\n   },\n   \"screen\": {\n      \"shortTitle\": \"renderedShortTitle\",\n      \"longTitle\": \"renderedLongTitle\",\n      \"body\": \"\",\n      \"smallImage\": \"renderedSmallImage\",\n      \"largeImage\": \"renderedLargeImage\"\n   },\n   \"buttons\": {\n      \"type\": \"buttonObj.type\",\n      \"name\": \"buttonObj.name\",\n      \"choices\": \"buttonObj.choices\"\n   }\n}","disableAnyState":false,"x":610,"y":560,"wires":[["8a4a97b2.9e0318"]]},{"id":"a56d50f8.820e3","type":"alexa-http intent","z":"90a4d408.2e36e8","name":"","skillConfig":"91aa18ea.44c798","url":"/alexa_test","intent":"formResults","lastIntent":"anystate","x":150,"y":560,"wires":[["53341621.d9fbc8","55ea56c8.f63e08","2d86a0a8.e408e"]]},{"id":"55ea56c8.f63e08","type":"debug","z":"90a4d408.2e36e8","name":"User Details","active":true,"console":"false","complete":"payload.originalDetectIntentRequest.payload.extPayload","x":430,"y":540,"wires":[]},{"id":"922bf62f.856878","type":"alexa-say","z":"90a4d408.2e36e8","name":"","saytext":"<p>Enter details</p>","reprompttext":"","chatText":"","chatRePrompt":"","screenShortTitle":"","screenLongTitle":"","screenBody":"","screenSmallImage":"","screenLargeImage":"","ablabel":"","endsession":false,"lastIntent":"","requireLastIntent":false,"buttons":"{\"type\":\"\",\"name\":\"\",\"choices\":[]}","exporttext":"{\n   \"voice\": {\n      \"sayText\": \"<p>info</p>\",\n      \"rePrompt\": \"\"\n   },\n   \"chat\": {\n      \"chatText\": \"\",\n      \"rePrompt\": \"\"\n   },\n   \"screen\": {\n      \"shortTitle\": \"renderedShortTitle\",\n      \"longTitle\": \"renderedLongTitle\",\n      \"body\": \"\",\n      \"smallImage\": \"renderedSmallImage\",\n      \"largeImage\": \"renderedLargeImage\"\n   },\n   \"buttons\": {\n      \"type\": \"buttonObj.type\",\n      \"name\": \"buttonObj.name\",\n      \"choices\": \"buttonObj.choices\"\n   }\n}","disableAnyState":false,"x":610,"y":500,"wires":[["8a4a97b2.9e0318"]]},{"id":"dd528269.035d1","type":"http in","z":"90a4d408.2e36e8","name":"","url":"/userdata","method":"get","upload":false,"swaggerDoc":"","x":130,"y":620,"wires":[["dac0bd77.8c942"]]},{"id":"2c803a75.bee8c6","type":"http response","z":"90a4d408.2e36e8","name":"","statusCode":"","headers":{},"x":580,"y":620,"wires":[]},{"id":"dac0bd77.8c942","type":"template","z":"90a4d408.2e36e8","name":"HTML 5 FORM","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html>\n  <head>\n      <style>\n       </style>\n    <script type=\"text/javascript\">\n    </script>\n  </head>\n  <body>\n    <form> \n        <p><label for=\"fname\">First name:</label> <input type=\"text\" id=\"fname\" name=\"fname\"></p> \n\n        <p><label for=\"lname\">Last name:</label> <input type=\"text\" id=\"lname\" name=\"lname\"></p> \n        <p style=\"text-align: center;\"><button onclick=\"window.parent.htmlFormSendData(event)\">Submit</button></p>\n  \n    </form>\n  </body>\n</html>\n","output":"str","x":380,"y":620,"wires":[["2c803a75.bee8c6"]]},{"id":"2d86a0a8.e408e","type":"debug","z":"90a4d408.2e36e8","name":"","active":true,"console":"false","complete":"false","x":430,"y":580,"wires":[]},{"id":"91aa18ea.44c798","type":"alexa-skill-config","skillname":"Main","projectId":"5f9565f13e6777007d1ebfd1","intents":"[{\"name\":\"HTMLform\",\"options\":{\"slots\":[],\"utterances\":[\"Html form\"],\"prompts\":{\"confirm\":[]},\"events\":[],\"nlp\":[{\"_id\":\"5ff07ebb9b1ec40080b38371\",\"provider\":\"ALEXA\",\"value\":true},{\"_id\":\"5ff07ebb9b1ec40080b38370\",\"provider\":\"GOOGLE\",\"value\":true}]}},{\"name\":\"formResults\",\"options\":{\"slots\":[],\"utterances\":[\"utterance intent formResult\"],\"prompts\":{\"confirm\":[]},\"events\":[],\"nlp\":[{\"_id\":\"5ff0a9569b1ec40080b383af\",\"provider\":\"ALEXA\",\"value\":true},{\"_id\":\"5ff0a9569b1ec40080b383ae\",\"provider\":\"GOOGLE\",\"value\":true}]}}]","skillstate":"fromsession, testState,help,emergency,FlowStudio,flow, test,flow, test,flow, test,flow, test,fromsession,flow, test,flow, test,flow, test,flow, test,flow, test,flow, test,flow, test,flow, test,flow, test,flow, test,flow, test,flow, test,fromsession,flow, test,flow, test,flow, test,flow, test,flow, test,flow, test,flow, test,flow, test,fromsession, testState,fromsession, Reminder, sanity, flow_stud,fromsession, Reminder, sanity, flow_stud"},{"id":"slots","type":"slots","z":"","slots":[]}]

The First name and the Last name will be available in the property this object:

msg.payload.originalDetectIntentRequest.payload.extPayload

Versions Compared

Old Version 7

New Version 8

Key

Template node

HTML Directive

Bot View Template

Related articles