node-red-contrib-chatbot/nodes/chatbot-quick-replies.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-quick-replies', {
    category: 'RedBot',
    color: '#FFCC66',
    defaults: {
      name: {
        value: ''
      },
      message: {
        value: '',
        validate: function(message) {
          return $.RedBot.validate.notEmpty(message);
        }
      },
      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;
        }
      }
    },
    inputs: 1,
    outputs: 1,
    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());
      }
    },
    oneditprepare: function() {
      $('#node-input-buttons-container')
        .css('min-width','450px')
        .editableList({
          addButton: 'Add button',
          addItem: function(container, i, item) {
            $(container).RB_mountButtonDialog({
              types: ['quick-reply', 'location'],
              badges: false
            });
            $(container).RB_setButtonData(item, {
              badges: false
            });
          },
          removable: true,
          sortable: true
        });

      if (this.buttons != null) {
        this.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 height = dialogForm.height() - rowName.height() - rowLabel.height() - rowMessage.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>
</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.</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 two types of buttons can be specified here: </p>
<ul>
<li><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</li>
<li><strong>location</strong>: allows the user to share his position</li>
</ul>
<p><img src="https://img.shields.io/badge/platform-Facebook-blue.svg" alt="Facebook"></p>
</script>