node-red-contrib-chatbot/nodes/chatbot-messenger-template.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">

  $.RedBot.registerType('chatbot-messenger-template', {
    category: $.RedBot.config.name,
    color: '#FFCC66',
    defaults: {
      name: {
        value: ''
      },
      templateType: {
        value: ''
      },
      text: {
        value: ''
      },
      json: {
        value: ''
      },
      title: {
        value: '',
        validate: function(title) {
          return $.RedBot.validate.isEmpty(title) || title.length <= 80 ;
        }
      },
      subtitle: {
        value: '',
        validate: function(subtitle) {
          return subtitle == null || subtitle.length <= 80
        }
      },
      imageUrl: {
        value: ''
      },
      mediaUrl: {
        value: ''
      },
      mediaType: {
        value: 'image'
      },
      attachmentId: {
        value: ''
      },
      productId: {
        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 && buttons.length <= 3 && buttons.length >= 0;
        }
      }
    },
    inputs: 1,
    outputs: 1,
    paletteLabel: 'Messenger Template',
    icon: 'chatbot-generic-template.png',
    label: function() {
      return this.name || 'Messenger Template';
    },
    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());
      }
      $('#node-input-json').val(this.editor.getValue());
      // remove editor
      this.editor.destroy();
      delete this.editor;
    },
    oneditprepare: function() {
      var node = this;
      var dialogForm = $('#dialog-form');
      // select template
      $('#node-input-templateType')
        .change(function() {
          var templateType = $(this).val();
          $('.form-row-template', dialogForm).hide();
          $('.form-row-template-' + templateType, dialogForm).show();
        });
      $('.form-row-template', dialogForm).hide();
      $('.form-row-template-' + node.templateType, dialogForm).show();
      // buttons editor
      $('#node-input-buttons-container')
        .css('min-width','450px')
        .editableList({
          addItem: function(container, i, item) {
            $(container).RB_mountButtonDialog({
              types: ['url', 'postback', 'call', 'login', 'newline', 'logout', 'share'],
              platforms: ['facebook', 'slack'],
              badges: true
            });
            $(container).RB_setButtonData(item);
          },
          removable: true,
          sortable: true
        });
      $.RedBot.fetchPlatforms()
        .done(function() {
          if (node.buttons != null) {
            node.buttons.forEach(function(button) {
              $('#node-input-buttons-container').editableList('addItem', button);
            });
          }
        });
      // json editor
      this.editor = RED.editor.createEditor({
        id: 'node-input-json-editor',
        mode: 'ace/mode/json',
        value: $('#node-input-json').val(),
        globals: {
          node: true,
          msg:true,
          context:true,
          RED: true,
          util: true,
          flow: true,
          global: true,
          console: true,
          Buffer: true,
          setTimeout: true,
          clearTimeout: true,
          setInterval: true,
          clearInterval: true
        }
      });
    }
  });
</script>

<script type="text/x-red" data-template-name="chatbot-messenger-template">
  <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-name">
    <label for="node-input-templateType">Template type</label>
    <select id="node-input-templateType" placeholder="Template type">
      <option value="">Select template</option>
      <option value="generic">Generic</option>
      <option value="button">Button</option>
      <option value="receipt">Receipt</option>
      <option value="media">Media</option>
      <option value="product">Product</option>
      <option value="customer_feedback">Customer feedback</option>
    </select>
  </div>
<div class="form-row form-row-title form-row-template form-row-template-button">
  <label for="node-input-title">Text</label>
  <input type="text" id="node-input-text" placeholder="Text">
</div>
<div class="form-row form-row-title form-row-template form-row-template-generic">
  <label for="node-input-title">Title</label>
  <input type="text" id="node-input-title" placeholder="Title">
</div>
<div class="form-row form-row-subtitle form-row-template form-row-template-generic">
  <label for="node-input-subtitle">Subtitle</label>
  <input type="text" id="node-input-subtitle" placeholder="Subtitle">
</div>
<div class="form-row form-row-imageUrl form-row-template form-row-template-generic">
  <label for="node-input-image_url">Image URL</label>
  <input type="text" id="node-input-imageUrl" placeholder="Image URL">
</div>
<div class="form-row form-row-imageUrl form-row-template form-row-template-media">
  <label for="node-input-mediaType">Media type</label>
    <select id="node-input-mediaType" placeholder="Media type">
      <option value="video">Video</option>
      <option value="image">Image</option>
  </select>
</div>
<div class="form-row form-row-mediaUrl form-row-template form-row-template-media">
  <label for="node-input-mediaUrl">Media URL</label>
  <input type="text" id="node-input-mediaUrl" placeholder="Media URL">
</div>
<div class="form-row form-row-attachmentId form-row-template form-row-template-media">
  <label for="node-input-attachmentId">Attachment Id</label>
  <input type="text" id="node-input-attachmentId" placeholder="Attachment Id">
</div>
<div class="form-row form-row-productId form-row-template form-row-template-product">
  <label for="node-input-productId">Product Id</label>
  <input type="text" id="node-input-productId" placeholder="Product Id">
</div>
<div class="form-row form-row-label form-row-template form-row-template-generic form-row-template-button form-row-template-media" 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 form-row-template form-row-template-generic form-row-template-button form-row-template-media">
  <ol id="node-input-buttons-container" style="height: 250px;"></ol>
</div>
<div class="form-row form-row-template form-row-template-receipt form-row-template-customer_feedback">
  <input type="hidden" id="node-input-json" autofocus="autofocus">
  <div style="height: 250px; min-height:150px;margin-top: 25px;" class="node-text-editor" id="node-input-json-editor" ></div>
</div>
<div class="redbot-form-hint form-row-template form-row-template-receipt">
  Read the <a href="https://developers.facebook.com/docs/messenger-platform/send-messages/template/receipt" target="_blank">receipt template</a> help page to build the receipt JSON.
</div>
<div class="redbot-form-hint form-row-template form-row-template-customer_feedback">
  Read the <a href="https://developers.facebook.com/docs/messenger-platform/send-messages/templates/customer-feedback-template" target="_blank">customer feedback template</a> help page to build the customer feedback JSON.
</div>
<div class="redbot-form-hint form-row-template form-row-template-media">
  Read the <a href="https://developers.facebook.com/docs/messenger-platform/send-messages/template/media" target="_blank">media template</a> help page to learn how to build media url.
</div>
<div class="redbot-form-hint form-row-template form-row-template-product">
  Read the <a href="https://developers.facebook.com/docs/messenger-platform/send-messages/template/product" target="_blank">product template</a> help page to learn how to specify product id.
</div>
</script>

<script type="text/x-red" data-help-name="chatbot-messenger-template"><p>The <code>Messenger Template node</code> is used to send any of the supported template in <strong>Facebook Messenger</strong>:</p>
<ul>
<li><p><a href="https://developers.facebook.com/docs/messenger-platform/send-messages/template/generic">Generic template</a></p>
</li>
<li><p><a href="https://developers.facebook.com/docs/messenger-platform/send-messages/template/list">Button template</a></p>
</li>
<li><p><a href="https://developers.facebook.com/docs/messenger-platform/send-messages/template/media">Media template</a></p>
</li>
<li><p><a href="https://developers.facebook.com/docs/messenger-platform/send-messages/template/product">Product template</a></p>
</li>
<li><p><a href="https://developers.facebook.com/docs/messenger-platform/send-messages/template/receipt">Receipt template</a></p>
</li>
<li><p><a href="https://developers.facebook.com/docs/messenger-platform/send-messages/templates/customer-feedback-template">Customer Feedback Template</a></p>
</li>
</ul>
<p>For the last two templates it’s not available an advanced UI, just a JSON editor where to copy and paste the payload for the desired template (read the <strong>Facebook</strong> documentation about how to generate it).</p>
<p>Two <em>generic templates</em> can be combined together in a carousel by simply chaining <code>Messenger Template node</code> (to maximum of 10). Each template can have a maximum of 3 buttons, <code>title</code> and <code>subtitle</code> are limited to 80 chars.</p>
<p><em>Generic templates</em> and <em>button template</em> can have up to 3 buttons, see <a href="https://www.notion.so/b8f3ea33948049cca7b94491061183f4">Buttons node</a>  for a complete list of available buttons (only <code>quick-reply</code> and <code>location</code> are not available here).</p>
<p>In order to create a generic template in a upstream <code>Function node</code></p>
<pre><code class="language-javascript">msg.payload = {
  templateType: &#39;generic&#39;,
  title: &#39;my title&#39;,
  subtitle: &#39;I am a sub title&#39;,
  imageUrl: &#39;http://image.server.com/cover.png&#39;,
  buttons: [
    {
      type: &#39;url&#39;,
      url: &#39;http://javascript-jedi.com&#39;,
      label: &#39;Javascript Jedi&#39;
    }
  ]
}
</code></pre>
<p>or in order to pass a collection of elements for the carousel</p>
<pre><code class="language-javascript">msg.payload = {
  elements: [
    {
      templateType: &#39;generic&#39;,
      title: &#39;my title&#39;,
      subtitle: &#39;I am a sub title&#39;,
      imageUrl: &#39;http://image.server.com/cover.png&#39;,
      buttons: [
        {
          type: &#39;url&#39;,
          url: &#39;http://javascript-jedi.com&#39;,
          label: &#39;Javascript Jedi&#39;
        }
      ]
    },
    {
      templateType: &#39;generic&#39;,
      title: &#39;another title&#39;,
      subtitle: &#39;Second sub title&#39;,
      imageUrl: &#39;http://image.server.com/cover2.png&#39;,
      buttons: [
        {
          type: &#39;url&#39;,
          url: &#39;http://javascript-jedi.com&#39;,
          label: &#39;Javascript Jedi&#39;
        }
      ]
    }
  ]
}
</code></pre>
<p>Some additional parameters can like <em>shareable</em> or <em>aspectRatio</em> can be defined using the <a href="https://www.notion.so/d8b27db3949c475184923af913563833">Params node</a> .</p>
<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>templateType</td>
<td>string</td>
<td>Could be: <em>generic</em>, <em>button</em>, <em>customer_feedback</em>, <em>media</em> or <em>product</em></td>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>Title of the list element (for <em>generic</em> templates)</td>
</tr>
<tr>
<td>subtitle</td>
<td>string</td>
<td>Sub title of the list element (for <em>generic</em> templates)</td>
</tr>
<tr>
<td>imageUrl</td>
<td>string</td>
<td>Url of the image element (for <em>generic</em> templates)</td>
</tr>
<tr>
<td>buttons</td>
<td>array of [button]</td>
<td>Array of buttons, see <a href="https://www.notion.so/b8f3ea33948049cca7b94491061183f4">Untitled</a>  for more details (for <em>generic</em> or <em>button</em> templates)</td>
</tr>
<tr>
<td>mediaUrl</td>
<td>string</td>
<td>Url of the media element (for <em>media</em> templates)</td>
</tr>
<tr>
<td>mediaType</td>
<td>string</td>
<td>Type of media element, can be <em>video</em> or <em>image</em> (for <em>media</em> templates)</td>
</tr>
<tr>
<td>attachmentId</td>
<td>string</td>
<td>Facebook attachment id (for <em>media</em> templates)</td>
</tr>
<tr>
<td>productId</td>
<td>stgring</td>
<td>Facebook product id (for <em>product</em> templates)</td>
</tr>
</tbody></table>
<p>The <code>[element]</code> object|</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>title</td>
<td>string</td>
<td>Title of the generic template element</td>
</tr>
<tr>
<td>subtitle</td>
<td>string</td>
<td>Sub title of the generic template element</td>
</tr>
<tr>
<td>imageUrl</td>
<td>string</td>
<td>Url of the generic template image</td>
</tr>
<tr>
<td>buttons</td>
<td>array of [button]</td>
<td>Array of buttons, see <a href="https://www.notion.so/b8f3ea33948049cca7b94491061183f4">Untitled</a>  for more details</td>
</tr>
</tbody></table>
</script>