How to add the Chatbot Widget to my React App?

Rasa Open Source
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