Bot Not working after embedding it into our website using webchat iframe embed code

Question

Bot Not working after embedding it into our website using webchat iframe embed code

Abdhaheer Kabeer 20

I developed a bot using Microsoft bot framework and tested it locally in the emulator. After that, I deplyed my code in the IIS server and configured Azure bot service with URL endpoint. Then utlized provided web chat iframe code for embedding into our website. But Bot is not working.

navba-MSFT 27,605 Reputation points Microsoft Employee Moderator

2024-11-26T12:46:55.92+00:00

@Abdhaheer Kabeer Welcome to Microsoft Q&A Forum, Thank you for posting your query here!

.

Plan 1:

Please click on test in webchat and check if that works.

if this doesn't work, then it means the directline also may not work. So this needs to be fixed first. Then follow the below steps.

.

Plan 2:

Click on the F12 developer tools in the browser --> Go to Network tab and Console tab and check if any errors. Check if the call is even done to the directline endpoint.

.

Plan 3:

Please navigate to the channels tab in the Azure Bot Service and check if there are any issues for webchat as shown below:

Click on the issues and check if any errors.

.

Plan 4:

Try to invoke the directline endpoint directly and check if that works. https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0 .

.

Plan 5:

To troubleshoot exceptions in the Azure Bot Service follow this article. You can enable the diagnostic logging for your Azure App service as explained in this article and check for any errors.

.

Hope this helps.
Abdhaheer Kabeer 20 Reputation points

2024-11-26T14:08:21.4666667+00:00
Plan-1:

The "Test in web chat" is not working. Can you please advice me how can I troubleshoot this

Plan-2:
I looked into the console. A post request is made to the endpoint "https://europe.webchat.botframework.com/v3/directline/conversations" but recieved a error code of - "400 (Bad request).

Plan-3:
There a 4 issues visible in the Web chat channel. I see below messages when i clicked on it.
Message-1: There was an error sending this message to your bot: HTTP status code InternalServerError
Message-2: There was an error sending this message to your bot: HTTP status code NotFound

Message-3: There was an error sending this message to your bot: HTTP status code NotFound

Message-4: There was an error sending this message to your bot: HTTP status code InternalServerError

Plan-4:

I invoked one of the Direct line API endpoint in postman- "https://europe.directline.botframework.com/v3/directline/tokens/generate" and I got the below response. [Note: I enable "Enhanced Authentication" option in Direct Line channel site settings. ].

{ "error": { "code": "BadArgument", "message": "tokenParameters is missing User." } }
Abdhaheer Kabeer 20 Reputation points

2024-11-26T14:11:46.5666667+00:00
Plan-1:
Test in web chat not working. I am not recieving the welcome message. Also I tried sending Hi message but no response from the bot.

Plan-2:

Yes. A POST request is made to the endpoint - "https://europe.webchat.botframework.com/v3/directline/conversations" but a error code of "400: Bad Request" is recieved.

Plan-3:

In wechat channel i can see issue(4) indication. When i clicked on it
Message-1: There was an error sending this message to your bot: HTTP status code InternalServerError
Message-2: There was an error sending this message to your bot: HTTP status code NotFound
Message-3: There was an error sending this message to your bot: HTTP status code NotFound
Message-4: There was an error sending this message to your bot: HTTP status code NotFoundPlan-4:

I tried invoking a one of the direct line endpoint in postman "https://europe.directline.botframework.com/v3/directline/tokens/generate" and I got the below response . [Note: The Enhanced authentication is enabled in Direct line channel site settings].

{ "error": { "code": "BadArgument", "message": "tokenParameters is missing User." } }
Abdhaheer Kabeer 20 Reputation points

2024-11-27T12:06:03.7466667+00:00

@navba-MSFT

Hi Thank you for your suggestions. I tried out the steps you mentioned. Can you please look into the above comment.
navba-MSFT 27,605 Reputation points Microsoft Employee Moderator

2024-12-02T04:56:08.48+00:00

@Abdhaheer Kabeer Just following up to check if my suggestion helped. Please let me know if you have any further queries. I would be happy to help.
Abdhaheer Kabeer 20 Reputation points

2024-12-02T08:54:55.36+00:00

@navba-MSFT

Hi, Thank you so much for your support. As per your advice, I made the bot work in the "Test in web chat", Now it is working well. After that also continued facing the issue in UI. After adding a small snippet of the code which is even missing in the documentation for embedding the web chat in the website. That part of the code become crucial in communicating with the bot.
navba-MSFT 27,605 Reputation points Microsoft Employee Moderator

2024-12-03T02:26:37.9266667+00:00

@Abdhaheer Kabeer I am glad that it is now working fine. Please share that code snippet here, so that it can be beneficial for the community audience who encounter the same issue.

1 answer

Your answer

navba-MSFT 27,605 Reputation points Microsoft Employee Moderator

2024-11-26T12:46:55.92+00:00

@Abdhaheer Kabeer Welcome to Microsoft Q&A Forum, Thank you for posting your query here!

.

Plan 1:

Please click on test in webchat and check if that works.

if this doesn't work, then it means the directline also may not work. So this needs to be fixed first. Then follow the below steps.

.

Plan 2:

Click on the F12 developer tools in the browser --> Go to Network tab and Console tab and check if any errors. Check if the call is even done to the directline endpoint.

.

Plan 3:

Please navigate to the channels tab in the Azure Bot Service and check if there are any issues for webchat as shown below:

Click on the issues and check if any errors.

.

Plan 4:

Try to invoke the directline endpoint directly and check if that works. https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0 .

.

Plan 5:

To troubleshoot exceptions in the Azure Bot Service follow this article. You can enable the diagnostic logging for your Azure App service as explained in this article and check for any errors.

.

Hope this helps.
Abdhaheer Kabeer 20 Reputation points

2024-11-26T14:08:21.4666667+00:00

Plan-1:

The "Test in web chat" is not working. Can you please advice me how can I troubleshoot this

Plan-2:
I looked into the console. A post request is made to the endpoint "https://europe.webchat.botframework.com/v3/directline/conversations" but recieved a error code of - "400 (Bad request).

Plan-3:
There a 4 issues visible in the Web chat channel. I see below messages when i clicked on it.
Message-1: There was an error sending this message to your bot: HTTP status code InternalServerError
Message-2: There was an error sending this message to your bot: HTTP status code NotFound

Message-3: There was an error sending this message to your bot: HTTP status code NotFound

Message-4: There was an error sending this message to your bot: HTTP status code InternalServerError

Plan-4:

I invoked one of the Direct line API endpoint in postman- "https://europe.directline.botframework.com/v3/directline/tokens/generate" and I got the below response. [Note: I enable "Enhanced Authentication" option in Direct Line channel site settings. ].

{ "error": { "code": "BadArgument", "message": "tokenParameters is missing User." } }
Abdhaheer Kabeer 20 Reputation points

2024-11-26T14:11:46.5666667+00:00

Plan-1:
Test in web chat not working. I am not recieving the welcome message. Also I tried sending Hi message but no response from the bot.

Plan-2:

Yes. A POST request is made to the endpoint - "https://europe.webchat.botframework.com/v3/directline/conversations" but a error code of "400: Bad Request" is recieved.

Plan-3:

In wechat channel i can see issue(4) indication. When i clicked on it
Message-1: There was an error sending this message to your bot: HTTP status code InternalServerError
Message-2: There was an error sending this message to your bot: HTTP status code NotFound
Message-3: There was an error sending this message to your bot: HTTP status code NotFound
Message-4: There was an error sending this message to your bot: HTTP status code NotFoundPlan-4:

I tried invoking a one of the direct line endpoint in postman "https://europe.directline.botframework.com/v3/directline/tokens/generate" and I got the below response . [Note: The Enhanced authentication is enabled in Direct line channel site settings].

{ "error": { "code": "BadArgument", "message": "tokenParameters is missing User." } }
Abdhaheer Kabeer 20 Reputation points

2024-11-27T12:06:03.7466667+00:00

@navba-MSFT

Hi Thank you for your suggestions. I tried out the steps you mentioned. Can you please look into the above comment.
navba-MSFT 27,605 Reputation points Microsoft Employee Moderator

2024-12-02T04:56:08.48+00:00

@Abdhaheer Kabeer Just following up to check if my suggestion helped. Please let me know if you have any further queries. I would be happy to help.
Abdhaheer Kabeer 20 Reputation points

2024-12-02T08:54:55.36+00:00

@navba-MSFT

Hi, Thank you so much for your support. As per your advice, I made the bot work in the "Test in web chat", Now it is working well. After that also continued facing the issue in UI. After adding a small snippet of the code which is even missing in the documentation for embedding the web chat in the website. That part of the code become crucial in communicating with the bot.
navba-MSFT 27,605 Reputation points Microsoft Employee Moderator

2024-12-03T02:26:37.9266667+00:00

@Abdhaheer Kabeer I am glad that it is now working fine. Please share that code snippet here, so that it can be beneficial for the community audience who encounter the same issue.

Answer 1

@Abdhaheer Kabeer Thanks for getting back and sharing the updates on the suggested action plans.

Observation 1:
If the test in webchat ,itself is failing with InternalServer error there seems to be an application level exception which is triggered. To troubleshoot exceptions in the Azure Bot Service follow this article. You can enable the diagnostic logging for your Azure App service as explained in this article and check for any errors.

Observation 2:

You can try to isolate this issue by disabling the Enhanced token authentication for now and try directly accessing it using the directline secret (Though its not recommended). Atleast this will help you to isolate and track the issue. Update the secret in the below and test your endpoint and check in console and Network tab for any errors.

<!DOCTYPE html>
<html>
  <head>
    <script
      crossorigin="anonymous"
      src="https://cdn.botframework.com/botframework-webchat/latest/webchat.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>
      window.WebChat.renderWebChat(
        {
          directLine: window.WebChat.createDirectLine({
            token: 'JuU8ygZh_h0XXXXXXXXXXXXXXXXXXXXXcxvkNQr6xbmVs'
          }),
          userID: 'YOUR_USER_ID',
          username: 'Web Chat User',
          locale: 'en-US'
        },
        document.getElementById('webchat')
      );
    </script>
  </body>
</html>

Awaiting your reply.

Share via

Bot Not working after embedding it into our website using webchat iframe embed code

1 answer

Your answer