useChatwoot

useChatwoot is a React hook library that wraps the Chatwoot JS SDK into an easy-to-use React context and hook. It simplifies the integration of Chatwoot into your React applications, allowing you to manage Chatwoot commands and settings effortlessly.

Installation

You can install the library using your preferred package manager:

npm

npm install @otterlyspace/use-chatwoot

yarn

yarn add @otterlyspace/use-chatwoot

pnpm

pnpm add @otterlyspace/use-chatwoot

Setup

To use useChatwoot, you need to set up the ChatwootProvider in your application. This provider initializes the Chatwoot SDK and makes its commands accessible via the useChatwoot hook.

Required Variables

The ChatwootProvider requires the following configuration:

• websiteToken (string): Your Chatwoot website token.
• baseUrl (string): The base URL of your Chatwoot instance.
• customConfig (optional): An object containing additional Chatwoot settings. These settings will override the default ones.

Example Configuration

import React from "react";
import { ChatwootProvider } from "@otterlyspace/use-chatwoot";

const App = () => {
  const chatwootConfig = {
    websiteToken: "your-website-token",
    baseUrl: "https://app.chatwoot.com",
    customConfig: {
      hideMessageBubble: true,
      position: "left",
      locale: "fr",
    },
  };

  return (
    <ChatwootProvider config={chatwootConfig}>
      <YourAppComponents />
    </ChatwootProvider>
  );
};

export default App;

Using the Hook

The useChatwoot hook provides access to the Chatwoot commands, allowing you to interact with the Chatwoot SDK.

Example Usage

import React from "react";
import { useChatwoot } from "@otterlyspace/use-chatwoot";

const ChatwootExample = () => {
  const chatwootCommands = useChatwoot();

  const openChat = () => {
    if (chatwootCommands) {
      chatwootCommands.toggle();
    } else {
      console.error("Chatwoot commands are not available.");
    }
  };

  return (
    <button onClick={openChat}>
      Open Chat
    </button>
  );
};

export default ChatwootExample;

Features

• Context-based Integration: Easily set up Chatwoot in your React app using the ChatwootProvider.
• Customizable Settings: Override default Chatwoot settings with your own configuration.
• Hook Access: Use the useChatwoot hook to interact with the Chatwoot SDK commands.

Notes

• Ensure that the ChatwootProvider is placed at the root of your application or at a level where all components requiring Chatwoot access are nested.
• The useChatwoot hook must be used within a ChatwootProvider. Otherwise, it will throw an error.

License

This library is open-source and available under the MIT License.