{"type":"doc","content":[{"type":"paragraph","content":[{"text":"In this document, you will learn to use an HTML directive and get user input.","type":"text"}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"If you call a 3rd party site for javascript or CSS, you will need to white list their domain.","type":"text"}]}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":880,"id":"4bfc05ce-2bcf-4bde-aca5-3bfd7ce9816b","collection":"contentId-747307022","type":"file","height":187}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Template node","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n \n \n \n \n \n \n \n","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"HTML Directive ","type":"text"}]},{"type":"paragraph","content":[{"text":"Use the HTML form (above) in the HTML Directive (below).","type":"text"}]},{"type":"codeBlock","content":[{"text":"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","type":"text"}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Property","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"type : “html5“","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"type ","type":"text","marks":[{"type":"strong"}]},{"text":"should be set to ","type":"text"},{"text":"html5 ","type":"text","marks":[{"type":"strong"}]},{"text":"to invoke the HTML Directive.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"options: {}","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"The options object contains the following properties.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"template","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"html","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"id","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"renderBubble","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"template : \"300x300\"","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"(OPTIONAL) The template property defines the size of HTML content.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"html: ``","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"HTML if url is empty","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"url: ","type":"text"},{"text":"`/oeapi/userdata`","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"URL to the HTML page","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"id:\"html-content-1\"","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"(OPTIONAL) This property helps to set the id value of the iframe.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"renderBubble : true","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"(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. ","type":"text"},{"type":"hardBreak"},{"text":"By default, the ","type":"text"},{"text":"renderBubble","type":"text","marks":[{"type":"code"}]},{"text":" is set to ","type":"text"},{"text":"true","type":"text","marks":[{"type":"code"}]}]}]}]}]},{"type":"paragraph"},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"renderBubble: true","type":"text","marks":[{"type":"code"}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"adb54828-8ddd-441d-81e7-9592540d6399","collection":"contentId-747307022","type":"file","height":667}}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"renderBubble: false","type":"text","marks":[{"type":"code"}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1109,"id":"c8b79839-6eac-4726-962d-878ed0643dcb","collection":"contentId-747307022","type":"file","height":663}}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Bot View Template","type":"text"}]},{"type":"paragraph","content":[{"text":"To handle the Submit button from the HTML form, you have to create a function in the Custom JS tab of the ","type":"text"},{"text":"Bot View Template ","type":"text","marks":[{"type":"em"}]},{"text":"node and use the ","type":"text"},{"text":"self.submitQuery ","type":"text","marks":[{"type":"em"}]},{"text":"property.","type":"text"}]},{"type":"paragraph","content":[{"text":"If using an intent utterance to trigger an intent:","type":"text"}]},{"type":"paragraph","content":[{"text":"self.submitQuery('intent utterance','display text', 'Event', Custom Object}","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"if using an event to trigger the intent, ","type":"text"}]},{"type":"paragraph","content":[{"text":"self.submitQuery('FlowMessageFreeTextEvent','display text', 'FlowMessageFreeTextEvent', Custom Object}","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"For event:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":739,"id":"87253611-7e55-4820-b145-551edadee8c5","collection":"contentId-747307022","type":"file","height":554}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"For utterance:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":696,"id":"c79c6a85-4717-46df-9102-3b10ddb4e221","collection":"contentId-747307022","type":"file","height":514}}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1109,"id":"31886b63-49f0-4b13-97fe-b082f2561b72","collection":"contentId-747307022","type":"file","height":385}}]},{"type":"paragraph"},{"type":"codeBlock","content":[{"text":"var htmlFormSendData = function(e) { \n var fname = $('#'+$('iframe').attr('id')).contents().find('#fname').val();\n var lname = $('#'+$('iframe').attr('id')).contents().find('#lname').val();\n // self.submitQuery('FlowMessageFreeTextEvent', 'Thanks','FlowMessageFreeTextEvent', { \"fname\": fname, \"lname\": lname });\n self.submitQuery('utterance intent formResult', 'Thanks','', { \"fname\": fname, \"lname\": lname });\n e.preventDefault();\n };","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":549,"id":"98992657-0773-41e0-ae3e-d504657327a1","collection":"contentId-747307022","type":"file","height":805}}]},{"type":"paragraph","content":[{"text":"Your details Say node:","type":"text"}]},{"type":"codeBlock","content":[{"text":"Your details:\n\nFirst Name is : {{msg.payload.originalDetectIntentRequest.payload.extPayload.fname}}\n\nLast Name is : {{msg.payload.originalDetectIntentRequest.payload.extPayload.lname}} ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":711,"id":"14369ad1-4b00-465d-b17c-825f111ac286","collection":"contentId-747307022","type":"file","height":399}}]},{"type":"paragraph","content":[{"text":"The example flow, everything except the javascript for the Bot View Template.","type":"text"}]},{"type":"codeBlock","content":[{"text":"[{\"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\":\"

Your details:

First Name is : {{msg.payload.originalDetectIntentRequest.payload.extPayload.fname}}

Last Name is : {{msg.payload.originalDetectIntentRequest.payload.extPayload.lname}}

\",\"reprompttext\":\"\",\"chatText\":\"\",\"chatRePrompt\":\"\",\"screenShortTitle\":\"\",\"screenLongTitle\":\"\",\"screenBody\":\"\",\"screenSmallImage\":\"\",\"screenLargeImage\":\"\",\"ablabel\":\"\",\"endsession\":false,\"lastIntent\":\"\",\"requireLastIntent\":false,\"buttons\":\"{\\\"type\\\":\\\"\\\",\\\"name\\\":\\\"\\\",\\\"choices\\\":[]}\",\"exporttext\":\"{\\n \\\"voice\\\": {\\n \\\"sayText\\\": \\\"

Your details:

First Name is : {{msg.payload.originalDetectIntentRequest.payload.extPayload.fname}}

Last Name is : {{msg.payload.originalDetectIntentRequest.payload.extPayload.lname}}

Enter details

info

\\\",\\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\":\"\\n \\n \\n \\n \\n \\n \\n \\n\\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\":[]}]","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"The First name and the Last name will be available in this object:","type":"text"}]},{"type":"paragraph","content":[{"text":"msg.payload.originalDetectIntentRequest.payload.extPayload","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Example 2: ","type":"text","marks":[{"type":"strong"}]},{"text":"Calling an HTML5 Control from Flow Studio","type":"text"}]},{"type":"paragraph"},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"{\n \"flowData\": {\n \"class\": \"GraphLinksModel\",\n \"copiesKey\": false,\n \"linkFromPortIdProperty\": \"fromPort\",\n \"linkToPortIdProperty\": \"toPort\",\n \"nodeDataArray\": [\n {\n \"key\": \"855539587347712516\",\n \"name\": \"Start\",\n \"description\": \"\",\n \"type\": \"start\",\n \"category\": \"\",\n \"loc\": \"107.52284749830794 70.10354461669922\",\n \"size\": \"80 80\"\n },\n {\n \"key\": \"806394389093900710\",\n \"name\": \"googleChart\",\n \"description\": \" \",\n \"type\": \"external hook\",\n \"category\": \"\",\n \"loc\": \"107.52284749830794 261.8334813484055\",\n \"switches\": [\n {\n \"operant\": \"eq\",\n \"itemType\": \"string\"\n },\n {\n \"operant\": \"eq\",\n \"itemType\": \"string\"\n },\n {\n \"operant\": \"eq\",\n \"itemType\": \"string\"\n }\n ],\n \"nodeInput\": \"custom\"\n },\n {\n \"key\": \"392524825426112445\",\n \"name\": \"Option\",\n \"description\": \"Select One\\n\",\n \"type\": \"text\",\n \"category\": \"\",\n \"loc\": \"107.52284749830794 460.08626557841984\",\n \"phrases\": [\n {\n \"type\": \"string\",\n \"value\": \"\",\n \"isEnable\": false,\n \"isTerm\": false,\n \"src\": \"/aurora-ui/assets/images/data-dictionary/datadictionary.png\"\n }\n ],\n \"validators\": [\n {}\n ],\n \"multiScreen\": {\n \"description\": \"\",\n \"validation\": {\n \"valid\": \"\",\n \"invalid\": \"\"\n },\n \"voice\": {\n \"sayText\": \"

Select One

\\n\",\n \"rePrompt\": \"\"\n },\n \"chat\": {\n \"chatText\": \"\"\n },\n \"screen\": {\n \"shortTitle\": \"\",\n \"longTitle\": \"\",\n \"body\": \"\",\n \"smallImage\": \"\",\n \"largeImage\": \"\"\n },\n \"buttons\": {\n \"type\": \"dropdown\",\n \"name\": \"buttons\",\n \"choices\": []\n }\n },\n \"directives\": {\n \"micInput\": false,\n \"keyboardInput\": false,\n \"waitTimeNoAnimation\": false,\n \"endSession\": false,\n \"inputModel\": \"hidden\",\n \"inputType\": \"textbox\"\n }\n },\n {\n \"key\": \"832041313240806879\",\n \"name\": \"End\",\n \"description\": \"You picked:\\n\\n{{msg.payload.request.intent.slots.freeText.value}}\\n\\n\\nHow else can i help you?\\n\",\n \"type\": \"end\",\n \"category\": \"\",\n \"loc\": \"107.52284749830794 651.8162023101261\",\n \"size\": \"80 80\",\n \"multiScreen\": {\n \"description\": \"\",\n \"validation\": {\n \"valid\": \"\",\n \"invalid\": \"\"\n },\n \"voice\": {\n \"sayText\": \"

You picked:

\\n\\n

\\n

How else can i help you?

\\n\",\n \"rePrompt\": \"\"\n },\n \"chat\": {\n \"chatText\": \"

You picked:

\\n\\n

\\n

How else can i help you?

\\n\"\n },\n \"screen\": {\n \"shortTitle\": \"\",\n \"longTitle\": \"\",\n \"body\": \"\",\n \"smallImage\": \"\",\n \"largeImage\": \"\"\n },\n \"buttons\": {\n \"type\": \"dropdown\",\n \"name\": \"buttons\",\n \"choices\": []\n }\n },\n \"directives\": {\n \"micInput\": true,\n \"keyboardInput\": true,\n \"waitTimeNoAnimation\": false,\n \"endSession\": false\n }\n }\n ],\n \"linkDataArray\": [\n {\n \"from\": \"855539587347712516\",\n \"to\": \"806394389093900710\",\n \"fromPort\": \"OUT\",\n \"toPort\": \"IN\",\n \"points\": [\n 107.52284749830794,\n 110.15531692504884,\n 107.52284749830794,\n 120.15531692504884,\n 107.52284749830794,\n 147.6812030792236,\n 107.52284749830794,\n 147.6812030792236,\n 107.52284749830794,\n 175.20708923339834,\n 107.52284749830794,\n 185.20708923339834\n ]\n },\n {\n \"from\": \"806394389093900710\",\n \"to\": \"392524825426112445\",\n \"fromPort\": \"OUT\",\n \"toPort\": \"IN\",\n \"points\": [\n 107.52284749830794,\n 318.45987346341263,\n 107.52284749830794,\n 328.45987346341263,\n 107.52284749830794,\n 350.9598734634127,\n 107.52284749830794,\n 350.9598734634127,\n 107.52284749830794,\n 373.4598734634127,\n 107.52284749830794,\n 383.4598734634127\n ]\n },\n {\n \"from\": \"392524825426112445\",\n \"to\": \"832041313240806879\",\n \"fromPort\": \"OUT\",\n \"toPort\": \"IN\",\n \"points\": [\n 107.52284749830794,\n 516.712657693427,\n 107.52284749830794,\n 526.712657693427,\n 107.52284749830794,\n 554.2385438476019,\n 107.52284749830794,\n 554.2385438476019,\n 107.52284749830794,\n 581.7644300017769,\n 107.52284749830794,\n 591.7644300017769\n ]\n }\n ]\n },\n \"utterances\": [\n {\n \"value\": \"Google Chart\"\n }\n ]\n}","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":640,"id":"1f92699a-73f3-4c4e-8fb8-e139d7f44959","collection":"contentId-747307022","type":"file","height":922}}]},{"type":"paragraph"},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":699,"id":"352dad4f-3b59-45ff-95be-c8aa3fe37939","collection":"contentId-747307022","type":"file","height":175}}]},{"type":"paragraph","content":[{"text":"Experience manager flow:","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"[{\"id\":\"c96ca56c.50dab8\",\"type\":\"inject\",\"z\":\"e134133.8a5f0f\",\"name\":\"\",\"topic\":\"\",\"payload\":\"\",\"payloadType\":\"date\",\"repeat\":\"\",\"crontab\":\"\",\"once\":true,\"onceDelay\":\"0.5\",\"x\":150,\"y\":420,\"wires\":[[\"e64c76cc.90af68\"]]},{\"id\":\"e64c76cc.90af68\",\"type\":\"function\",\"z\":\"e134133.8a5f0f\",\"name\":\"googleChart\",\"func\":\"global.get(\\\"hooks\\\").googleChart = msg => {\\n node.send(msg);\\n};\",\"outputs\":1,\"noerr\":0,\"x\":330,\"y\":420,\"wires\":[[\"55edd6f6.443818\"]]},{\"id\":\"55edd6f6.443818\",\"type\":\"function\",\"z\":\"e134133.8a5f0f\",\"name\":\"HTML5 Directives\",\"func\":\"msg.payload.orbita = msg.payload.orbita || {};\\n msg.payload.orbita.directive = msg.payload.orbita.directive || [];\\n msg.payload.orbita.directive.push({\\n type: \\\"html5\\\",\\n options: {\\n template: \\\"400x400\\\",\\n url: `/oeapi/googlechart`\\n }\\n });\\n\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"x\":530,\"y\":420,\"wires\":[[\"4ecb5b2e.dfb594\"]]},{\"id\":\"1a031c97.f14e33\",\"type\":\"http in\",\"z\":\"e134133.8a5f0f\",\"name\":\"\",\"url\":\"/googlechart\",\"method\":\"get\",\"upload\":false,\"swaggerDoc\":\"\",\"x\":160,\"y\":500,\"wires\":[[\"7c5de693.7046d8\"]]},{\"id\":\"7c5de693.7046d8\",\"type\":\"template\",\"z\":\"e134133.8a5f0f\",\"name\":\"Chart\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"html\",\"syntax\":\"mustache\",\"template\":\"\\n \\n \\n \\n \\n \\n

\\n \\n\\n\",\"output\":\"str\",\"x\":430,\"y\":500,\"wires\":[[\"40ef024e.22a7ec\"]]},{\"id\":\"40ef024e.22a7ec\",\"type\":\"http response\",\"z\":\"e134133.8a5f0f\",\"name\":\"\",\"statusCode\":\"\",\"headers\":{},\"x\":590,\"y\":500,\"wires\":[]},{\"id\":\"slots\",\"type\":\"slots\",\"z\":\"\",\"slots\":[]}]","type":"text"}]},{"type":"paragraph","content":[{"text":"Directive","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"msg.payload.orbita = msg.payload.orbita || {};\n msg.payload.orbita.directive = msg.payload.orbita.directive || [];\n msg.payload.orbita.directive.push({\n type: \"html5\",\n options: {\n template: \"400x400\",\n url: `/oeapi/googlechart`\n }\n });\n\nreturn msg;","type":"text"}]},{"type":"paragraph","content":[{"text":"Template Node code:","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n \n \n \n \n \n

\n \n\n","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Note in this example 2, we don’t need any javascript code in the bot view template","type":"text"}]},{"type":"paragraph","content":[{"text":"window.parent.orbitaChatBot.sendQuickReply(......);","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"This has to be a number or text, not an object. If your HTML card results are an object using the method shown in the first HTML 5 example.","type":"text"}]},{"type":"paragraph","content":[{"text":"Passes the value as an utterance. In the Flow manager, the Single Input Control is set to hide inputs from the keyboard. Textbox - Hidden, it waiting for an input, which sendQuickReply sends. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":886,"id":"4b4c150f-810b-49bb-813d-946a98b8cfe4","collection":"contentId-747307022","type":"file","height":451}}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":542,"id":"09778767-eb22-44c4-b4dd-13f191a43803","collection":"contentId-747307022","type":"file","height":809}}]},{"type":"paragraph"},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":555,"id":"5b09fb04-608e-4293-a6a4-3f5dd755bd01","collection":"contentId-747307022","type":"file","height":809}}]},{"type":"paragraph"},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":712,"id":"018b493b-a6ce-46cd-92c6-c52db7d11f70","collection":"contentId-747307022","type":"file","height":479}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Related articles","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"contentbylabel","parameters":{"macroParams":{"showLabels":{"value":"false"},"max":{"value":"5"},"spaces":{"value":"com.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@130ff"},"sort":{"value":"modified"},"showSpace":{"value":"false"},"reverse":{"value":"true"},"type":{"value":"page"},"cql":{"value":"label in ( \"how-to\" , \"directive\" , \"experience-designer\" ) and type = \"page\" and space = \"OCS\""},"labels":{"value":"directive experience-designer how-to"}},"macroMetadata":{"macroId":{"value":"3636e55b-4561-4d52-85da-ac52973c8dd2"},"schemaVersion":{"value":"4"},"title":"Content by Label"}},"localId":"147d431f-73b0-437c-a007-a6b9ac062a33"}}],"version":1}

Browser not supported