How to add the Chatbot Widget to my React App?

Rasa Open Source
1

Hi everyone, I found JiteshGaikwad / Chatbot-Widget and I’m trying to add it to my website, a Next.js app. I was able to do this with the @rasahq/rasa-chat widget as a script adding the code snippet in the docs But I don’t know how to add Jitesh’s widget. I would really appreciate any guidance. Thanks a lot!

2

Hi @joshua987

I think this GitHub repo: Add Jitesh Chatbot widget to a React based project is doing exactly the same thing.

1 Like
3

Thanks a lot! I will check it out. But I think this is not a React project.

4

Hi @joshua987

Yes it may not be in react but the idea is same. It’s JS file, You can add it in your project

2 Likes
5

Hey @joshua987, Since you want to integrate the bot ui on your website built on Next Js, you can use the Script component to add this bot to your project. adding the sample code for your reference from the project which anoop shared assuming you have the index.js script in your public folder of your project

"use client";
import Script from "next/script";

export default function Home() {
  return (
    <main className="text-red-500">
      <Script
        id="bot_ui"
        src="./index.js"
        onLoad={(e) => {
          window?.ChatbotWidget.default({
            rasaServerUrl: "http://localhost:5005/webhooks/rest/webhook",
            userId: null,
            initialPayload: "/greet",
            metadata: {},
            botAvatar: "https://github.com/JiteshGaikwad/Chatbot-Widget/blob/main/static/img/botAvatar.png",
            widgetColor: "#A4BE7B",
            textColor: "#034809",
            userMsgBackgroundColor: "#E5D9B6",
            botTitle: "Chat Bot",
            botSubTitle: "Agriculture Services Assistant",
            botMsgBackgroundColor: "#f3f4f6",
            botResponseDelay: "",
            chatHeaderCss: {
              textColor: "#034809",
              backgroundColor: "#A4BE7B",
              enableBotAvatarBorder: true,
            },
            chatHeaderTextColor: "#4c1d95",
            botMsgColor: "#4b5563",
            userMsgColor: "#4c1d95",
            embedded: false,
            buttonsCss: {
              color: "#5F8D4E",
              backgroundColor: "#5F8D4E",
              borderColor: "#5F8D4E",
              borderWidth: "0px",
              borderRadius: "999px",
              hoverBackgroundColor: "white",
              hoverColor: "#4b5563",
              hoverborderWidth: "1px",
              enableHover: false,
            },
          });
        }}
      />
    </main>
  );
}

Note: I am using Next JS 13.2 for this example

I hope this helps. Thanks

1 Like
6

@anoopshrma this will work for React based projects but bit different for next js apps. thanks for pitching in :wink:

2 Likes
7

Awesome! I will try this approach and mark your answer as the solution if I make it work. Thanks a lot!

1 Like
8

@JiteshGaikwad - Can you please help me to integrate it in an already running React App? I did try to create a component, but I am stuck a lot. It would be of great help if you could guide on how to integrate it in React App as you did explain for NextJS app.

Thanks a lot for your time.