[Updated] Initial welcome message using rasa webchat

Hi All,

Below are the steps to follow for getting welcome message from bot that uses rasa-webchat

Step 1

Create simple html file as mentioned below

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
  <div id="webchat" />
  <script src="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script>
  // Or you can replace latest with a specific version
  <script>
    WebChat.default.init({
      selector: "#webchat",
      initPayload: "/get_started",
      customData: { "language": "en" }, 
      socketUrl: "http://localhost:5005", //You rasa core url with cors access enabled.
      socketPath: "/socket.io/",
      title: "Title",
      subtitle: "Subtitle",
      params: { "storage": "session" }
    })
  </script>
</body>

</html>

and make sure that you put the correct socket url which is nothing but your rasa core server url. and also use this commmand rasa run --cors "*" for starting your rasa server so you won’t get cors error.

Step 2 :

In rasa project go to credentials.yml file and put the following code snippet. i.e

Step 3 :

Inside your rasa project go to domain.yml file and create one intent named as get_started and also the corresponding utter for welcome message i.e utter_welcome_message

Step 4 :

Go to your nlu.md file and put the intent i.e get_started and some sample training data.

## intent:get_started
- start
- please start

Step 5 :

Go to your story.md file put the following story .

## welcome message
* get_started
  - utter_welcome_message

Note : If you create your own intent with different name let’s support start then you need to put that intent name in your webchat i.e

tempsnip

Step 6 : If you want your bot to have have new conversation state every time, means on every page refresh. Use below code where I have used function i.e sessionStorage.clear();

<body>
<div id="webchat" />
  <script src="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script>
  // Or you can replace latest with a specific version
  <script>
    sessionStorage.clear();
    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:5005",
      socketPath: "/socket.io/",
      title: "Title",
      subtitle: "Subtitle",
      params: { "storage": "session" } // can be set to "local"  or "session". details in storage 
      section.
   })
  </script>
</body>

Hope It helps :slight_smile:

3 Likes

Awesome.

Thanks @narasingh

Prashant Ji… i have one more doubt. how can i clear web_chat history?. when i open it ,i want to clear all previous chatting.

Just looking into that. I will just post that also pal once it’s done :slight_smile:

1 Like

Hello @narasingh, Just check this updated initial welcome message post

1 Like

Thank you so much Prashanth.

1 Like

You are welcome @narasingh :slight_smile:

Prasanth, can you tell me that how can i use different port numbers for rasa chatbots. i unable to run two bots at same time. i tried

rasa x -port 5006 rasa run actions --port 5059

i changed same in credintial.yml and endpoint.yml but still they ruuning under 5002 default

Hello @narasingh,

You can use rasa run -m models --enable-api --cors "*" -p 5059

ok. its running. but when i run rasa x, again it running on ‘http://localhost:5002/conversations’.

if i change it to ‘http://localhost:5006/conversations’.its not working. still any chages are required?

hi Prasanth,
is it possible to change height and width of web-chat template?

Yes @narasingh

can you tell me please

Hi @narasingh,

Actually I am not aware of how to do end-to-end customization for rasa chatwidget. you can use this chatwidget and do the customizations using javascript,jquery etc.

ok.prasanth thank you.but Click on send icon is not working on that widget

@prashant_kamble Hi Prashant, I don’t know if you are active but I needed your help. I have followed all your steps but my index.html page is opening blank. How can I fix?