Ermis-chat-widget-sdk NPM

Overview

NPM Package Link: ermis-chat-widget-sdk

ermis-chat-widget-sdk 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-sdk@latest

yarn add ermis-chat-widget-sdk@latest

Import the library:

import { ErmisChatWidget } from 'ermis-chat-widget-sdk';

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-sdk';

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

chatbot

@babel/polyfill @emoji-mart/data @emoji-mart/react @rollup/plugin-json emoji-mart ermis-js-sdk react-infinite-scroll-component rollup-plugin-peer-deps-external

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago