mircate-chat v1.0.1

Mircate Chat

Mircate Chat is a lightweight JavaScript widget that allows users to embed a chat interface on their website for customer interactions. The widget is customizable with various options like theme, position, and embedded container selection.

Features

• Customizable theme (light/dark)
• Configurable position (bottom-right/bottom-left)
• Custom button text and appearance
• Embeds within a specified container or defaults to floating mode
• Fully responsive and lightweight
• Easy to integrate

Installation

You can install the package via npm:

npm install mircate-chat

Or via yarn:

yarn add mircate-chat

Usage

Import and initialize the widget in your project:

import MircateChat from "mircate-chat";

const widget = new MircateChat({
  serverUrl: "https://talking-product.vercel.app",
  theme: "light",
  position: "bottom-right",
  companyName: "Mircate",
  productLine: "Electronics",
  buttonText: "Chat with us",
  width: "380px",
  height: "600px",
});

This will automatically append the chat button and widget to the page.

Configuration Options

The MircateChatOptions interface provides the following customizable options:

API Methods

open()

Manually opens the chat widget.

widget.open();

close()

Manually closes the chat widget.

widget.close();

toggle()

Toggles the chat widget open/close state.

widget.toggle();

destroy()

Removes the widget from the page.

widget.destroy();

setTheme(theme: "light" | "dark")

Dynamically updates the theme of the widget.

widget.setTheme("dark");

Styling

The widget uses inline styles for the button and container, but you can override them with CSS using the following class selectors:

.mircate-widget-button {
  background-color: #4299e1 !important;
}

#mircate-widget-container {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

License

This project is licensed under the MIT License.

Contributions

Feel free to submit issues and pull requests to improve the widget!

Happy coding! 🚀