How to use Rasa server (deployed on heroku) in personal react website

Rasa Open Source
1

Hi, I have deployed my rasa chatbot online by creating a docker image and deployed it on Heroku. Now my bot is live and working. I checked through POSTMAN. Now, I would like to communicate with this bot, through my website. Earlier I was deploying the rasa bot locally so I was using socket URL now its on Heroku. Can you guys help me with how do I create that widget on my website with Heroku URL?

image
image1386×829 51.5 KB
image
image824×667 26.9 KB

2

@Tushar4781 Hi. On which website your want to deploy?

Try: Change socketUrl: "http:// xxxxxxx.herokuapp.com:5005" it should work. The above snippet code I guess you pasted in header and footer body section (if you using Wordpress).

Note: you just need to copy and paste <script> ......</script> in body of website.

For latest version of Rasa 2.X you need to change one more thing i.e

(e.src =
    "https://cdn.jsdelivr.net/npm/rasa-webchat@1.0.1/lib/index.js"),

Just try, I have only one doubt, if it’s not work. I will suggest.

I hope it will solved your issue. Good Luck!

3

hey buddy, as you mentioned, I tried Changing the socketURL but unfortunately it didn’t work. the website is build in react.js and its deployed on netlify. Later on i tried adding a callback function

image
image1920×1080 189 KB
image
image1920×1080 165 KB
![image|690x466]
image
image513×761 44.8 KB
image
image948×647 26.2 KB
Now the widget is visible but i m not getting any response.

4

Hi @Tushar4781 You not mention any details about the website and where it is deployed, the process you following is complex. Few questions:

  1. Your chatbot widget is developed in React JS or Your Website?
  2. Your bot is deployed on Heroku and running successfully?
  3. Is Rasa server and action servers running on 5005 and 5055 or what?
  4. You using docker image also.

Check the socketURL I suggested and what you written. You need to use ngrok. But your process confused me. Its only a matter of port and networking.

5

thanks for helping me out buddy. I found another way to interact with the bot.

6

@Tushar4781 Its ok. If you got time share your solution for other. good luck!

7

its just i m making api calls like i did with postman and i m extracting the response and appending it in my textbox

8

@Tushar4781 Please close this issue with the solution for others. Thanks.