ChatBot did not work in Web Emulator

That’s a very common and tricky issue — especially when a Bot Framework bot works perfectly in the local Bot Emulator, but fails to respond when integrated via Direct Line on a hosted web app (Azure, SharePoint, or company site).

Let’s carefully go through why this happens, what’s really going on, and how to fix it — step by step.

Understanding the Issue

When debugging:

• Local Emulator ? works fine
  ? because it calls your bot directly via http://localhost:3978/api/messages.

• Web Chat (Direct Line) ? fails
  ? because Direct Line calls your bot via public HTTPS endpoint, not localhost.

So, the issue is usually one of these categories:

Step-by-Step Troubleshooting Guide

Step 1: Verify Bot Channel Registration

1. Go to your bot in Azure Portal ? Channels ? Direct Line.

2. Copy the Direct Line Secret.

3. Use it in your Web Chat code:

   const botConnection = new BotChat.DirectLine({
       secret: "YOUR_DIRECTLINE_SECRET"
   });
   

4. Make sure the bot’s messaging endpoint is HTTPS and accessible publicly (not localhost or internal IP).

   Example:

   https://mybotapp.azurewebsites.net/api/messages
   

   Not allowed:

   http://localhost:3978/api/messages
   http://intranet-server/api/messages
   

Step 2: Test the Endpoint Directly

Use Postman or a browser to test:

POST https://yourbotendpoint/api/messages

with a small payload (e.g., a sample Activity JSON).

If it returns 401 Unauthorized or 502 Bad Gateway, then your web service is not reachable or requires authentication.

If your bot is hosted on SharePoint On-Prem, ensure you’ve exposed it via a public-facing HTTPS reverse proxy (like Azure Relay, ngrok, or IIS ARR).

Step 3: Ensure HTTPS & CORS Are Enabled

If your web app is hosted on a company site (like SharePoint On-Prem):

1. Enable HTTPS binding in IIS.

2. Add CORS policy to allow requests from https://webchat.botframework.com or your domain.

In Web.config (or Startup.cs):

app.UseCors(builder =>
    builder.WithOrigins("https://webchat.botframework.com", "https://yourcompanysite.com")
           .AllowAnyHeader()
           .AllowAnyMethod());

Step 4: Check App ID and Password

In your bot project’s appsettings.json or Web.config:

These must match the credentials in Azure ? Bot Channels Registration ? Settings.
If they don’t, Direct Line will silently fail to authenticate.

Step 5: Try Using ngrok

If your bot is still hosted internally (like in SharePoint On-Prem):

1. Install ngrok (https://ngrok.com).

2. Run:

   ngrok http 3978
   

3. You’ll get a public HTTPS URL:

   https://a1b2c3d4.ngrok.io
   

4. Update your bot’s endpoint in Azure Bot Channels to:

   https://a1b2c3d4.ngrok.io/api/messages
   

5. Now test again — Direct Line should connect successfully.

Step 6: Enable Debug Logs

In Web.config (or appsettings.json):

Or in your Web Chat page:

window.WebChat.renderWebChat({
  directLine: window.WebChat.createDirectLine({ secret: "YOUR_DIRECTLINE_SECRET" }),
  debug: true
}, document.getElementById('webchat'));

Then open F12 ? Console to check if messages are failing with 403, 401, or CORS errors.

Real-World Scenario: SharePoint On-Prem + Direct Line

If your bot runs inside SharePoint On-Prem, your endpoint is likely internal (not public).
Azure Direct Line cannot reach it directly.

Solution:

• Host your bot externally (Azure Web App, IIS with reverse proxy).

• Or use Azure Relay / Hybrid Connection to expose the internal endpoint securely.

• Example guide:
  
  Expose On-Prem Bot via Azure Relay

Quick Checklist

Example Web Chat Embed

Summary

Works locally ? because local emulator connects directly

Fails via Direct Line ? because of endpoint / security / authentication

To fix:

• Host bot externally with HTTPS

• Use correct Direct Line secret

• Enable CORS

• Match App ID/Password

• Check firewall or proxy configuration