UNPKG

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
<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&#39;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: &#39;url&#39;, label: &#39;JavaScript Jedi&#39;, url: &#39;http://javascript-jedi.com&#39;, webview_height_ratio: &#39;full&#39; // tall|full|compact }, { type: &#39;postback&#39;, label: &#39;Help&#39;, value: &#39;/help&#39; } ]; 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: &#39;set&#39;, items: [ { type: &#39;url&#39;, label: &#39;JavaScript Jedi&#39;, url: &#39;http://javascript-jedi.com&#39;, webview_height_ratio: &#39;full&#39; // tall|full|compact }, { type: &#39;postback&#39;, label: &#39;Help&#39;, value: &#39;/help&#39; } ] }; return msg; </code></pre> <p>A maximum 3 menu items are allowed. If more items are needed, it&#39;s possible to create nested menus via <code>Function node</code>:</p> <pre><code class="lang-javascript">msg.payload = { composerInputDisabled: true, command: &#39;set&#39;, items: [ { type: &#39;url&#39;, label: &#39;JavaScript Jedi&#39;, url: &#39;http://javascript-jedi.com&#39;, webview_height_ratio: &#39;full&#39; // tall|full|compact }, { label: &#39;Sub Menu&#39;, items: [ { type: &#39;postback&#39;, label: &#39;Postback 1&#39;, value: &#39;postback1&#39; }, { type: &#39;postback&#39;, label: &#39;Postback 2&#39;, value: &#39;postback2&#39; } ] } ] }; 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>