Botframework-webchat: Integrate WebChat with ASP.NET MVC

[friendlyNoob]

Sorry if this does not belong here (this is a question regarding how to use the code), but I'm quite new to the MS Bot Framework (and software development in general) and I've been wondering how I can integrate the custom bot chat window I customized using your WebChat code into an "ASP.NET Web Application (.NET Framework)" Visual Studio project.

I created a blank/template ASP.NET MVC app (selecting the project type as above), and I want to embed the custom bot chat window created using WebChat on one of the default pages (the home page for example). In your README.md, I tried to follow the instructions under the "Inline in your non-React website" title, and this is what I attempted:

• I cloned the repository
• I ran "npm install", then "npm run build"
• Following the above, I found a very long file in my directory called "botchat.js" which I copied over to a folder I created in my ASP.NET project (MVC) in Visual Studio. I did this following from point 2. "Include webpacked/botchat.js...". I am not quite sure what/where the "webpacked" folder is? When I ran "npm run build" I only see a file called "botchat.js" in a folder called "test".
• Anyway, after this I simply copy/pasted the "botchat.css" file into the "Content" folder of my Visual Studio MVC project.
• Finally, following what I assumed was the final step, I copy/pasted the "index.html" file's contents from "samples/standalone/index.html" (not including the html tag and !DOCTYPE statement at the top), and directly into the cshtml file "Index.cshtml" in the Views->Home folder (this is what I assume is the markup code for the content of the Home page).
• EDIT: The Bot chat window now shows up (just had to define the full path for the css and js files)! However, the Bot itself does not connect/work..I'm not sure how to configure the DirectLine secret/token here. What I tried was hardcoding the DirectLine secret in the "secret: params['s']," line in the "Index.cshtml" file (so replace "s" with the secret) - this is just for now, and later I was thinking of using tokens instead (refreshing them every time the user sends a message to the bot etc).

What am I doing horribly wrong here? I feel like I'm missing something big/stupid, but I cannot figure it out.

Perhaps it might be to do with instruction point 6. "Create an instance of BotChat.DirectLine using your Direct Line Secret or Token" or 7. "Call BotChat.App with the DOM element where you want your chat instance, your DirectLine instance, user and bot identities, and other properties as demonstrated in samples/standalone/index.html.". Although I'm somewhat sure for 7. the sample html code handles that?

If I'm being unclear/vague, I would gladly clarify as much as I can. Thanks!

tldr: I'm not sure how to do step 6. "Create an instance of BotChat.DirectLine using your Direct Line Secret or Token" and step 7. "Call BotChat.App with the DOM element where you want your chat instance, your DirectLine instance, user and bot identities, and other properties as demonstrated in samples/standalone/index.html.". Clarification would be extremely helpful, thanks!

[billba]

We recently moved botchat.js to the root, so you got the correct file. I will update the docs.

If you aren't customizing the control you don't need to clone or build the project. You can get the files directly from the CDN: https://unpkg.com/botframework-webchat/botchat.[js/css]

@danmarshall can you help with the rest? I haven't used asp.net in a million billion years.

[danmarshall]

Hi @friendlyNoob , your approach seems correct -

hardcoding the DirectLine secret in the "secret: params['s']," line in the "Index.cshtml" file (so replace "s" with the secret) - this is just for now

So, you are seeing a chat display, but you are not able to connect to your bot? I would say at this time, to look at your Network activity in your browser's debugger. See if your network calls are sending/returning successfully.

[billba]

Make sure you replace params['s'] (not just 's') with the secret (or add the secret to your URL as ?s=your_secret). Also make sure it's a Direct Line secret and not a WebChat secret.

[friendlyNoob]

Thank you both for the replies!

@danmarshall, yeah I could see the chat display but there was no connection. I followed @billba 's advice and replaced "params['s']" with my DirectLine secret (not just the "s"), and it works great now! Keep up the great work guys.

[gjayakumar92]

@billba i want to create a custom webchat UI and Instead of using directline API, is there anyway to create custom DirectLine API.

[billba]

@gjayakumar92 can you be a little more expansive about what you're trying to do so that I can do the best possible job answering your question?

[gjayakumar92]

@billba I have a website. i need to integrate web chat using bot framework. but i don't want to relay on direcline API which is already exist. i want to create a new direct line API and i will host in my end. same thing for web chat. Now i am embedding the web chat using iframe. but i want to have it on my site itself.
is that possible? if yes, can you share me the source code of both. so that i can customize it according to my requirement.

Objective is I need to connect my bot directly.

[billba]

At this time there are no resources available to connect WebChat directly to bots built with the BotBuilder SDK. This is something you'd have to make yourself.

As for non-IFRAME options, I recently updated the README.

[rohantare]

@billba @danmarshall I am also having ASP.NET MVC website, the styling works for me very well. I want to add speech to text to webchat control. As per instructions, i think i need to have REACT website. Is it possible to include custom build of webchat control in ASP.NET MVC website?

[danmarshall]

@rohantare yes, just build from source. Then copy the botchat.js and css files to use as in the readme https://github.com/Microsoft/BotFramework-WebChat#easy-in-your-non-react-website-run-webchat-inline