In the previous lesson, I practiced getting acquainted with Rasa 3 and taught the basic greeting chatbot . However, the chatbot that uses the command line interface looks a bit boring, so I will embed Chatbot rasa into the website interface.
Because the purpose of this article is just to have a nice chat interface to replace the command line, I will do it in the simplest and fastest way possible, without going into the configs, if you want to understand more deeply you can see more. on Rasa’s documentation page .
Build Websocket Rasa
Step 1 : In the file credentials.yml add the following code:
1 2 3 4 5 | socketio: user_message_evt: user_uttered bot_message_evt: bot_uttered session_persistence: true |
Rasa supports Authentication for chat content transmission, but in this article I don’t want to go into depth, you can see more on Rasa’s main page to link under “References”.
Step 2 : Run Rasa server using the following command:
1 2 | rasa run --cors "*" |
By default, Rasa will start the server on http://0.0.0.0:5005
Embed Rasa
Insert the following code into your website:
1 2 3 | <div id="rasa-chat-widget" data-websocket-url="http://localhost:5005"></div> <script src="https://unpkg.com/@rasahq/rasa-chat" type="application/javascript"></script> |
The data-websocket-url property fills in the url Websocket Rasa built.
The reason I use ” http://localhost:5005 ” and not ” http://0.0.0.0:5005 ” is because when I run it on my computer I get an error “Connection refused” so I have to map the host. If you use ” http://0.0.0.0:5005 ” without error, please use it.
My host map information is as follows:
1 2 | 0.0.0.0 localhost |
If you haven’t built a website yet, that’s okay, just create an html file with the following content:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Rasa ChatBot UI</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> </head> <body> <h1>Rasa ChatBot UI</h1> <div id="rasa-chat-widget" data-websocket-url="http://localhost:5005/"></div> <script src="https://unpkg.com/@rasahq/rasa-chat" type="application/javascript"></script> </body> </html> |
Open the newly created html file with any browser and test chat the greetings I trained for the bot in the previous post and see the response.
The result will look like this:
In addition to the Rasa website, it also supports the integration of chatbots into many other channels such as: Facebook Messenger, Telegram, … we will find out later.