# Rasa chatbot integration with react

**URL:** <https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114>\
**Category:** Rasa Open Source\
**Created:** [February 3, 2022, 7:57pm UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114 "2022-02-03T19:57:54Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![mortisplant](https://avatars.discourse-cdn.com/v4/letter/m/839c29/32.png) [@mortisplant](https://forum.rasa.com/u/mortisplant)\
**Post date:** [February 3, 2022, 7:57pm UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/1 "2022-02-03T19:57:54Z")

</div>

Would someone be able to help me in integrating RASA with React? I’ve been trying to create a very basic chatbot just for practice and needed a UI for my react app, so I was using Botfront rasa-webchat as a react component but it’s not working. ([https://github.com/botfront/rasa-webchat](https://github.com/botfront/rasa-webchat))

Has anyone been successful in implementing this?

---

<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:** [February 3, 2022, 8:25pm UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/2 "2022-02-03T20:25:15Z")

</div>

Welcome to the forum!!

@mortisplant can you share two things with me

1. Rasa version rasa --version
2. Snippet code you are using for a widget

Thanks.

---

<div class="post-metadata">

**Author:** ![mortisplant](https://avatars.discourse-cdn.com/v4/letter/m/839c29/32.png) [@mortisplant](https://forum.rasa.com/u/mortisplant)\
**Post date:** [February 3, 2022, 8:53pm UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/3 "2022-02-03T20:53:03Z")

</div>

Thanks for the reply! I am using RASA version 3.0.6

This is what I have currently in App.js:

```auto
import Widget from 'rasa-webchat';

function App() {
  return (
    <div className="App" >
      <Widget
      initPayload={"/happy path"}
      socketUrl={"http://localhost:5005"}
      socketPath={"/socket.io/"}
      customData= {{"language": "en"}} // arbitrary custom data. Stay minimal as this will be added to the socket
      title={"Rasa Chatbot"}
      inputTextFieldHint={"Type a message..."}
      hideWhenNotConnected={false}
      embedded={false}
    />
    </div>
  );
}

export default App;

```

When I run npm start, my page is blank. This is what my console looks like:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/b/2/b2da09186c2e7919492d73a279369254d500a098.png)

---

<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:** [February 3, 2022, 8:54pm UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/4 "2022-02-03T20:54:44Z")

</div>

@mortisplant No worries!

Your major issue is the webchat snippet code, I don’t know from which older post you have seen this, but bot front updated this snippet code a new snippet code as shown in this link : [https://github.com/botfront/rasa-webchat](https://github.com/botfront/rasa-webchat)

---

<div class="post-metadata">

**Author:** ![mortisplant](https://avatars.discourse-cdn.com/v4/letter/m/839c29/32.png) [@mortisplant](https://forum.rasa.com/u/mortisplant)\
**Post date:** [February 8, 2022, 7:31pm UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/6 "2022-02-08T19:31:48Z")

</div>

Hi! So I was able to integrate it with my react app. Everything works fine except for using the enter key to send messages. I saw on another post that someone was able to resolve this by resolving their dependency issue, but i’m unsure how to go about doing that. I had to do npm install with legacy peer deps because I am using React v17.0.2 instead of 16.8.3.

---

<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:** [February 14, 2022, 5:37pm UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/7 "2022-02-14T17:37:37Z")

</div>

@mortisplant is this still an active issue?

---

<div class="post-metadata">

**Author:** ![mortisplant](https://avatars.discourse-cdn.com/v4/letter/m/839c29/32.png) [@mortisplant](https://forum.rasa.com/u/mortisplant)\
**Post date:** [February 14, 2022, 5:40pm UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/8 "2022-02-14T17:40:53Z")

</div>

It’s not, I can close it now. I found a work around without having to deal with the dependency issue.

---

<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:** [February 14, 2022, 6:07pm UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/9 "2022-02-14T18:07:58Z")

</div>

@mortisplant please can you share the workaround you found? or if any of the above solutions/suggestions help you to find your solution, mark the solution and close this thread. Thanks.

---

<div class="post-metadata">

**Author:** ![mortisplant](https://avatars.discourse-cdn.com/v4/letter/m/839c29/32.png) [@mortisplant](https://forum.rasa.com/u/mortisplant)\
**Post date:** [February 14, 2022, 6:17pm UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/10 "2022-02-14T18:17:03Z")

</div>

The work around for not being able to send messages using the enter key was found here: [https://github.com/botfront/rasa-webchat/issues/380](https://github.com/botfront/rasa-webchat/issues/380)

I had to use this because I wasn’t sure how to resolve the upstream dependency issues when doing npm install rasa-webchat

---

<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:** [February 14, 2022, 6:21pm UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/11 "2022-02-14T18:21:47Z")

</div>

@mortisplant thanks for sharing the solution with us and good luck with your project.

---

<div class="post-metadata">

**Author:** ![LindaA](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/lindaa/32/18445_2.png) [@LindaA](https://forum.rasa.com/u/LindaA)\
**Post date:** [August 25, 2022, 8:51am UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/12 "2022-08-25T08:51:59Z")

</div>

Hi @nik202Could you explain how this code snippet would need to me integrated in App.js?

```auto
import Widget from 'rasa-webchat';

function CustomWidget = () => {
  return (
    <Widget
      initPayload={"/get_started"}
      socketUrl={"http://localhost:5500"}
      socketPath={"/socket.io/"}
      customData={{"language": "en"}} // arbitrary custom data. Stay minimal as this will be added to the socket
      title={"Title"}
    />
  )
}

```

Unfortunately, I’m not able to get run

---

<div class="post-metadata">

**Author:** ![Wtreck](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/wtreck/32/22748_2.png) [@Wtreck](https://forum.rasa.com/u/Wtreck)\
**Post date:** [April 11, 2023, 2:28am UTC](https://forum.rasa.com/t/rasa-chatbot-integration-with-react/51114/13 "2023-04-11T02:28:46Z")

</div>

I tried to integrate the following code, which is the latest one from the docs, into a react custom component, but I got the following error:

Error: ERROR Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See [https://fb.me/react-invalid-hook-call](https://fb.me/react-invalid-hook-call) for tips about how to debug and fix this problem. Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
4. You might have mismatching versions of React and the renderer (such as React DOM)
5. You might be breaking the Rules of Hooks
6. You might have more than one copy of React in the same app See [https://fb.me/react-invalid-hook-call](https://fb.me/react-invalid-hook-call) for tips about how to debug and fix this problem. at resolveDispatcher ([http://localhost:3000/static/js/bundle.js:84586:17](http://localhost:3000/static/js/bundle.js:84586:17)) at useRef ([http://localhost:3000/static/js/bundle.js:84620:24](http://localhost:3000/static/js/bundle.js:84620:24)) at [http://localhost:3000/static/js/bundle.js:61345:31](http://localhost:3000/static/js/bundle.js:61345:31) at renderWithHooks ([http://localhost:3000/static/js/bundle.js:21236:22](http://localhost:3000/static/js/bundle.js:21236:22)) at updateForwardRef ([http://localhost:3000/static/js/bundle.js:23807:24](http://localhost:3000/static/js/bundle.js:23807:24)) at beginWork ([http://localhost:3000/static/js/bundle.js:25854:20](http://localhost:3000/static/js/bundle.js:25854:20)) at HTMLUnknownElement.callCallback ([http://localhost:3000/static/js/bundle.js:10828:18](http://localhost:3000/static/js/bundle.js:10828:18)) at Object.invokeGuardedCallbackDev ([http://localhost:3000/static/js/bundle.js:10872:20](http://localhost:3000/static/js/bundle.js:10872:20)) at invokeGuardedCallback ([http://localhost:3000/static/js/bundle.js:10929:35](http://localhost:3000/static/js/bundle.js:10929:35)) at beginWork$1 ([http://localhost:3000/static/js/bundle.js:30803:11](http://localhost:3000/static/js/bundle.js:30803:11))

Code: import React, { Component } from ‘react’; import Widget from ‘rasa-webchat’;

class CustomWidget extends Component { render() { return ( \<Widget initPayload={“/get\_started”} socketUrl={“[http://localhost:5005](http://localhost:5005)”} socketPath={“/socket.io/”} customData={{“language”: “en”}} // arbitrary custom data. Stay minimal as this will be added to the socket title={“Title”} /\> ); } }

export default CustomWidget;