Bot: There was an error sending this message to your bot: HTTP status code GatewayTimeout

[Melkeydev]

I am attempting to integrate SDK4.0 Bot Framework into Web Chat Channel.

Everything seems to be running smoothly- dot was deployed onto Azure from local environment and is testing properly.

Issue is when integrating it into the actual website via web chat channel. Following this source: https://docs.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-webchat?view=azure-bot-service-4.0

but receiving the following errors:

Any help would be very helpful.

Thank you,

[Melkeydev]

Any help? ~{bump}

[mdrichardson]

I can help with this, but need some additional information:

1. Does "Test in Web Chat" work from Azure Portal > Your Resource Group > Your Web App Bot/Bot Channels Registration > Test in Web Chat?
2. What is your MicrosoftAppId?
3. Can you share the full HTML that you're using to implement WebChat (minus your secret)?

[CoHealer]

@Amokstakov do you still require assistance or should we consider the issue resolved?

[Melkeydev]

Hi Sorry - 1) It works through Test yes 2) My app Id exists and I have it 3) the Iframe I am using: <iframe src='https://webchat.botframework.com/embed/SECRET INFO' style={{minWidth: '400px', width: '100%', minHeight: '500px'}}>

So as an update I have actually put it in the Website

however my NEW ISSUE UPDATE: I can see the chatbot, and I can interact with it. However, it doesn't show the Welcome Message. It only starts working when I send a message initially like "Hey".

When I see it embedded in the website, it is just chatbox. And It doesn't start until a message is prompted by the user, but I do have a onMembersAdded handler in my code, and in the Testing Site on Azure it shows up when I go on the Testing channel.

Any help?

[mdrichardson]

@amokstakov

We've got a few issues to handle here:

1. If you would like me to troubleshoot things on the backend, I'll need to know your appId.
2. The iframe version of WebChat isn't updated to the latest version of WebChat for most people and can often cause issues. See here for more info.
3. Not all channels send a conversationUpdate (which triggers welcome messages), including WebChat. However, one of the samples shows you how to force the welcome message to be sent

[Melkeydev]

We've got a few issues to handle here:

1. If you would like me to troubleshoot things on the backend, I'll need to know your appId.
2. The iframe version of WebChat isn't updated to the latest version of WebChat for most people and can often cause issues. See here for more info.
3. Not all channels send a conversationUpdate (which triggers welcome messages), including WebChat. However, one of the samples shows you how to force the welcome message to be sent

Hi! Thanks for the help.

1)206ea021-b5f1-4cef-a275-29a6dfc61706 2) This was good to know - thank you 3) I have seen example ChatBots created where once it is integrated into the website, whenever someone opens it - it begins dialog/welcome message.

Here is an example: https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/12.customization-minimizable-web-chat

^ in the above example, I attempted to git clone it and look at the code, to see if i can just replace it with my personal iframe but I could not see that tag anywhere in the script

[mdrichardson]

@Amokstakov Regarding your point 3...they likely did what I included in my point 3. Regarding that example, you don't copy/paste your iframe code over the sample's (which doesn't exist). Its README tells you where to put your Secret. I don't recommend starting with that sample, though, as it's fairly complex. Sample 1 is pretty easy. You can just replace (in index.html):

- const { token } = await res.json();
+ const token = '<yourWebChatSecret>';

However, as the README states:

It is never recommended to put the Direct Line secret in the browser or client app. To learn more about secrets and tokens for Direct Line, visit this tutorial on authentication.

[Melkeydev]

@mdrichardson This did not fix my issue - I am not sure why it is closed

[mdrichardson]

@Amokstakov What is your issue, now? By implementing everything I suggested, it will fix all of your issues.

[Melkeydev]

@mdrichardson

my issue is that when I integrate my chatbot into my web chat (website) via Iframe or Direct Secrety, the ChatBot does not work until a user sends a message in the chatbot.

In the Azure Portal, when inside the Test Channel the ChatBot automatically sends the expected welcome message when it realizes a user is there, not needing the user to send an initial message.

But even now, when I did what you suggested via Sample 1, and I go to my Local Host where it is running, it is just a blank screen. I expect it to send the welcome message, as it does in my Test Channel on Azure.

It only starts working when I send an initial message

[Melkeydev]

Please see attached images. The one above is what I see in any instance of when the ChatBot is integrated,

and the second image below is how it reacts after i send a message. The first two "Welcome.." is expected to be prompted right when the user triggers the Chat.

[mdrichardson]

You may have just missed this comment, then:

Not all channels send a conversationUpdate (which triggers welcome messages), including WebChat. However, one of the samples shows you how to force the welcome message to be sent

[Melkeydev]

Hi,

I just implemented that same sample and switched the code and still same issue:

see attached. The only difference is now I see a "Channel-Data" on the bottom.

[mdrichardson]

Please copy/paste your index.html (remove your secret, first)

[Melkeydev]

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Inject data on post activity</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--
      This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
      https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
    -->
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

    <!-- We are using simple-update-in package to simplify demo code. -->
    <script src="https://unpkg.com/simple-update-in/dist/simple-update-in.production.min.js"></script>
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
      }

      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="webchat" role="main"></div>
    <script>
      (async function() {
        // In this demo, we are using Direct Line token from MockBot.
        // Your client code must provide either a secret or a token to talk to your bot.
        // Tokens are more secure. To learn about the differences between secrets and tokens
        // and to understand the risks associated with using secrets, visit https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0

        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
        const token  = 'SECRET';

        // We are adding a new middleware to customize the behavior of DIRECT_LINE/POST_ACTIVITY.
        const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
          if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
            // The channelData submitted here is very similar to HTTP cookies and vulnerable to forgery attack.
            // Make sure you use signature to protect it and verify the signature on the bot side.

            // To minimize unexpected behaviors, we recommend to treat the "action" object as if it is immutable.
            // We use simple-update-in package to update "action" with partial deep cloning.
            action = window.simpleUpdateIn(
              action,
              ['payload', 'activity', 'channelData', 'email'],
              () => 'johndoe@example.com'
            );
          }

          return next(action);
        });

        window.WebChat.renderWebChat(
          {
            directLine: window.WebChat.createDirectLine({ token }),
            // We will use a custom version of Redux store, which we added middleware to handle backchannel messages.
            store
          },
          document.getElementById('webchat')
        );

        store.dispatch({
          type: 'WEB_CHAT/SET_SEND_BOX',
          payload: { text: 'channel-data' }
        });

        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));
    </script>
  </body>
</html>

[Melkeydev]

BTW,

Here is a sample of what is happening in my Test channel. These messages happen automatically

[mdrichardson]

I think you may have gotten your samples mixed up for triggering the welcome message. You should be using this:

const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
      // When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
      dispatch({
        type: 'WEB_CHAT/SEND_EVENT',
        payload: {
          name: 'webchat/join',
          value: { language: window.navigator.language }
        }
      });
    }

[...]

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ token }),
    store
    }, document.getElementById('webchat'));
    document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));

[Melkeydev]

@mdrichardson Thank you for the incredible help and work. Worth all appraisal for this. resolved and fixed.

Best!

[mdrichardson]

😁 Glad you got it working! And I understand your confusion:

1. "Test in Web Chat" and Emulator don't always operate like the iframe (this will be fixed as the updated iframe code starts rolling out to everybody)
2. There are a lot of Web Chat samples

[JeSami]

Hi,

I am facing similar issue. I have created a bot using Python and tested successfully locally but after deploying to azure I am not getting any response from bot in Web Chat.

Error Message : "There was an error sending this message to your bot: HTTP status code ServiceUnavailable"

BDW - i went through the discussion on this thread but i still did not get where exactly to modify the code.

Appreciate for any help on this.

[mdrichardson]

@JeSami I've only ever see this happen if somebody didn't follow the deployment docs exactly. I recommend re-deploying, starting from the top. Common hangups are:

1. Not using a password that meets the requirements: 16 characters long, contain at least 1 upper or lower case alphabetical character, and contain at least 1 special character.
2. Missing the last step and not actually deploying.
3. Zipping up their files incorrectly. The file tree should look like this:

/code.zip
--app.py
--requirements.txt
--...

and not like this:

/code.zip
--/myBot
----app.py
----requirements.txt
----...

If you still can't get this to work, please open a new issue with what you've tried.

[JeSami]

@mdrichardson thank you so much for your great help. Previously my folder structure was incorrect for zipping. Now this is resolved. I can happily chat with my first web chatbot :)

[prafuldhone]

Hi Team,

I am publishing the Bot from Composer. It is getting published properly from Composer. But I am not able to run it on Web APP Bot on Azure Portal: Mostly I am getting this error: There was an error sending this message to your bot: HTTP status code GatewayTimeout

Sometimes I do get this error: There was an error sending this message to your bot: HTTP status code InternalServerError

Please note, I have added appropriate AppID and Password by getting it from APP Service from Azure. Second thing, it is properly running on Composer. Third, I am using existing resources Ids to create this Bot. I hope this is fine.

Can someone quickly help me here?

[sunnamed434]

@prafuldhone i have this problem too, did u fix it?