Web-chat integration doesn't work

Rasa Open Source
1

hi there , so i want to deploy my chatbot with the web-chat template, but it shows the following error , rasa version : 2.7.1 , python: 3.7.6 python-socketio Version: 4.4.0 python-engineio Version: 4.2.0 i activated rasa server with the command : rasa run -m models --enable-api --cors “*”

image
image751×379 15.6 KB
thank you

2

@rahma What process you using to deploy and where you deploying?

3

i’m using flask , so it’s on 127.0.0.1.5000 for now

4

@rahma means your website is based on flask?

5

@nik202 thank u , no i mean i’m deplying it with flask , followed this tuto https://www.youtube.com/watch?v=eJMT2FovZsM&t=244s

6

@rahma as I can see the video he is just creating the index.html file and running on localhost whilst going following the path folder, its nothing related to flask.

@rahma On the other hand, if you have created this index.html as shown in the video and you using flask app whilst using index.html then its a different process.

Please clear me. Thanks.

7

@nik202 , yes , this is my flask app

image
image881×513 29.8 KB

8

@rahma try see this video https://youtu.be/YmM3yyafX_U it will help you just see the important part only not the coding part. Stick on flask on only GET and POST.

If still then, I will send you some file. But currenlty having meetings, may be later. Thanks.

9

@nik202 , okey i will try it thank u

10

Hi @rahma sorry for late reply, please see this Github Repo GitHub - rsykoss/rasa-chatbot-webchat-deployment: Tutorial on creating and deploying chatbot locally using open source RASA. Uses chat widget with flask and ngrok. this will answer all your queries

Note: Remember to change the rasa webchat snippet code (latest) from here GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront and use 1.0.1 for Rasa 2.X

If at any point you stuck tag me. I believe you, you will able to deploy.

It will be a solution for you! Good Luck!

1 Like
11

thank u @nik202 it worked :slight_smile:

12

@rahma I am sorry for the late reply for button change color

It should be mention as css link:

.rw-conversation-container .rw-header{
    background-color: #F5360D;
}

.rw-conversation-container .rw-client{
       background-color: #F5360D !important; 
}
.conversation-container close-button {
    background-color: #F5360D;
}

.rw-launcher{
    background-color: #F5360D;
}

Everything based on this file structure of container in React JS whilst creating Botfront desgin:

.rw-conversation-container
  |-- .rw-header
        |-- .rw-title
        |-- .rw-close-function
        |-- .rw-loading
  |-- .rw-messages-container
        |-- .rw-message
              |-- .rw-client
              |-- .rw-response
        |-- .rw-replies
              |-- .rw-reply
              |-- .rw-response
        |-- .rw-snippet
              |-- .rw-snippet-title
              |-- .rw-snippet-details
              |-- .rw-link
        |-- .rw-imageFrame
        |-- .rw-videoFrame
  |-- .rw-sender
        |-- .rw-new-message
        |-- .rw-send

Ref link: GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront go at the end and read the documents :slight_smile:

13

thank u it worked perfectly :grinning:

1 Like