You can now render the chat bubbles in the sequence you wanted.
Previously we used to send the payload response to the chatbot as an object and hence we are
...
unable to render the response in the expected order. Now, we can send the payload
...
in an
...
array format to the chatbot, and the chatbot will recognize the array structure and render the response in
...
that order.
How to enable Chatbot response as an Array?
To enable this feature, we should set the enableArrayResponse property
...
to true under Bot Out Parser in the Bot Provider V2 node.
...
Directive structure
In the existing directive structure, we will push our HTML directive inside the directive object.
But Hereafter we need to
...
use the
...
The existing directive structure looks like below :
Existing structue :
HTML Directive Example :
new structure. We need to push the directive in the rawMultiagent property.
Existing
| Code Block |
|---|
if(!msg.payload.orbita) {
msg.payload.orbita = {};
}
if(!msg.payload.orbita.directive) {
msg.payload.orbita.directive = [];
}
msg.payload.orbita.directive.push({
type : "html5",
options :
{
html : `<form><label for="fullname">Name:</label><br> <input type="text" id="fullname" name="fullname" value="John Doe"><br> <label for="age">Age:</label><br> <input type="text" id="age" name="age" value="0"><br> <label for="genders">Choose a Gender:</label><br> <select id="genders" name="genders"> <option value="male">Male</option> <option value="female">Female</option> <option value="nonbinary">Non-binary</option> <option value="prefnottosay">Prefer not to answer</option> </select> <br><br><button style="float:right" onclick="window.parent.myFunction(event)">Submit</button> </form>`,
template : "300x240"
// id: '123',
// renderBubble: false
}
}); |
In the above code, we are pushing our HTML directive inside the directive object. But Hereafter we need to use the new structure. We need to push the directive in the rawMultiagent property.
NEW STRUCTURE :
HTML Directive Example :
New
| Code Block |
|---|
msg.payload.rawMultiagent = msg.payload.rawMultiagent || [];
msg.payload.rawMultiagent.push({ directive : [{
type : "html5",
options :
{
html : `<form><label for="fullname">Name:</label><br> <input type="text" id="fullname" name="fullname" value="John Doe"><br> <label for="age">Age:</label><br> <input type="text" id="age" name="age" value="0"><br> <label for="genders">Choose a Gender:</label><br> <select id="genders" name="genders"> <option value="male">Male</option> <option value="female">Female</option> <option value="nonbinary">Non-binary</option> <option value="prefnottosay">Prefer not to answer</option> </select> <br><br><button style="float:right" onclick="window.parent.myFunction(event)">Submit</button> </form>`,
template : "300x240"
// id: '123',
// renderBubble: false
}
}]}); |
Backward Support :
...
You can still use the old directive structure and
...
push the code to msg.payload.orbita.directive
...
but they will not be rendered in a custom order.
Related Articles
| Filter by label (Content by label) | ||||||||
|---|---|---|---|---|---|---|---|---|
|