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 (209 loc) • 7.04 kB
HTML
<script type="text/javascript">
$.RedBot.registerType('chatbot-quick-replies', {
category: $.RedBot.config.name,
color: '#FFCC66',
defaults: {
name: {
value: ''
},
message: {
value: ''
},
buttons: {
value: [],
validate: function(buttons) {
var valid = true;
var idx;
for(idx = 0; idx < buttons.length; idx++) {
if (!$.RedBot.validate.button(buttons[idx])) {
valid = false;
}
}
return valid;
}
},
trackMessage: {
value: false
},
outputs: {
value: 1
}
},
inputs: 1,
outputs: 1,
outputLabels: function(index) {
if (index === 0) {
return 'to sender node';
} else {
const button = this.buttons[index - 1];
if (button.type === 'quick-reply') {
if (button.label != null && button.label !== '') {
return button.label + (button.value != null && button.value !== '' ? ' (' + button.value + ')' : '');
} else if (button.value != null && button.value !== '') {
return button.value;
}
}
return 'not used';
}
},
paletteLabel: 'Quick Replies',
icon: 'chatbot-quick-replies.png',
label: function() {
return this.name || 'Quick Replies';
},
oneditsave: function() {
var buttons = $("#node-input-buttons-container").editableList('items');
var node = this;
node.buttons = [];
var idx;
for(idx = 0; idx < buttons.length; idx++) {
node.buttons.push($(buttons[idx]).RB_getButtonData());
}
// store outputs
if ($('#node-input-trackMessage').is(':checked')) {
node.outputs = node.buttons.length + 1;
} else {
node.outputs = 1;
}
},
oneditprepare: function() {
$('#node-input-buttons-container')
.css('min-width','450px')
.editableList({
addButton: 'Add quick reply',
addItem: function(container, i, item) {
$(container).RB_mountButtonDialog({
types: ['quick-reply', 'phone', 'email'],
badges: false
});
$(container).RB_setButtonData(item, {
badges: false
});
},
removable: true,
sortable: true
});
const buttons = this.buttons;
$.RedBot.fetchPlatforms()
.done(function() {
if (buttons != null) {
buttons.forEach(function(button) {
$('#node-input-buttons-container').editableList('addItem', button);
});
}
});
},
oneditresize: function() {
var dialogForm = $('#dialog-form');
var rowName = $('.form-row-name', dialogForm);
var rowMessage = $('.form-row-message', dialogForm);
var rowLabel = $('.form-row-label', dialogForm);
var rowTrack = $('.form-row-track', dialogForm);
var height = dialogForm.height()
- rowName.height()
- rowLabel.height()
- rowMessage.height()
- rowTrack.height()
- 30;
$('#node-input-buttons-container').editableList('height', height);
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-quick-replies">
<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-message">
<label for="node-input-message"><i class="icon-envelope"></i> Message</label>
<textarea id="node-input-message" placeholder="Message" style="width:93%;height:50px;"></textarea>
<div style="max-width: 460px;font-size: 12px;color: #999999;line-height: 14px;clear:both;margin-top:5px;">
Supports handlebars-like variables for chat context like {{firstName}}, {{lastName}}, etc. and emoticons (:smile:, etc.)
</div>
</div>
<div class="form-row form-row-label" style="margin-bottom:0;">
<label><i class="fa fa-list"></i> <span>Buttons</span></label>
</div>
<div class="form-row node-input-rule-container-row">
<ol id="node-input-buttons-container"></ol>
</div>
<div class="form-row form-row-track">
<label for="node-input-trackMessage">Track</label>
<input type="checkbox" value="true" id="node-input-trackMessage" style="width:auto">
<span class="redbot-form-hint">
Track answers to these buttons here (will enable an output pin for each button)
</span>
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-quick-replies"><p><code>Quick Replies node</code> provide a way to present buttons to the user in response to a message in <strong>Facebook Messenger</strong>.</p>
<p>Quick Replies appear prominently above the composer, with the keyboard less prominent. When a quick reply is tapped, the message is sent in the conversation with developer-defined metadata in the callback.</p>
<p>After the user taps one, they are dismissed, which prevents the scenario where users could tap on buttons attached to old messages in a conversation.</p>
<p>Only three types of buttons can be specified here: </p>
<ul>
<li><p><strong>quick-reply</strong>: very similar to <code>postback</code> (see <code>Buttons node</code> for more details), has a <em>label</em> and <em>value</em> (which is the text sent back to the chat when the button is pressed). The button can also have an icon with specified by the <em>url</em> field</p>
</li>
<li><p><strong>email</strong>: allows the user to share his email </p>
</li>
<li><p><strong>phone</strong>: allows the user to share his phone number</p>
</li>
</ul>
<p>The text message can be passed through the payload by the upstream node:</p>
<pre><code class="language-javascript">return {
...msg,
message: 'Select one',
buttons: [
{ type: 'quick-reply', label: 'Test 1', value: 'test1' },
{ type: 'quick-reply', label: 'Test 2', value: 'test2' }
];
</code></pre>
<p>Available parameters for the <code>msg.payload</code></p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>message</td>
<td>string</td>
<td>The text above the quick replies</td>
</tr>
<tr>
<td>buttons</td>
<td>[buttons]</td>
<td>The quick-reply button</td>
</tr>
</tbody></table>
<p>The <code>button</code> object</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>type</td>
<td>string</td>
<td>Type of quick reply button: <em>quick-reply</em>, <em>email</em>, <em>phone</em></td>
</tr>
<tr>
<td>label</td>
<td>string</td>
<td>The label of the button (only for <em>quick-reply</em>)</td>
</tr>
<tr>
<td>value</td>
<td>string</td>
<td>The value returned when clicked (only for <em>quick-reply</em>)</td>
</tr>
<tr>
<td>image_url</td>
<td>string</td>
<td>The image for the button (only for <em>quick-reply</em>)</td>
</tr>
</tbody></table>
</script>