# Rasa-webchat in React - Enter key doesn't send message and where do you edit the css for the widget?

**URL:** <https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816>\
**Category:** Rasa Open Source\
**Created:** [February 4, 2021, 12:16am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816 "2021-02-04T00:16:06Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![shawnyama](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/shawnyama/32/13236_2.png) [@shawnyama](https://forum.rasa.com/u/shawnyama)\
**Post date:** [February 4, 2021, 12:16am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/1 "2021-02-04T00:16:06Z")

</div>

Hi, I have added this widget in my React project using npm install. From here: [GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront](https://github.com/botfront/rasa-webchat) . Clicking the arrow button sends a message but it doesn’t work when I press the Enter key. Is there a way to add that feature as some sort of parameter within `<Widget />` ? Also how should I approach editing the css for the Widget? I see examples of people changing the css for it but I don’t know what file they’re editing or where it even is.

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/6/69f17fe088907d16701a0d5c4c5129c969dbaa7e.png)

---

<div class="post-metadata">

**Author:** ![Loki](https://avatars.discourse-cdn.com/v4/letter/l/3be4f8/32.png) [@Loki](https://forum.rasa.com/u/Loki)\
**Post date:** [September 7, 2021, 8:55am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/2 "2021-09-07T08:55:51Z")

</div>

@shawnyama did you find any solution to that? I am facing the same issue now.

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [September 7, 2021, 8:58am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/3 "2021-09-07T08:58:54Z")

</div>

@Loki Hi, Loki! What is your current issue can you elaborate for us. Thanks.

---

<div class="post-metadata">

**Author:** ![Loki](https://avatars.discourse-cdn.com/v4/letter/l/3be4f8/32.png) [@Loki](https://forum.rasa.com/u/Loki)\
**Post date:** [September 7, 2021, 9:18am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/4 "2021-09-07T09:18:50Z")

</div>

![Screenshot 2021-09-07 at 2.45.30 PM](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/3/c/3c8baf9c8e8ad7621030fe59b81d19595d779977.png)@nik202 Enter key is not sending message, I. have to manually press enter button every time I send a message.I have added this widget in my React project using npm install. Is there a way to add that feature(sending message on pressing enter key in my keyboard) as some sort of parameter within `<Widget />` ?

my params :

```auto
         <Widget
                initPayload={"/welcome_message"}
                socketUrl={"http://localhost:5500"}
                socketPath={"/socket.io/"}
                customData={{"language": "en"}} 
                embedded={true}
                showMessageDate={true}
                params={{"storage": "session"}}
              />

```

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [September 7, 2021, 9:24am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/5 "2021-09-07T09:24:35Z")

</div>

@Loki please share the webchat snippet code which you are using, please do your format tool i.e \</\> as shown in editor.

---

<div class="post-metadata">

**Author:** ![Loki](https://avatars.discourse-cdn.com/v4/letter/l/3be4f8/32.png) [@Loki](https://forum.rasa.com/u/Loki)\
**Post date:** [September 7, 2021, 9:33am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/6 "2021-09-07T09:33:23Z")

</div>

@nik202 done

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [September 7, 2021, 9:34am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/7 "2021-09-07T09:34:04Z")

</div>

@Loki What is done Loki 😉 by the way I like the name Loki and he is my Favourite Marvel Character.

---

<div class="post-metadata">

**Author:** ![Loki](https://avatars.discourse-cdn.com/v4/letter/l/3be4f8/32.png) [@Loki](https://forum.rasa.com/u/Loki)\
**Post date:** [September 7, 2021, 10:20am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/8 "2021-09-07T10:20:57Z")

</div>

@nik202 formatting the code as you asked is done. If you can , please help me out here .

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [September 7, 2021, 10:51am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/9 "2021-09-07T10:51:22Z")

</div>

@Loki can you share the complete snippet code for me please.

---

<div class="post-metadata">

**Author:** ![Loki](https://avatars.discourse-cdn.com/v4/letter/l/3be4f8/32.png) [@Loki](https://forum.rasa.com/u/Loki)\
**Post date:** [September 7, 2021, 11:04am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/10 "2021-09-07T11:04:42Z")

</div>

@nik202

```auto
import {Component} from "react";
import Widget from "rasa-webchat";

export class RasaWebChat extends Component{
    render() {
        return(
            <Widget
                initPayload={"/welcome_message"}
                socketUrl={"http://localhost:5500"}
                socketPath={"/socket.io/"}
                customData={{"language": "en"}} // arbitrary custom data. Stay minimal as this will be added to the socket
                embedded={true}
                showMessageDate={true}
                params={{"storage": "session"}}
            />
        );
    }
}

```

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [September 7, 2021, 11:08am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/11 "2021-09-07T11:08:53Z")

</div>

@Loki you are not using this code?

```auto
<script>!(function () {
  let e = document.createElement("script"),
    t = document.head || document.getElementsByTagName("head")[0];
  (e.src =
    "https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/lib/index.js"),
    // Replace 1.x.x with the version that you want
    (e.async = !0),
    (e.onload = () => {
      window.WebChat.default(
        {
          customData: { language: "en" },
          socketUrl: "https://bf-botfront.development.agents.botfront.cloud",
          // add other props here
        },
        null
      );
    }),
    t.insertBefore(e, t.firstChild);
})();
</script>

```

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [September 7, 2021, 11:10am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/12 "2021-09-07T11:10:00Z")

</div>

> [@Loki](#):
>
> `socketUrl={"http://localhost:5500"}`

@Loki please change this

`socketUrl={"http://localhost:5500"}`

To

`socketUrl={"http://localhost:5005"}`

let me know please.

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [September 7, 2021, 11:26am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/13 "2021-09-07T11:26:08Z")

</div>

@Loki Please do see this video, hope this will help you [Rasa chatbot website integration | Quick tutorial - YouTube](https://youtu.be/eJMT2FovZsM)

---

<div class="post-metadata">

**Author:** ![Loki](https://avatars.discourse-cdn.com/v4/letter/l/3be4f8/32.png) [@Loki](https://forum.rasa.com/u/Loki)\
**Post date:** [September 28, 2021, 9:08am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/14 "2021-09-28T09:08:08Z")

</div>

This one is solved. I was installing rasa webchat npm package this way " npm install rasa-webchat --force " in my React project because of some dependency errors. later I solved all those errors and installed this way “npm install rasa-webchat” and it worked fine

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [September 28, 2021, 9:09am UTC](https://forum.rasa.com/t/rasa-webchat-in-react-enter-key-doesnt-send-message-and-where-do-you-edit-the-css-for-the-widget/39816/15 "2021-09-28T09:09:08Z")

</div>

@Loki Great! Thanks for the share.