Unauthorized Bot Service from Web Chat

Using Microsoft Bot Framework, I created a Chat Bot and I am able to test the Bot using local Emulator. Bot service also deals with LUIS and everything again works just fine. My Bot Service has MicrosoftAppId and MicrosoftAppPassword in web.config.

I deployed the service to Azure. Then embedded a web chat in browser (Github) but it doesn't work. The error say

Buffer="{
  "message": "An error has occurred.",
  "exceptionMessage": "Unauthorized",
  "exceptionType": "Microsoft.Bot.Connector.MicrosoftAppCredentials+OAuthException",
  "stackTrace": "   at Microsoft.Bot.Sample.LuisBot.MessagesController.<Post>d__0.MoveNext()

......

    "innerException": {
        "message": "An error has occurred.",
        "exceptionMessage": "Response status code does not indicate success: 401 (Unauthorized).",
        "exceptionType": "System.Net.Http.HttpRequestException",
        "stackTrace": "   at System.Net.Http.HttpResponseMessage.EnsureSuccessStatusCode()\r\n   at Microsoft.Bot.Connector.MicrosoftAppCredentials.<RefreshTokenAsync>d__26.MoveNext()"

I believe when I pass my Web Chat Secret Key (I have also tried to pass generated Token but no luck), then it should be authorized (passing App Id and Password) automatically. Is it not?

Browser embedded web chat gives Unauthorized error.
Test in Web Chat windows gives same error.

I have also tried to deploy Bot service by removing MicrosoftAppId and MicrosoftAppPassword but nothing changes.

Its all very new to me. Could someone please help me to get some clarity on this issue? Also is it fine to give away my Microsoft App Id publicly?

Edit 1

Implementation of Web Chat control in Browser.

Created ASP.Net empty website and have a HTML page (index.html).
Following code is written in index.html page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <div id="bot" />
    <hr />

    <iframe width="400" height="300" src='https://webchat.botframework.com/embed/#Web_App_Bot_Name#?s=Web_Chat_Secret_Key'></iframe>
</body>
</html>

Microsoft App Id = f0f7297e-7a95-4a8f-afc1-eb3d19906cd0
Screen rendered via my code looks like this. And when I send message, it says Couldn't Send. In Azure Diagnostics for App Service, I see error as Unauthorized.

401 (Unauthorized)

You can try the following steps to troubleshoot the issue:

Please check if you specify the correct MicrosoftAppID and MicrosoftAppPassword for your bot on Application Settings blade.
Please check if you specify the correct message endpoint for the bot on the Settings blade.

Note: You can also try to Manage your MicrosoftApp and Generate New Password for that app, and specify MicrosoftAppPassword with new generated password on Application Settings blade and check if it works with new password.
Please try to create a new bot on Azure portal, and publish your bot application to corresponding web application that you specified as messaging endpoint, and check if that new bot works fine.