Rasa Webchat Integration - Getting Started with Rasa / Tutorials, Resources & Videos - Rasa Community Forum

Skip to where you left off (last reply, post 192) Skip to top

Skip to main content

​

👋 Introducing the Rasa Playground

Learn more here →

You have selected 0 posts.

select all

cancel selecting

30.2k views 43 likes 50 links 45 users

33](https://forum.rasa.com/u/JiteshGaikwad "JiteshGaikwad")

15](https://forum.rasa.com/u/muthukumars "muthukumars")

15](https://forum.rasa.com/u/lluchini "lluchini")

14](https://forum.rasa.com/u/Horizon733 "Horizon733")

11](https://forum.rasa.com/u/nik202 "nik202")

read 22 min

Top replies

Oct 2019

186 / 186

Aug 2023

Aug 2023

Load more posts above

post by muthukumars on Mar 31, 2020

muthukumarsMuthukumar Srinivasan

Mar 2020

Jitesh

I have built a separate virtual image under Vmware fusion. built a ubuntu and gone through this fully. too many things I have to fix. finally for this.but still our issue still perists. logged a bug with Rasa, see

post by lluchini on Apr 8, 2020

lluchiniLeonardo Luchini Enthusiast

1

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Apr 2020

Heloooooo again @JiteshGaikwad!

I’m trying to use your modifications, I was able to run them, even debug the socketChannel.py you made. The customData arrive there with no problem but isn’t sent to the ‘action_session_start’ event on the action server (as metadata).

File: socketChannel.py - Line: await on_new_message(message)

I’m pretty new to RASA and Python (1 week working which each), I’m trying to find why the customData isn’t sent to ‘action_session_start’ (as metadata), but my chances aren’t very good based on my current level of expertise at RASA and Python.

Can you help me?

I even had to change your method extract_metadata_from_tracker because of the events dictionary is empty and added some logs and the return is always empty:

tracker.current_state() {‘sender_id’: ‘79630f5a353f499fbec162302a30fb12’, ‘slots’: {}, ‘latest_message’: {‘intent’: {}, ‘entities’: [
], ‘text’: None, ‘message_id’: None, ‘metadata’: {}}, ‘latest_event_time’: None, ‘paused’: False, ‘events’: , 'latest_input_channel ': None, ‘active_form’: {}, ‘latest_action_name’: None}

tracker.current_state()[“events”]

2020-04-08 10:40:21.050844 MetaData:

File: actions.py


def extract_metadata_from_tracker(tracker: Tracker):
    events = tracker.current_state()['events']
    print('tracker.current_state()', tracker.current_state())
    print('tracker.current_state()["events"]', tracker.current_state()['events'])
    user_events = []
    for e in events:
        print(e)
        if e['event'] == 'user':
            user_events.append(e)

if len(user_events) > 0:
        return user_events[-1]['metadata']
    return ''

class ActionSessionStart(Action):
    def name(self) -> Text:
        return 'action_session_start'

async def run(self,
            dispatcher: CollectingDispatcher,
            tracker: Tracker,
            domain: Dict[Text, Any]) -> List[Dict]:

metadata = extract_metadata_from_tracker(tracker)
        print(datetime.now(), 'MetaData: ', metadata)

UPDATE:

I found that the new session always send a blank tracker, so now I’m looking for other ways to pass the customData to ‘action_session_start’

post by Govindarajan on Apr 9, 2020

GovindarajanGovindarajan Ponnusamy

Apr 2020

I have clarification how to run the rasa server on rasa.ai.com (provided static IP and domain name) instead of localhost:5005, my environment is windows and offline environment (there is no access to internet)

post by lluchini on Apr 9, 2020

lluchiniLeonardo Luchini Enthusiast

lluchini](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Apr 2020

>Previously linked reply<

@JiteshGaikwad

I was able to pass the custom data to the action server, I had to modify your socketChannel.py (I’ll try to update the Github) and the processor.py from RASA.

My doubt here is how to make the changes o processor permanent? Just commit and push to RASA repo?

post by JiteshGaikwad on Apr 9, 2020

JiteshGaikwad Rasa Certified Developer

Apr 2020

hey @lluchini, sorry I was busy with something else so didn’t got time to reply you

Glad that you were able to solve it

you can make a pull request, is that what you are trying to say?

post by lluchini on Apr 9, 2020

lluchiniLeonardo Luchini Enthusiast

Apr 2020

@JiteshGaikwad

No prob bro, no need to apologize for, everyone does what they can! I hope someday to be good at RASA/Python to help as much you do.

Yes, I never used Github (I use git), I just need to create a pull request for yours/RASA repo with the change? like on Bitbucket from Atlassian?

And I would like to know if you can just check what I did, and be sure it won’t break anything else on RASA, can you?

post by JiteshGaikwad on Apr 9, 2020

JiteshGaikwad Rasa Certified Developer

Apr 2020

Thanks and Ya sure definitely you will

I too recently started learning about the PR, no problem you can raise the issue in the GitHub repo and tell me the changes there, I will integrate those changes, does that works for you?

post by lluchini on Apr 9, 2020

lluchiniLeonardo Luchini Enthusiast

Apr 2020

I don’t know if is this what you meant, but I forked RASA on my Github and pushed a branch with the adjusts, the link is below.

Github - lluchini: metada-on-session-start-action

post by JiteshGaikwad on Apr 9, 2020

JiteshGaikwad Rasa Certified Developer

Apr 2020

Hey @lluchini, sorry but that’s too complicated for me😅

post by lluchini on Apr 9, 2020

lluchiniLeonardo Luchini Enthusiast

Apr 2020

Your socketChannel that’s too complicated for me…

No problem, I’ll submit the pull request, let’s see what happen…

post by lluchini on Apr 9, 2020

lluchiniLeonardo Luchini Enthusiast

Apr 2020

Just everybody knows, it already had an issue opened for my problem Issues #5574.

I linked the open issue with my pull request…

8 days later

post by Kejender on Apr 18, 2020

Kejender

Apr 2020

Hi,

I’m replying here because my issue seems similar.

I have worked before with the early rasa_nlu and I have one computer (Ubuntu 18.04) with working Rasa 1.3.1 installation. Now I wanted to install new Rasa to my new server, create a new bot and connect it to Webchat. This works fine in that old computer, Webchat also.

I have the latest Rasa version in Ubuntu 18.04 (Python 3.6) server. First I tried to install it to venv but it kept failing. Maybe I got it wrong somehow. But it is now installed in the server. ‘Rasa init’ worked fine.

When I run ‘rasa run –enable-api’ –cors “*” –debug’, Rasa server starts’. The same error “Failed to load model” as was discussed earlier. However the model gets extracted later.

In my web server Webchat tries to GET http://localhost:5005/socket.io/… but there is ERR_CONNECTION_REFUSED.

If I curl localhost:5005, I get “Hello from RASA”.

Credentials.yml (socketio) should be configured fine, as I have this working in the other computer.

Any suggestions what to try next?

post by lluchini on Apr 20, 2020

lluchiniLeonardo Luchini Enthusiast

Apr 2020

Hello @Kejender,

can you start rasa with debug option post the logs from rasa here so we can check with more details what’s happening?

post by Kejender on Apr 21, 2020

Kejender

Apr 2020

Ok here it is:


2020-04-21 07:45:03,802 [DEBUG]  Available web server routes:
/conversations/<conversation_id>/messages          POST                           add_message
/conversations/<conversation_id>/tracker/events    POST                           append_events
/webhooks/rasa                                     GET                            custom_webhook_RasaChatInput.health
/webhooks/rasa/webhook                             POST                           custom_webhook_RasaChatInput.receive
/webhooks/rest                                     GET                            custom_webhook_RestInput.health
/webhooks/rest/webhook                             POST                           custom_webhook_RestInput.receive
/model/test/intents                                POST                           evaluate_intents
/model/test/stories                                POST                           evaluate_stories
/conversations/<conversation_id>/execute           POST                           execute_action
/domain                                            GET                            get_domain
/socket.io                                         POST                           handle_request
/                                                  GET                            hello
/model                                             PUT                            load_model
/model/parse                                       POST                           parse
/conversations/<conversation_id>/predict           POST                           predict
/conversations/<conversation_id>/tracker/events    PUT                            replace_events
/conversations/<conversation_id>/story             GET                            retrieve_story
/conversations/<conversation_id>/tracker           GET                            retrieve_tracker
/webhooks/socketio                                 GET                            socketio_webhook.health
/status                                            GET                            status
/model/predict                                     POST                           tracker_predict
/model/train                                       POST                           train
/conversations/<conversation_id>/trigger_intent    POST                           trigger_intent
/model                                             DELETE                         unload_model
/version                                           GET                            version
2020-04-21 07:45:03,804 [INFO ]  Starting Rasa server on http://localhost:5005
2020-04-21 07:45:03,804 [DEBUG]  Using the default number of Sanic workers (1).
2020-04-21 07:45:03,806 [INFO ]  Enabling coroutine debugging. Loop id 94055192.
2020-04-21 07:45:04,154 [DEBUG]  Extracted model to '/tmp/tmparlo_dm9'.
2020-04-21 07:45:04,486 [DEBUG]  Loading the model ...
2020-04-21 07:45:05,578 [DEBUG]  Finished loading the model.
2020-04-21 07:45:05,579 [DEBUG]  Building tensorflow prediction graph...
2020-04-21 07:45:10,674 [DEBUG]  Finished building tensorflow prediction graph.
2020-04-21 07:45:10,680 [DEBUG]  Failed to load model for 'ResponseSelector'. Maybe you did not provide enough training data and no model was trained or the path '/tmp/tmparlo_dm9/nlu' doesn't exist?
2020-04-21 07:45:10,691 [DEBUG]  Connected to InMemoryTrackerStore.
2020-04-21 07:45:10,691 [DEBUG]  Connected to lock store 'InMemoryLockStore'.
2020-04-21 07:45:11,070 [DEBUG]  Extracted model to '/tmp/tmp8_f862mu'.
2020-04-21 07:45:11,074 [DEBUG]  Using yaml library: /usr/local/lib/python3.6/dist-packages/ruamel/yaml/__init__.py
2020-04-21 07:45:11,098 [DEBUG]  Loading the model ...
2020-04-21 07:45:11,364 [DEBUG]  Finished loading the model.
2020-04-21 07:45:11,367 [DEBUG]  Building tensorflow prediction graph...
2020-04-21 07:45:12,278 [DEBUG]  Finished building tensorflow prediction graph.
2020-04-21 07:45:12,283 [DEBUG]  Instantiated NLG to 'TemplatedNaturalLanguageGenerator'.

post by Kejender on Apr 22, 2020

Kejender

Apr 2020

I think I know what the problem is. I’m serving the Webchat app with Apache. It is probably not allowing access to Rasa server. I’m trying to find out how to configure it.

Any alternative server suggestions are welcome! Also if you find anything wrong with the Rasa server logs, please reply…

post by Kejender on Apr 22, 2020

Kejender

Apr 2020

I guess Apache is not the problem: I tested the app with my laptop’s Apache and it worked. There should not be any special configurations there.

post by lluchini on Apr 22, 2020

lluchiniLeonardo Luchini Enthusiast

Apr 2020

Hello @Kejender,

The only line with fail on load is the one below, so I’ll plot the answer on it.

It says that is the model for the component ResponseSelector so I dug a little and found this link on documentation.

Link: faqs-response-selector

Reading the documentation I started to wonder that you configured your config.yml to use the ResponseSelector component but didn’t feed the responses.md file.

Can you check the items above and if it’s not any of them reply with all your configs files?

Cya!

post by Kejender on Apr 23, 2020

Kejender

Apr 2020

Hi, thanks. I removed the ResponseSelector and that error is not coming any longer. This is the initial “moodbot”, created with rasa init. The problem still persists. I still suspect it is related to Apache. I have been checking the .conf files in both servers but they seem similar.

post by lluchini on Apr 23, 2020

lluchiniLeonardo Luchini Enthusiast

Apr 2020

@Kejender,

1o. You’re welcome!

2o. Don’t you have a registry of the attempts anywhere? (rasa, apache, OS logs, firewall, proxy and etc.)

Any additional information can help us to help you…

post by Kejender on Apr 23, 2020

Kejender

Apr 2020

I may have a solution coming up, let’s see tomorrow…

post by lluchini on Apr 23, 2020

lluchiniLeonardo Luchini Enthusiast

Apr 2020

@Kejender

Great!!!

Please share with us if it works!

post by Kejender on May 1, 2020

Kejender

May 2020

Hi! Now it is working. I’m afraid I had some misconceptions about networking. I’m still not sure if I fixed it right, feel free to comment…my bot is in my internal network so it should be safe.

First I had to open the port 5005 in my server. Then in WebChat’s configuration, replaced “localhost” with server’s public ip.

post by lluchini on May 3, 2020

lluchiniLeonardo Luchini Enthusiast

May 2020

Hello @Kejender,

glad it worked out!

Please mark your reply as solution.

Cya!

1 month later

post by tusharm78 on Jun 7, 2020

tusharm78

Jun 2020

Hey buddy…thanks for such an informative tutorial…could you please help me in putting the persistent menu in the header for the webchat widget that is there in botfront or other tutorials…i’ve added the webchat code in my dummy website and there it is a REACT code, so how to bring the persistent menu in header with the options of Clear, Restart, and Close. help wud be much appreciated. thnx

post by lkrishnaprasad on Jun 9, 2020

lkrishnaprasad

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jun 2020

@JiteshGaikwad i followed this instructions but i got blank values

11 days later

post by JiteshGaikwad on Jun 20, 2020

JiteshGaikwad Rasa Certified Developer

Jun 2020

@lkrishnaprasad can you show error logs or screenshot?

post by lkrishnaprasad on Jun 21, 2020

lkrishnaprasad

Jun 2020

This problem is resolved. Thanks. i had missed some steps you had given. Now its okay.

18 days later

post by shanrock on Jul 9, 2020

shanrockShanmukh Gudivada

Aashay1](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jul 2020

Hey @Aashay1. I’m stuck in the same situation. I need to send the userid from my website session data to chatbot and set in my custom action and pass on to the api. How do i do that?

post by shanrock on Jul 9, 2020

shanrockShanmukh Gudivada

lkrishnaprasad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jul 2020

Were you able to retrieve data from your website to bot using customData and print it?

post by shanrock on Jul 9, 2020

shanrockShanmukh Gudivada

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jul 2020

@JiteshGaikwad I need help in sending the data in my website session i.e., userId to my api via custom actions using customData.

post by Aashay1 on Jul 9, 2020

Aashay1Aashay

shanrock](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jul 2020

// Or you can replace latest with a specific version

WebChat.default.init({ selector: "#webchat", initPayload : '/get_started{"userID":"163","user_name":"Aashay"}' , customData:{"userID":"163","user_name":"Aashay"}, // arbitrary custom data. Stay minimal as this will be added to the socket socketUrl: "http://localhost:5005", socketPath: "/socket.io/", title: "Beehive Bot", subtitle: "I'am still under development", params :{ storage : "session" } })

post by shanrock on Jul 9, 2020

shanrockShanmukh Gudivada

2

Jul 2020

Hey do you have a email or something? This work needs more contact than just comments.

post by shanrock on Jul 9, 2020

shanrockShanmukh Gudivada

Aashay1](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jul 2020

Why you defined UserID twice? Once in payload and once in customData? And also like is there a way where i can pass session data in my website to customdata

post by lkrishnaprasad on Jul 9, 2020

lkrishnaprasad

shanrock](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jul 2020

Yes

post by shanrock on Jul 9, 2020

shanrockShanmukh Gudivada

Jul 2020

Can you please be more elaborate?

post by shanrock on Jul 14, 2020

shanrockShanmukh Gudivada

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jul 2020

Hey. Im unable to pull emp_no from my PHP application to rasa using customData.

20 days later

post by faiza_conte on Aug 3, 2020

faiza_contefaiza abdella

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Aug 2020

how to use ‘action_restart’ …after i refrash the web the past conversation of the chat still exists…why is that?

23 days later

post by nik202 on Aug 26, 2020

nik202 Enthusiast

Aug 2020

Hello @JiteshGaikwad can we use your custom widget GitHub - JiteshGaikwad/Chatbot-Widget: ChatBot widget easy to connect to RASA bot through REST channel rather then webchat? which shows in the video. If so how we can make <script> tag similar like this as you copied from the rasa-webchat GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront :


<div id="webchat"></div>
<script src="https://cdn.jsdelivr.net/npm/rasa-webchat/lib/index.min.js"></script>
<script>
  WebChat.default.init({
    selector: "#webchat",
    initPayload: "/welcome",
    customData: {"language": "en"}, // arbitrary custom data. Stay minimal as this will be added to the socket
    socketUrl: "http://localhost:5005",
    socketPath: "/socket.io/",
    title: "xyz",
    subtitle: "bot",
    params: {"storage": "session"} // can be set to "local"  or "session". details in storage section.
  })
</script>

post by JiteshGaikwad on Aug 26, 2020

JiteshGaikwad Rasa Certified Developer

Aug 2020

No

post by Priyu on Aug 27, 2020

PriyuPriyanka Chaudhari

Aashay1](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Aug 2020

Can you please share your github link for better understanding?

post by nik202 on Aug 27, 2020

nik202 Enthusiast

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Aug 2020

@JiteshGaikwad Any suggestion how to deal this? Your idea and suggestion always help. Many thanks in advance.

post by Priyu on Aug 27, 2020

PriyuPriyanka Chaudhari

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Aug 2020

It works. Thank You!!

post by InnoOmnia on Sep 2, 2020

InnoOmnia

Sep 2020

Video is not available any more

1 month later

post by red on Oct 9, 2020

redab

Oct 2020

Can you give access to the video about Rasa webchat integration

2 months later

post by kurtsenol on Nov 23, 2020

kurtsenolsenol

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Nov 2020

I follow all the steps but metadata returns None!

17 days later

post by kiranbeethoju on Dec 11, 2020

kiranbeethojuRasa Certified Developer

andrew.tangowork](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Dec 2020

You can display a carousel with buttons using facebook generic carousel code actions.py when you are using Mr.Robots chatbot widget js for front-end.

10 days later

post by Zaamine on Dec 21, 2020

ZaamineAmine Zaamoun

Dec 2020

Hello @JiteshGaikwad, do you know how to trigger a particular event when a user pushes a button ?

I will give you a concrete exemple of what I’m trying to achieve : The chatbot utters two buttons (using the payload syntax from rasa) “Log In” and “Register”

When the user pushes one of the two buttons, the “create an account form” or the “log in form” will be opened in the window using javascript.

I know that this can be achieved using a link in the buttons but the issue is that my “log in form” is opened directly in the web browser of the user using javascript dynamically so I cannot use link for that.

The user also logs in to his account using an ajax call so he can directly be informed if his password or username is wrong without even reloading the page)

I don’t know if it’s clear enough but any help would be really appreciated, many thanks

post by forwitai on Dec 28, 2020

forwitaiEnthusiast

Dec 2020

Can someone please tell me where can I find the conversations users have with my bot through webchat ? I can’t find them on Rasa X.

Thanks a lot.

3 months later

post by Horizon733 on Mar 15, 2021

Horizon733Dishant GandhiRasa Superhero

Mar 2021

I created a quick tutorial on webchat integration with Rasa chatbot if you have any questions you can comment there or reply here,

Here’s the link:

Rasa chatbot website integration | Quick tutorial

post by Horizon733 on Mar 15, 2021

Horizon733Dishant GandhiRasa Superhero

forwitai](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Mar 2021

Is it working, which version you are using currently?

18 days later

post by ketang on Apr 2, 2021

ketangKetan

Apr 2021

@JiteshGaikwad I want to implement auto suggestion feature when user types in query in webchat. Can you help me giving idea how can I implement that on UI?

17 days later

post by Harshika on Apr 19, 2021

HarshikaPareek

Horizon733](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Apr 2021

@Horizon733 Helo, this is very helpful to me. I am able to work with this. However I stuck at one place where I am unable to open the Chatbot UI (with the error "Connected and disconnected SocketIO), I haven’t changed anything so far in my index.html, config and cred files.

Cred.yml

index.html

\ image921×767 35 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/e/e265947857a6e3490cf94c703ce9dffdb3db8abd.png "image")

can you help me where exactly could be a problem ?

post by Horizon733 on Apr 19, 2021

Horizon733Dishant GandhiRasa Superhero

Apr 2021

Hi, since when you are trying this. Because since yesterday botfront latest version is not working. I just changed the url in e.src="…/rasa-webchat@1.0.0/…" Make sure to replace … With the respective sections in url

post by Harshika on Apr 19, 2021

HarshikaPareek

Apr 2021

wow, that’s grand. Worked for me. Thank you very much for your quick response and help.

post by Harshika on Apr 19, 2021

HarshikaPareek

Horizon733](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Apr 2021

@Horizon733 I need to know one more thing, is there any way we can delete the old rasa chats from UI

Scenario: Whenever I will train the model and open the Rasa web chat UI its displays the older chats for me. Is there any way we can clear the chat history ?

post by Horizon733 on Apr 19, 2021

Horizon733Dishant GandhiRasa Superhero

Apr 2021

in your script tag write window.localstorage.clear() I think this might work. But you have to add a condition for this

post by Harshika on Apr 19, 2021

HarshikaPareek

Apr 2021

@Horizon733 Thank you very much for your quick replies. Yeah, I think alone window.localstorage.clear() command not working for me. Can you elaborate more on the “condition” which I need to add ? Would be a great help

post by Horizon733 on Apr 19, 2021

Horizon733Dishant GandhiRasa Superhero

Apr 2021

if you add that directly then when ever page reloads it will remove all messages

post by Harshika on Apr 19, 2021

HarshikaPareek

Apr 2021

@Horizon733 I have tagged this like follows:

\ image948×486 16.1 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/8/88e995703f7917048b7b0af33bfe4d5b07a69325.png "image")

is that correct ?

post by Aqib on Apr 20, 2021

Aqib

1

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Apr 2021

hi i have did all the steps and as mentioned by @lluchini but still i don’t see anything on screen and getting this error on console index.js:123 GET http://localhost:5005/socket.io/?EIO=3&transport=polling&t=NZlPuRb net::ERR_CONNECTION_REFUSED.

post by lelemh on Apr 20, 2021

lelemhMHL

Harshika](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Apr 2021

It has to be under params as below…please try params: { images: { dims: { width: 250, height: 300, } },

storage: “local”, } }, null ); }), t.insertBefore(e, t.firstChild); })(); localStorage.clear()

post by Harshika on Apr 20, 2021

HarshikaPareek

Apr 2021

@lelemh Thanks buddy, worked for me Cheers

1 month later

post by Papa on Jun 3, 2021

PapaSEYE

Jun 2021

Hi @JiteshGaikwad My customers often avoid the widget button and I would like to have the widget window automatically open when they arrive on my page. Is it possible to have the window pop up when someone goes to my website? How do I customize my widget so that the window is displayed instead of the button? I am using rasa webchat.

9 days later

post by nik202 on Jun 12, 2021

nik202 Enthusiast

Jun 2021

@Papa You add the tooltip in rasa web chat check the updated code GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront and just add tooltip. It is current trend in chatbot that we should provide chat widget button or provide tooltip to get the focus of customer/user visiting the site for help.

   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: "Moodbot",
            tooltipPayload: "/greet",
            tooltipDelay: 500,
            subtitle: "",
        })

post by Papa on Jun 12, 2021

PapaSEYE

Jun 2021

Thank @nik202 for this response

post by Papa on Jun 15, 2021

PapaSEYE

nik202](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jun 2021

HI @nik202, Is there any autocomplete/suggestion feature available in rasa?? if not so how can we implement this feature can anybody recommend me nlp implementation of autocompleted phrases???

post by nik202 on Jun 15, 2021

nik202 Enthusiast

Jun 2021

@Papa you mean automatic suggestion of words and phrases in the textbar in front end? Right? No, it’s currently under development I guess and It is much depended on Frontend.

post by Papa on Jun 15, 2021

PapaSEYE

Jun 2021

@nik202 yes i mean automatic suggestion. Thank you so much you are very kind.

post by Zeusturbo on Jun 17, 2021

Zeusturbo

Jun 2021

Hi, are there any possibilities, that I can resize an image in the chatbot? My images are in the URL in the database. and i am fetching a list of URLs and display it in the webchat. can i resize those?

Added up this. while i display the list with the buttons, “button” only for the last item in the row is stayed still. the buttons for the rest of the previous items are vanishing while the item appears one by one.

In this pic the button s not visible

but for the last item of the list, the button is visible

thanks in advance

post by bolder_pete on Jun 24, 2021

bolder_petepete

Jun 2021

@Horizon733 Hey, any Idea to solve the issue with html tags like p tags?

post by Horizon733 on Jun 25, 2021

Horizon733Dishant GandhiRasa Superhero

Zeusturbo](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jun 2021

Yeah so it’s not something you can do or I can do. I would suggest use Carousels instead of this images and buttons. Because in Webchat the messages will make button disappear if new message arrives and that is not the case with carousels

post by Zeusturbo on Jun 25, 2021

Zeusturbo

Jun 2021

yes i moved to carousels.It working fine now . but i have another issue. i need to capture the “Room number” values while someone click the “Book now” button. Cos i have to store this value to identify which room the users booked. how can i do it?

post by Horizon733 on Jun 25, 2021

Horizon733Dishant GandhiRasa Superhero

Jun 2021

This is quite simple in the payload in carousels add the number of each room. I hope you are using it for loop. if not you can create Carousels

post by Zeusturbo on Jun 25, 2021

Zeusturbo

Jun 2021

yes i added as a json dumps with the payload . Then how can I reuse it in the other form which include the rest of the user details. in my case the once the user select one room by click the book now button another form will start to collect the rest of the details like “user email id”,“phone number”. can I add the Room number with this form? i have added my carousel code snipet bellow.

\ payload1107×498 17.4 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/8/8069acba1477ad545c3e2aa94182974eb6d7bdd9.png "payload")

post by Horizon733 on Jun 25, 2021

Horizon733Dishant GandhiRasa Superhero

Jun 2021

you can create a story for that

20 days later

post by Papa on Jul 16, 2021

PapaSEYE

nik202](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jul 2021

Thank you @nik202. I will delete that.

10 days later

post by paolo_1st on Jul 26, 2021

paolo_1stPaul Keyrouz

Jul 2021

for who’s facing error connection refused, try to remove the port 5005 from the socket url (it worked for me). However, i face another problem: rasa webchat is accepting a single session, how can i allow multiple sessions?

post by Horizon733 on Jul 27, 2021

Horizon733Dishant GandhiRasa Superhero

Jul 2021

Could you please elaborate on the single session issue?

post by paolo_1st on Jul 28, 2021

paolo_1stPaul Keyrouz

Jul 2021

it’s allowing only 1 user to start a conversation (coz using single sender_id, and can’t pass random sesnder_ids to the widget script).

However, i solved it by using and customizing chatbot widget GitHub - jwheat/Chatbot-Widget: ChatBot widget easy to connect to RASA bot through REST channel

post by Papa on Aug 2, 2021

PapaSEYE

nik202](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Aug 2021

HI @nik202, do you know the password of postgres for rasa x. I have installed it using docker compose and i want to interact with my database but i don’t know the default password.

post by paolo_1st on Aug 2, 2021

paolo_1stPaul Keyrouz

Aug 2021

Papa during the deployment, Rasa will generate a random password for postgresq unless you set it under the docker-compose settings file.

post by nik202 on Aug 2, 2021

nik202 Enthusiast

Papa](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Aug 2021

@Papa Please see this Customize Your Deployment In DB variable.

post by Papa on Aug 2, 2021

PapaSEYE

Aug 2021

Thank you @nik202, Do you know how we can interact our postgres database for rasa x with docker-compose installation mode. I want to query my database and extract my conversation data in a csv file for example.

post by nik202 on Aug 2, 2021

nik202 Enthusiast

Aug 2021

@Papa Please create the separate thread for that, its not related to this post, it will confused other users.Thanks

post by wiembc on Aug 7, 2021

wiembc

ansel2000](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Aug 2021

i have the same problem , any help please .???

17 days later

post by Horizon733 on Aug 25, 2021

Horizon733Dishant GandhiRasa Superhero

Aug 2021

Hi, can you check inspect section on website there you will be able to see console. There might be some errors. Also, specify your rasa version. please add them here and tag me

4 months later

post by Zeusturbo on Dec 9, 2021

Zeusturbo

Dec 2021

@Horizon733 Hi, a Quick question. is there any possibilities that i can change the Font color of the text in the “webchat” widget.? i can change the background color of the widget but not the font color of the text in it.

post by nik202 on Dec 9, 2021

nik202 Enthusiast

Dec 2021

@Zeusturbo for rasa webchat


.rw-conversation-container .rw-response {
font-size: 14px;
color:green;
font-style: italic;
}

from where you changed the background color, just add color, or see this code for CSS for rasawebchat only.

post by Zeusturbo on Dec 9, 2021

Zeusturbo

Dec 2021

@nik202 Thanks a lot …

post by nik202 on Dec 9, 2021

nik202 Enthusiast

Dec 2021

@Zeusturbo you are welcome.

1 month later

post by MichalSoby on Jan 19, 2022

MichalSobyMichal Sobr

Jan 2022

Hi, sorry this is probably a very stupid question but before the webchat integration I just ran it in the terminal and used “\n” in my .yml files to format it a little bit. Does anyone know how (if it’s even possible) I can lay my response over multiple lines/messages like I used to have it in the terminal?

\ Screenshot 2022-01-19 at 17.13.161452×268 42 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/1/b/1bd3a6bebce64d675903506777352572bc01aaef.png "Screenshot 2022-01-19 at 17.13.16")

\ Screenshot 2022-01-19 at 17.15.41812×110 17.4 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/0/1/01aa59aaf975c727c6d23eeff705feed32cd8ac9.png "Screenshot 2022-01-19 at 17.15.41")

post by Horizon733 on Jan 19, 2022

Horizon733Dishant GandhiRasa Superhero

Jan 2022

Hi @MichalSoby you need to use <br> for webchat so it can have line break

post by nik202 on Jan 20, 2022

nik202 Enthusiast

MichalSoby](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jan 2022

@MichalSoby are you using a response from domain.yml or fetching data from anywhere like APIs or database? Are you using rasa webchat/botfront as frontend? can you share the message or response file with us?

post by MichalSoby on Jan 21, 2022

MichalSobyMichal Sobr

Jan 2022

Sorry for the late reply. I am using the response from domain.yml and using the webchat as a frontend. I figured a way how to format it nicely in the end. I just used \n\n instead of just one \n to have the response across multiple lines like I used to have it when I was running it in the terminal.

post by nik202 on Jan 21, 2022

nik202 Enthusiast

Jan 2022

@MichalSoby Ok great…

17 days later

post by webdev-rohit on Feb 8, 2022

webdev-rohit

Feb 2022

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 -

\ image1920×1080 310 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/5/6/56017a963e90b815222084b5c0e9f33b36a12581.png "image")

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.

8 days later

post by Horizon733 on Feb 17, 2022

Horizon733Dishant GandhiRasa Superhero

Feb 2022

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🙂

post by webdev-rohit on Feb 17, 2022

webdev-rohit

Feb 2022

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 -

\ image1360×919 112 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/b/c/bc468e4a00cf3202ae3fed5412bf70e5f9123f58.png "image")

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

post by shethsankalp on Feb 17, 2022

shethsankalpsankalp sheth

Feb 2022

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!

post by vio_lovis on Feb 17, 2022

vio_lovisVioletta

Feb 2022

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

post by Horizon733 on Feb 17, 2022

Horizon733Dishant GandhiRasa Superhero

webdev-rohit](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Feb 2022

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

post by shethsankalp on Feb 17, 2022

shethsankalpsankalp sheth

vio_lovis](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Feb 2022

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

post by vio_lovis on Feb 17, 2022

vio_lovisVioletta

Feb 2022

Great! I am happy to help

post by webdev-rohit on Feb 17, 2022

webdev-rohit

Horizon733](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Feb 2022

@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

post by shethsankalp on Feb 17, 2022

shethsankalpsankalp sheth

vio_lovis](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Feb 2022

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.

post by vio_lovis on Feb 17, 2022

vio_lovisVioletta

Feb 2022

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

Sorry!

post by nik202 on Feb 17, 2022

nik202 Enthusiast

shethsankalp](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Feb 2022

@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.

post by Horizon733 on Feb 17, 2022

Horizon733Dishant GandhiRasa Superhero

shethsankalp](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Feb 2022

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. Easy for every case

post by shethsankalp on Feb 18, 2022

shethsankalpsankalp sheth

Feb 2022

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


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

Again, thanks for the quick responses!

post by gourav1212 on Feb 21, 2022

gourav1212Gourav Mishra Rasa Certified Developer

webdev-rohit](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Feb 2022

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

post by webdev-rohit on Feb 21, 2022

webdev-rohit

Feb 2022

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)

9 days later

post by shethsankalp on Mar 3, 2022

shethsankalpsankalp sheth

Mar 2022

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.

\ chat window762×592 35.5 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/e/2/e2a52274b2e1cc32e1434dcff3df184b86021d44.png "chat window")

24 days later

post by bitcode222 on Mar 27, 2022

bitcode222

Mar 2022

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!

1 month later

post by Honey_bell on Apr 28, 2022

Honey_bell

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Apr 2022

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

14 days later

post by shethsankalp on May 13, 2022

shethsankalpsankalp sheth

May 2022

@Horizon733 Hey, do you know how we can add reset button on chatbot header to reset the conversation and start afresh when using rasa webchat? This would be of great help!

20 days later

post by Sweksha on Jun 3, 2022

Sweksha

webdev-rohit](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jun 2022

Hey hi @webdev-rohit, I am looking for something similar where I need to extract the customData{“UserID”:“XYZ”} sent from UI in my rasa custom actions. Can you please help me with info on how to achieve this.

Thanks

1 month later

post by shreyansh on Jul 4, 2022

shreyanshShreyansh srivastava

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jul 2022

hi jitesh i want to ask that whether it is possible to add tooltip and speech recogniton system to rasa chat bot ,if yes could you please tell me how,

post by shreyansh on Jul 6, 2022

shreyanshShreyansh srivastava

nik202](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Jul 2022

hey , i want to add different tooltip message and different payload msg ,is there any way i can do this

6 months later

post by bhawana_prs on Dec 22, 2022

bhawana_prsbhawana

JiteshGaikwad](https://forum.rasa.com/t/rasa-webchat-integration/19930/192 "Load parent post")

Dec 2022

These links are no longer accessible. Can you make it available?

8 months later

post by swetha1899 on Aug 29, 2023

swetha1899Swetha

Aug 2023

I was trying to install the rasa-webchat, but it’s showing this error

\ Screenshot 2023-08-29 at 11.01.00 AM3582×1436 406 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/7/3/73ba9f92c30c923541aaa4fe282968b9f8e983ac.png "Screenshot 2023-08-29 at 11.01.00 AM")

If I try to install that,

\ image1440×300 43.4 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/0/a/0a018c36117b0ce55475945e654621fc0254bcff.png "image")

Any idea how to resolve this?

Reply

Related topics

Topic Replies Views Activity
Connect rasa to a web site with the recommeded plataform
Rasa Open Source
62 13.9k Feb 2022
[Latest] Rasa core integration with chatwidget https://github.com/mrbot-ai/rasa-webchat
Rasa Open Source
32 5.2k Nov 2020
Rasa webbot
Rasa Open Source
53 5.9k Jul 2021
Rasa Web chat customizing buttons,colors alligning etc
Rasa Open Source
99 15.8k Jan 2022
Error return of buttons in rasa webchat
Rasa Open Source
72 3.4k Feb 2022

Topic list, column headers with buttons are sortable.

Loading complete

We collect and process your personal information for the following purposes: Visitor Statistics, Browsing Behavior. Learn more...

OKDecline