Chatwoot Widget for React and NextJS

Chatwoot is an open-source customer engagement suite. This library allows you to easily import and run Chatwoot widget in your React or NextJS app. The only required prop is your website token. You can obtain your website token from the settings of the website you defined previously.

Chatwoot Widget (React)

The ChatwootScript component only takes token prop which is unique for your site.

import React from "react"
import { ChatwootScript } from "@canburaks/chatwoot-react"

function App() {
    return (
        <div className="App">
            {/* 
                Your existing code
            */}

            <ChatwootScript token="RzAAsV7TNQJBuSRAqD11GSnvnF" />
        </div>
    );
}

Chatwoot Widget (NextJS)

The ChatwootNextScript component requires token prop which is unique for your site. Basically, it uses next/script component.

import { ChatwootNextScript } from "@canburaks/chatwoot-react"

function Layout({ children }) {
    return (
        <>
            {/*
                Your existing code
            */}
            <ChatwootNextScript token="RzFsj7nNNJBFSaAqD11GSnvn"  />
        </>
    )
}