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!

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

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

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

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

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

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

How to add the Chatbot Widget to my React App?

Rasa Open Source

joshua987 (Joshua Álvarez) March 22, 2023, 1:12am 3

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

Topic		Replies	Views
Is it possible to integrate rasa with react.js . If possible how to configure? Tutorials, Resources & Videos rasa	3	3455	September 26, 2020
Integration of rasa chat bot with custom interface Rasa Open Source	2	1962	October 14, 2020
Rasa chatbot integration with react Rasa Open Source	11	5466	April 11, 2023
React Chat Widgets For Rasa Rasa Open Source	0	538	November 3, 2022
Customizing botfront rasa-webchat widget for React Rasa Open Source	11	2195	February 14, 2022

How to add the Chatbot Widget to my React App?

Related topics