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">
  $.RedBot.registerType('chatbot-alexa-card', {
    category: $.RedBot.config.name,
    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"><p>Cards are shown in graphical-enabled devices and in the timelines of Alexa app.</p>
<p>In order to add a card to a speech output, just chain the node</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/fdd4f984-d4c7-4270-bfe3-9fa483d16c7f/example-alexa-card.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230218%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230218T124852Z&X-Amz-Expires=3600&X-Amz-Signature=e4ee22408c78c47c52f150a382740933229c3b50b253d460c5309900c6daca31&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Example Alexa Card"></p>
<p>In order to create a card programmatically in a upstream <code>Function node</code>:</p>
<pre><code class="language-javascript">msg.payload = {
  cardType: &#39;standard&#39;,  
  title: &#39;Title of the card&#39;,  
  text: &#39;Some descriptive text here&#39;,  
  smallImage: &#39;https://placeimg.com/320/240/any&#39;,  
  largeImage: &#39;https://placeimg.com/640/480/any&#39;
};
</code></pre>
<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>cardType</td>
<td>string</td>
<td>Type of card. One of: <em>simple</em>, <em>standard</em>, <em>linkAccount</em>, <em>askForPermissionsConsent</em></td>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>The title of the card</td>
</tr>
<tr>
<td>content</td>
<td>string</td>
<td>Text of the card <em>simple</em></td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>Content of the card <em>standard</em></td>
</tr>
<tr>
<td>smallImage</td>
<td>string</td>
<td>URL of image (small). Only for <em>standard</em> type</td>
</tr>
<tr>
<td>largeImage</td>
<td>string</td>
<td>URL of image (large). Only for <em>standard</em> type</td>
</tr>
</tbody></table>
</script>