title: Bot framework webchat throws 502 Bad Gateway
body: <p>I'm trying to pass additional channel data through to my C# back end via the web chat html template supplied by Microsoft, and I'm having no luck.</p>
  
  <p>I've read so many blog posts around this, but I have no idea how these guys got it to work, as I'm always getting a 502 Bad Gateway with every post.</p>
  
  <p>My bot App initialization in the HTML looks like this:</p>
  
  <pre><code>    // removed my token for brevity
  
      var connection = new BotChat.DirectLine({
          token: "{secret}",
          webSocket: true
      });
  
      function getBotConnectionDetail(botconnection) {
          var botConnectionDetail = {};
          var keys = Object.keys(botconnection);
          for (var i = 0; i &lt; keys.length; i++) {
              botConnectionDetail[keys[i]] = botconnection[keys[i]];
          };
          botConnectionDetail['postActivity'] = function (activity) {
              activity.channelData = {
                  Username: 'John Doe'
              };
              return botconnection.postActivity(activity);
          };
          return botConnectionDetail;
      }
  
      BotChat.App({
          botConnection: getBotConnectionDetail(connection),
          user: { id: "Yo" },
          bot: { id: "Yo" },
          resize: "window"
      },
      document.getElementById("bot"));
  </code></pre>
  
  <p>this example is loosely based on the following blogs and github tickets I've tried, below.</p>
  
  <p>Either this is a new bug introduced on the DirectlineJS component, or this never worked. Any help would be greatly appreciated.</p>
  
  <p><a href="https://stackoverflow.com/questions/46849890/sending-channeldata-to-webchat-with-each-message">Sending channelData to webchat with each message</a></p>
  
  <p><a href="https://github.com/Microsoft/BotBuilder/issues/15" rel="nofollow noreferrer">https://github.com/Microsoft/BotBuilder/issues/15</a></p>
  
  <p><a href="https://github.com/Microsoft/BotBuilder/issues/201" rel="nofollow noreferrer">https://github.com/Microsoft/BotBuilder/issues/201</a></p>
  
  <p><a href="https://github.com/Microsoft/BotFramework-WebChat/issues/142" rel="nofollow noreferrer">https://github.com/Microsoft/BotFramework-WebChat/issues/142</a></p>
  
  <p><strong>Update</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
      &lt;title&gt;Bot Chat&lt;/title&gt;
      &lt;title&gt;Siza&lt;/title&gt;
      &lt;link href="webview/webview.css" rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" /&gt;
      &lt;style&gt;
          html, body {
              height: 100%;
              margin: 0;
              overflow: hidden;
              padding: 0;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="bot"&gt;&lt;/div&gt;
  &lt;script src="webview/botchat.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var connection = new BotChat.DirectLine({
          secret: "{secret}",
          webSocket: true
      });
  
      function getBotConnectionDetail(botconnection) {
          var botConnectionDetail = {};
          var keys = Object.keys(botconnection);
          for (var i = 0; i &lt; keys.length; i++) {
              botConnectionDetail[keys[i]] = botconnection[keys[i]];
          };
          botConnectionDetail['postActivity'] = function (activity) {
              activity.channelData = {
                  Username: 'John Doe'
              };
              return botconnection.postActivity(activity);
          };
          return botConnectionDetail;
      }
  
      BotChat.App({
          botConnection: getBotConnectionDetail(connection),
              user: { id: "Yo" },
              bot: { id: "Yo" },
              resize: "window"
          },
          document.getElementById("bot"));
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>