node-red-contrib-chatbot/nodes/chatbot-messenger-menu.html

REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required

<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>