Cannot see Rasa Messaging channel in the webpage

Hi,

I have followed this video (8:49) and created an HTML webpage. I cannot see the rasa bot in the webpage.

Here is my HTML file:

<!DOCTYPE html>

<html>

<body>

Hii

<div id="webchat"></div>

<script

src="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script>

<script>

 WebChat.default.init({

 selector: "#webchat",

 initPayload: "/get_started",

 customData: {"language": "en"}, // arbitrary custom data. Stay minimal as this will be added to the socket

 socketUrl: "http://localhost:5055",

 socketPath: "/socket.io/",

 title: "Title",

 subtitle: "Subtitle",

 })

</script>

</body>

</html>

And here is my credentials.yml:

rasa:
  url: ${RASA_X_HOST}/api

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true

If you are using Rasa Open source:

@Sajjadmanal please change this socketUrl: “http://localhost:5005” and can you tell the rasa --version

If you are using Rasa X:

@Sajjadmanal please change this socketUrl: “http://localhost:80” as rasa x runs on port 80 or you can mention the server IP, not it will not deployed on your website till you have https and DNS.

and Rasa Webchat updated the snippet code ref: GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront and use this update code. if you are using rasa version less then 2.x please mention 1.0 else 1.1 under this code : "https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/lib/index.js")

If you have further issues while implementing do let me know please.

1 Like

@nik202 Thanks for this. I however used this to make it run:

<div id="rasa-chat-widget" data-websocket-url="http://localhost:5005/"></div>
<script
        src="https://unpkg.com/@rasahq/rasa-chat"
        type="application/javascript" title="InBot">

</script>

Add the above code snippet to the HTML file in the body.

@nik202 This also worked if we use the earlier code.

@Sajjadmanal The original one post and just above post code is different, but till your code is giving you the result that cool. can I request please share some basic steps solutions for our readers. Good Luck with your project.

1 Like