Rasa Webchat Integration

@MichalSoby Ok great…

Hi @nik202 can you guide me on how to actually create a custom socket channel, NOT a custom Rest channel. My requirement is that I have an html page like this -

Now, from here I need to pass userID from this frontend to Rasa and then see the userID in my webchat based on some greet custom action. As per the docs and forum discussions, I read that you need to have a custom channel. But, I need data to be passed to a socket channel and not a rest connection. Need guidance. Thanks!

So, instead of RestInput class, please provide guidance regarding SocketInput and SocketOutput class as per this documentation.

Hi @webdev-rohit , for socketio you can check socketio.py file in channels folder in Rasa package, and regarding the guidance you will have to do some searching on understanding how socket interactions work that way you can customize socket channel. I hope this answer helps you because we will also have to do the same thing to explain you🙂

Hi @Horizon733 , I’ve implemented that successfully using custom Socket channel. Now, I want to pass some data from custom action to my front-end via the socket channel. As per multiple rasa forum posts, I was able to make out that it can be done if I pass it as a json message from my custom action. Now, my problem is how to retrieve it at the front-end. I want to test it in a local html page. I’m attaching it here -

So, how will I be able to extract or see that json message here in this frontend

Hi Community, Is there a way to increase the chat window height ? I’m new to rasa webchat and tried it thru css, not able to do. Can anyone please help me. Will be really helpful!

Hi,
I am a newbie, but ran into the same issue not long ago.
You can change the overall size of the webchat window by adjusting the .rw-message-container. Just try the following:

<style>
      .rw-conversation-container .rw-messages-container{min-height: 500px;}
</style>

You can find all the css-classes here https://github.com/Horizon733/rasa-webchat#styles
I hope that helps you!
Ciao, Vio

1 Like

@webdev-rohit you can extract these customData in socket and then pass in metadata to extract in custom actions via events

@vio_lovis Hey, that worked! Thanks, for the quick response! :slight_smile:

Great! I am happy to help :blush:

@Horizon733 I have done that already, this works also. But, this is basically for sending any data FROM frontend TO rasa server which can then be used in any custom action to be performed. What I’m asking is that I want to send some data FROM my custom action TO my frontend webchat script code.So, this can be done using json_message parameter in dispatcher.utter_message() function in my actions.py file. But, how do I retrieve this at my frontend. This is my doubt

Hey, one more thing, is there a way to increase width as well? I tried to add min-width, but it actually increased the width of inside the window and not the overall width.

Hi,
maybe @Horizon733 can help you with that?
I would have tried changing the .rw-conversation-container width to increase the overall width, if changing the .rw-messages-container is not working as you expected - but I am not sure, whether that works :woman_shrugging:
Sorry!

@shethsankalp

I do not remember which one I used but you can try please and share the feedback.

.rw-conversation-container {
   
    right: 12px;
    height: 600px;
    width: 400px;
    
}

OR

.rw-conversation-container .rw-widget-container{
    position: fixed;
    bottom: 13%;
    right: 42px;
    height: 720px;
    width: 420px;
    background: blue;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.16), 0 0px 10px 0 #00000096;
    
}

hope this will help you.

Hi @shethsankalp Very easy solution to this is, open your chat widget HTML on browser, go in inspect element, then find the section/div by using select element and then change value so it reflects on browser, then do same in code. :wink:Easy for every case

@nik202 @Horizon733 Thanks a lot for all the help! As @vio_lovis suggested, I targeted the following CSS class and it worked flawlessly! :slight_smile:

.rw-conversation-container {
  min-width: 400px;
}

Again, thanks for the quick responses!

2 Likes

Hi @webdev-rohit ,

I need some help in understanding if you have hosted the rasa server and action server in azure cloud? If yes could you please help me understand how have you done the same. like using which service?

I see you using the IP address in the Socket URL.

Please get back if you have any inputs on the same

Thanks, Gourav Mishra

Hey @gourav1212 , I’ve deployed Rasa X using Helm chart method (for Kubernetes) in google cloud platform. The socket URL that you can see in my attachment is the external IP address which is exposed via nginx service. You can follow the Youtube tutorials by Juste (specifically episode 12- for deploying rasa x in kubernetes)

1 Like

Hi Community, I was facing some issues in using the embedded property in rasa webchat. When embedded property is set as true, I want the chatbot to completely cover the window. But, instead only the width is being covered and height keeps on increasing and conversation starts. Is there a way to make the chatbot completely cover the browser window? Attaching photo for reference.

Hi guys, can anyone help with a question regarding the webchat implementation please? I’m trying to set up the user input to be shown as a password, so when the user is asked to fill in the log in form, when it comes to the password, the input box and the slot after the user hits send, to be show as **** , please let me know if you have any ideas. I would be extremely grateful, : D Thank you!

were to add quick replies in our index.html file to set button