Rasa core integration with chatwidget

Rasa Open Source
1

I have successfully integrated my rasa core chatbot with chatwidget (mrbot-ai/rasa-webchat) using socketio channel.

Below are two commands that I used for:

  1. To start rasa core server with endpoints and credentials file.

python -m rasa_core.run -d models/dialogue -u models/nlu/current --endpoints endpoints.yml --credentials credentials.yml

  1. To start custom action server.

python -m rasa_core_sdk.endpoint --actions actions

  1. You need to just change port and machine’s ip in a script i.e provided on github i.e GitHub - mrbot-ai/rasa-webchat: A chat widget easy to connect to chatbot platforms such as Rasa Core

Note: Make sure that your rasa core server and custom action server is up and running before just clicking or opening html file of your website.

If you have any issues related to chatwidget integration please let me know.

2

Hey Please help in the integration in the latest Rasa 1.0

3

Hi Aditya,

Can you show me what you are upto. what widget you are using ?

4

I’m using GitHub - mrbot-ai/rasa-webchat: A chat widget easy to connect to chatbot platforms such as Rasa Core and implementing in react. So i used following code for widget.

import { Widget } from 'rasa-webchat';

function CustomWidget = () => {
  return (
    <Widget
      interval={2000}
      initPayload={"/get_started"}
      socketUrl={"http://localhost:5500"}
      socketPath={"/socket.io/"}
      customData: {{"userId": "123"}}, // arbitrary custom data. Stay minimal as this will be added to the socket
      title={"Title"}
      inputTextFieldHint={"Type a message..."}
      connectingText={"Waiting for server..."}
      hideWhenNotConnected
      embedded={true}
      openLauncherImage="myCustomOpenImage.png"
      closeLauncherImage="myCustomCloseImage.png"
      params={{
        images: {
          dims: {
            width: 300,
            height: 200
          }
        },
        storage: "local"
      }}
    />
  )
}

And from this(Your Own Website) reference added websocket channel.

5

And thanks alot for such a prompt reply

6

Yeah Aditya. let me look into that what you have did.

7

Hi Aditya,

Your chatwidget script should as per below format :

<div id="webchat"/>
<script src="https://storage.googleapis.com/mrbot-cdn/webchat-0.5.8.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: "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>

Just confirm this all changes you have in your script. let me know it solves or not.

Note :

And one more thing in socketUrl attribute you have to replace it with your rasa core server port number i.e for e.g http://localhost:5005 .

By default it uses port 5005.

8

Thanks alot. I did not changed the socket url. Thanks

9

Yup :blush:. your are very welcome.

10

Hey did you try changing the UI of the webchat any way to do that

11

yeah Aditya. Yes.

We can use inbuilt rest api. We just need to make ajax request for that rest api with user message and bot will give us reponse. Afte that it depends on us that, how complex or attractive ui we can make and how we render bot responses.

12

Like adding more custom components and extending the code did your tried it

13

Hi @cyanamous,

You mean adding custom actions?

14

Hi, i created the Bot. Now, i want to integrate with chatwidget using socketio channel. The above discussion i am not understand clearly. Can you guide me step-wise please.

16

Use a above repo. Make sure you have node and npm installed. and then create a new react app using the below command

npx create-react-app react-ui

Now cd into the react-ui and run

npm install

Navigate into the App.js file in src

import React from 'react';
import './App.css';
import { Widget } from 'rasa-webchat';

function App() {
  return (
    <div className="App" >
      <p>React UI</p>
      <Widget
      interval={2000}
      initPayload={"/get_started"}
      socketUrl={"http://localhost:5005"}
      socketPath={"/socket.io/"}
      customData= {{"userId": "123"}} // arbitrary custom data. Stay minimal as this will be added to the socket
      title={"Rasa UI"}
      inputTextFieldHint={"Type a message..."}
      connectingText={"Waiting for server..."}
      hideWhenNotConnected
      embedded={false}
      openLauncherImage="myCustomOpenImage.png"
      closeLauncherImage="myCustomCloseImage.png"
      params={{
        images: {
          dims: {
            width: 300,
            height: 200
          }
        },
        storage: "local"
      }}
    />
    </div>
  );
}

export default App;

Ans then add Web socket channel as mentioned here

Then run npm start in react-ui folder and rasa run in rasa folder. Optionally can run rasa run actions too.

17

Hi @ravikrcs,

Is your issue solved ??

18

Hi @cyanamous, I followed the step but I got this error after I run rasa run command:

engineio.server - http://localhost:3000 is not an accepted origin.

Can you help me? Thanks!

19

Hi Yunbin,

Can just change the port 3000 to 5000 and try it.

20

Hi @prashant_kamble I use npm start -- --port 5000 but that didn’t work.

And may I know specifically how did you make use of this? GitHub - mrbot-ai/rasa-webchat: A chat widget easy to connect to chatbot platforms such as Rasa Core Because I am a beginner and just trained my first bot by following the tutorial. Now I want to find a way to ensure that I can integrate with UI before I proceed to further train the bot and develop other elements of my website. Thank you.

21

yup :blush: