hello again rasa friends i really appreciate you if you can learn me about the recomended web chat in the rasa docs.
so i tried to connect the two chat but don`t have answers,
if anyone have a detailed tutorial or somethig your would help me a lot
greetings 
if you want , you can create a web widget with the help of Bot Framework , from azure portal you can host it anywhere you can.(skype,facebook or web widget etc)
You will have to run your bot as a http server (for that you can go to rasa core docs).
Then you will just have to make a HTTP request to your rasa bot server .
I am attaching a gist link with sample code you just have to add your app id and password which you will get from the project settings, which you will create on azure portal and custom your rasa http server url according to your bot’s requirement
Hello @Robert14. Do you mind sharing the configuration of the webhook for the widget?
You should be able to use the Webchat using the following steps:
</body> tag of your webpage).<div id="webchat"/>
<script src="https://storage.googleapis.com/mrbot-cdn/webchat-0.5.3.js"></script>
<script>
WebChat.default.init({
selector: "#webchat",
initPayload: "/get_started",
interval: 1000, // 1000 ms between each message
customData: {"userId": "123"}, // arbitrary custom data. Stay minimal as this will be added to the socket
socketUrl: "http://localhost:5005",
socketPath: "/socket.io/",
title: "Title",
subtitle: "Subtitle",
inputTextFieldHint: "Type a message...",
connectingText: "Waiting for server...",
hideWhenNotConnected: true,
fullScreenMode: false,
profileAvatar: "http://to.avat.ar",
openLauncherImage: 'myCustomOpenImage.png',
closeLauncherImage: 'myCustomCloseImage.png',
params: {
images: {
dims: {
width: 300,
height: 200,
}
},
storage: "local"
}
})
</script>
You can customize all the parameters used in this widget as you like. The most important is the socketUrl parameters, because the url specified there will be used to establish the communication between the UI and your Rasa assistant. I specified the port 5005 (you can change that if you like, too). Start the ngrok on your local machine on the same port.
Lastly, launch your Rasa assistant on the same port, using the Webchat webhook. You can do that using Python. The code example below will load your assistant and connect to Webchat UI using the socketio webhook. See that in the very last line of the script I have specified that the agent has to run on the port 5005, the same as it was specified in the widget configuration. Place this code inside the directory of your Rasa assistant and once you run it, the connection between your Rasa assistant and UI should be established:
from rasa_core.channels.socketio import SocketIOInput
from rasa_core.agent import Agent
from rasa_core.interpreter import NaturalLanguageInterpreter
# load your trained agent
interpreter = NaturalLanguageInterpreter.create('your_nlu_model_path')
agent = Agent.load('your_rasa_core_model_path', interpreter=interpreter)
input_channel = SocketIOInput(
# event name for messages sent from the user
user_message_evt="user_uttered",
# event name for messages sent from the bot
bot_message_evt="bot_uttered",
# socket.io namespace to use for the messages
namespace=None
)
# set serve_forever=False if you want to keep the server running
s = agent.handle_channels([input_channel], 5005, serve_forever=True)
Give it a try and if you face any issues, let me know.
hi juste, let my try and i asking you if do something
hello @juste i have a issue i´m going to test the chat in a blank html but the chat don`t appears
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>my test page </title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<div id="webchat"></div>
test
<script src="https://storage.googleapis.com/mrbot-cdn/webchat-0.5.3.js">
</script>
<script>
WebChat.default.init({
selector: "#webchat",
initPayload: "/get_started",
interval: 1000, // 1000 ms between each message
customData: {"userId": "123"}, // arbitrary custom data. Stay minimal as this will be added to the socket
socketUrl: "http://localhost:5500",
socketPath: "/socket.io/",
title: "chatbot",
subtitle: "prueba",
inputTextFieldHint: "Type a message...",
connectingText: "Waiting for server...",
hideWhenNotConnected: true,
fullScreenMode: false,
profileAvatar: "http://to.avat.ar",
openLauncherImage: 'pacman.jpg',
closeLauncherImage: 'x.png',
params: {
images: {
dims: {
width: 300,
height: 200,
}
},
storage: "local"
}
})
</script>
</body>
</html>
sorry for my ignorance im a appretince so im new on this
regards 
update: i have response from the bot but the bot still missing
Hey @Robert14,
try to set hideWhenNotConnected to false, so that you see at least your chat window. Your console looks like the server is responding with an 200 OK, though. I can’t really tell why there is no chat widget so far.
Regards, Nick
Hi @Juste,
I am getting a 404 when I try to connect to use the webchat like you described above.
This is the console output:
127.0.0.1 - - [2019-02-04 08:58:17] "GET /socket.io/?EIO=3&transport=polling&t=MYtWzMy HTTP/1.1" 404 342 0.001001
I am using the index.html from the repo. My rasa project looks quite similar to your weather bot example.
Can anybody help?
Regards, Nick
Hmm, I saw that there were some issues regarding the wedget. I’ll check it and get back to you.
google cloud
Hello, @Juste @Robert14 I done the same steps and hideWhenNotConnected = true as well , socket.io is connected too as it gives 200 response. But my page is blank. What do i need to do see the chat widget. Please help
Sorry, I just noticed that i meant “false” when I said “true”. Have you tried to set it to false as well?
Thanks, yes it worked with false
let me try, i really appreciate yours answers
regards
@Juste i’m running bot using this “python -m rasa_core.run -d /models/dialogue -u /models/nlu/default/dashboardnlu --endpoints endpoints.yml” command. bot server is running on http://localhost:5005 url and able to interact with bot using rest webhook. I want to change localhost in the url to server ip or name. How can i do that. Please help me
You can use various cloud services like AWS and upload your bot to a server. Then you can create a secure connection using SSH certs. There are other ways as well like heroku or pythonanywhere which lets you create a server. For testing purposes you can use ngrok to establish a secured connection.
Hey there, I have bee also struggling with this,but finally cracked it.Please read the below article if any one need help.
How do i use the user_id in actions.py file ???
and chage colors inside buttons.
