Connect rasa to a web site with the recommeded plataform

Rasa Open Source
3

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:

  • embed the widget into your website (I suppose you managed to achieve that, if not - you can copy the html code provided in the repo and paste it inside the </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.

3 Likes