Ermis-chat-widget NPM

Overview

ermis-chat-widget is a library for creating React.js, built using TypeScript.

Features:

Implemented using React.js and TypeScript for robustness and type safety.
Provides a customizable user interface for integrating chatbot functionality into web applications.
Offers various configuration options to tailor the chatbot widget's appearance and behavior.

Usage

Install the latest version:

npm install ermis-chat-widget@latest

yarn add ermis-chat-widget@latest

Import the library:

import { ErmisChatWidget } from "ermis-chat-widget";

Use the ErmisChatWidget component:

<ErmisChatWidget
  apiKey="YOUR_API_KEY"
  openWidget={openWidget}
  onToggleWidget={onToggleWidget}
  token="YOUR_TOKEN"
  senderId="YOUR_WALLET_ADDRESS"
  receiverId="RECEIVER_WALLET_ADDRESS" // optional
  primaryColor="#eb4034" // optional
  placement={{ top: "auto", left: "auto", right: "30px", bottom: "30px" }} // optional
/>

Usage Example

import React from "react";
import { ErmisChatWidget } from "ermis-chat-widget";

const App = () => {
  const [open, setOpen] = useState(false);

  const onToggleWidget = () => {
    setOpen(!open);
  };

  return (
    <div>
      <ErmisChatWidget
        apiKey="YOUR_API_KEY"
        openWidget={open}
        onToggleWidget={onToggleWidget}
        token="YOUR_TOKEN"
        senderId="YOUR_WALLET_ADDRESS"
        receiverId="RECEIVER_WALLET_ADDRESS" // optional
        primaryColor="#eb4034" // optional
        placement={{ top: "auto", left: "auto", right: "30px", bottom: "30px" }} // optional
      />
    </div>
  );
};

export default App;

Component Props

Prop Name	Type	Default Value	Description
`apiKey`	string		Your API key for authenticating the chat widget.
`openWidget`	boolean	`false`	Boolean value to control whether the widget is open (true) or closed (false) on initial load.
`onToggleWidget`	function	`-`	Callback function that triggers when the widget is toggled. Receives a boolean argument indicating the widget's current state (true for open, false for closed).
`token`	string	`-`	Authentication token for the user, ensuring secure communication.
`senderId`	string	`-`	Unique identifier for the message sender.
`receiverId`	string	`-` (optional)	Unique identifier for the message receiver.
`primaryColor`	string	`"#eb4034"` (optional)	The primary color used for styling elements like headers, buttons, and backgrounds.
`placement`	object	`{ top: "auto", left: "auto", right: "30px", bottom: "30px" }` (optional)	Placement of popup widget