node-red-contrib-chatbot/nodes/chatbot-alexa-card.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-alexa-card', {
    category: 'RedBot',
    color: '#FFCC66',
    defaults: {
      cardType: {
        value: 'simple'
      },
      title: {
        value: ''
      },
      text: {
        value: ''
      },
      smallImage: {
        value: ''
      },
      largeImage: {
        value: ''
      }
    },
    inputs: 1,
    outputs: 1,
    paletteLabel: 'Alexa Card',
    icon: 'chatbot-card.png',
    label: function() {
      return 'Alexa Card';
    },
    oneditprepare: function() {
      $('#node-config-input-cardType')
        .change(function() {
          var type = $(this).val();
          $('.form-row.only-for').hide();
          $('.form-row.only-for-' + type).show();
        });
      $('.form-row.only-for').hide();
      $('.form-row.only-for-' + this.cardType).show();
    }
  });
</script>

<script type="text/x-red" data-template-name="chatbot-alexa-card">
  <div class="form-row">
    <label for="node-config-cardType">Type</label>
    <select id="node-config-cardType" placeholder="Select card type">
      <option value="simple">Simple</option>
      <option value="standard">Standard</option>
      <option value="linkAccount">LinkAccount</option>
      <option value="askForPermissionsConsent">AskForPermissionsConsent</option>
    </select>
  </div>
  <div class="form-row only-for only-for-simple only-for-standard">
    <label for="node-input-title">Title</label>
    <input type="text" id="node-input-title" placeholder="Title">
  </div>
  <div class="form-row only-for only-for-standard only-for-simple">
    <label for="node-input-text" style="width:auto;">Content of the card</label>
    <textarea id="node-input-text" placeholder="" style="width:93%;height:100px;"></textarea>
  </div>
  <div class="form-row only-for only-for-standard">
    <label for="node-input-image" style="float:left;">Image</label>
    <div style="margine-left:100px;">
      <span style="font-size: 13px;color: #666666;">Small Image Url</span><br/>
      <input type="text" id="node-input-smallImage" placeholder="Enter URL" style="margin-bottom:5px;"><br/>
      <span style="font-size: 13px;color: #666666;">Large Image Url</span><br/>
      <input type="text" id="node-input-largeImage" placeholder="Enter URL">
    </div>
  </div>
</script>

<script type="text/x-red" data-help-name="chatbot-alexa-card">

</script>