node-red-contrib-chatbot
Version:
REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required
214 lines (201 loc) • 7.68 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('chatbot-messenger-menu', {
category: 'RedBot',
color: '#FFCC66',
defaults: {
composerInputDisabled: {
value: false
},
command: {
value: 'set'
},
name: {
value: ''
},
items: {
value: [],
validate: function(items) {
var valid = true;
var idx;
for(idx = 0; idx < items.length; idx++) {
if (!$.RedBot.validate.button(items[idx])) {
valid = false;
}
}
return valid;
}
},
message: {
value: ''
}
},
inputs: 1,
outputs: 1,
paletteLabel: 'Messenger Menu',
icon: 'chatbot-menu.png',
label: function() {
return this.name || 'Messenger Menu';
},
oneditsave: function() {
var items = $("#node-input-items-container").editableList('items');
var node = this;
node.items = [];
var idx;
for(idx = 0; idx < items.length; idx++) {
node.items.push($(items[idx]).RB_getButtonData());
}
},
oneditprepare: function() {
$('#node-input-command').change(function() {
if ($(this).val() === 'set') {
$('.form-row-list, .form-row-items, .form-row-composer, .form-row-buttons').show();
} else {
$('.form-row-list, .form-row-items, .form-row-composer, .form-row-buttons').hide();
}
});
$('#node-input-items-container').css('min-height','300px').css('min-width','450px').editableList({
addButton: 'Add menu item',
addItem: function(container, i, item) {
$(container).RB_mountButtonDialog({
types: ['postback', 'url'],
badges: false,
platforms: ['facebook']
});
$(container).RB_setButtonData(item, {
badges: false
});
},
removable: true,
sortable: true
});
if (this.items != null) {
this.items.forEach(function(item) {
$('#node-input-items-container').editableList('addItem', item);
});
}
},
oneditresize: function() {
var dialogForm = $('#dialog-form');
var rowName = $('.form-row-name', dialogForm);
var rowLabel = $('.form-row-label', dialogForm);
var rowCommand = $('.form-row-command', dialogForm);
var rowComposer = $('.form-row-composer', dialogForm);
var height = dialogForm.height() - rowName.height() - rowLabel.height() - rowCommand.height() - rowComposer.height() - 30;
$('#node-input-items-container').editableList('height', height);
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-messenger-menu">
<div class="form-row form-row-name">
<label for="node-input-name"><i class="icon-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row form-row-command">
<label for="node-input-command">Action</label>
<select id="node-input-command" placeholder="Command">
<option value="set">Set</option>
<option value="delete">Delete</option>
</select>
</div>
<div class="form-row form-row-composer">
<input type="checkbox" value="true" id="node-input-composerInputDisabled" style="width: 30px;">
Disable user input
</div>
<div class="form-row form-row-label form-row-buttons" style="margin-bottom:0;">
<label><span>Buttons</span></label>
</div>
<div class="form-row form-row-items node-input-rule-container-row">
<ol id="node-input-items-container"></ol>
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-messenger-menu"><p>This node will set the persistent menu next to the editable area in Facebook Messenger, there two kind of options:</p>
<ul>
<li><strong>URL</strong>: it opens a specific url. In the mobile version it's possible to specify the size of the browser window.
Also supports <a href="https://developers.facebook.com/docs/messenger-platform/webview">Messenger Extensions</a></li>
<li><strong>Postback</strong>: sends the text defined in <em>value</em> field to the chat (as a text message)</li>
</ul>
<p>It also allows the disable the text area (user will interact only with menu with the chatbot) or to delete a previous menu. <strong>On desktop, remember to reload the chat window in order to see the menu changes</strong>. </p>
<p>The menu items can be passed through the payload by the upstream node:</p>
<pre><code class="lang-javascript">msg.payload = [
{
type: 'url',
label: 'JavaScript Jedi',
url: 'http://javascript-jedi.com',
webview_height_ratio: 'full' // tall|full|compact
},
{
type: 'postback',
label: 'Help',
value: '/help'
}
];
return msg;
</code></pre>
<p>otherwise all parameters can be passed by the upstream node</p>
<pre><code class="lang-javascript">msg.payload = {
composerInputDisabled: true,
command: 'set',
items: [
{
type: 'url',
label: 'JavaScript Jedi',
url: 'http://javascript-jedi.com',
webview_height_ratio: 'full' // tall|full|compact
},
{
type: 'postback',
label: 'Help',
value: '/help'
}
]
};
return msg;
</code></pre>
<p>A maximum 3 menu items are allowed. If more items are needed, it's possible to create nested menus via <code>Function node</code>:</p>
<pre><code class="lang-javascript">msg.payload = {
composerInputDisabled: true,
command: 'set',
items: [
{
type: 'url',
label: 'JavaScript Jedi',
url: 'http://javascript-jedi.com',
webview_height_ratio: 'full' // tall|full|compact
},
{
label: 'Sub Menu',
items: [
{
type: 'postback',
label: 'Postback 1',
value: 'postback1'
},
{
type: 'postback',
label: 'Postback 2',
value: 'postback2'
}
]
}
]
};
return msg;
</code></pre>
<p>Available parameters for the <code>msg.payload</code></p>
<dl class="message-properties">
<dt>composerInputDisabled<span class="property-type">boolean</span><dd>Disable text input, user will interact only with menu</dd>
<dt>command<span class="property-type">string</span><dd>Set or delete menu. Valid values: <em>set</em>, <em>delete</em></dd>
<dt>items<span class="property-type">array of [item]</span><dd>Items of the menu</dd>
</dl>
<p>The <code>[item]</code> object</p>
<dl class="message-properties">
<dt>type<span class="property-type">string</span><dd>Type of button: <em>url</em>, <em>postback</em></dd>
<dt>label<span class="property-type">string</span><dd>Label of the button</dd>
<dt>value<span class="property-type">string</span><dd>Value returned as payload in <code>postback</code> buttons</dd>
<dt>url<span class="property-type">string</span><dd>Url to redirect to for <code>url</code> buttons or authentication URL for <code>login</code> buttons</dd>
<dt>messengerExtensions<span class="property-type">boolean</span><dd>Include Messenger Extensions for <code>url</code> buttons</dd>
<dt>webViewHeightRatio<span class="property-type">string</span><dd>Aspect ratio of the webview in Facebook Messenger for <code>url buttons</code>. Valid values: <em>tall</em>, <em>compact</em>, <em>full</em></dd>
<dt>items<span class="property-type">array of [item]</span><dd>Nested menu items</dd>
</dl>
<p><img src="https://img.shields.io/badge/platform-Facebook-blue.svg" alt="Facebook"></p>
</script>