NeuronLI Chatbot

Neuronli Chatbot is an AI-powered chatbot widget designed to be embedded into any website. This package provides an easy-to-use interface for integrating a customizable chatbot into your web project, allowing users to interact with a virtual assistant.

Installation

To install the package, run the following command in your project:

npm install neuronli-chatbot

with yarn:

yarn add neuronli-chatbot

Usage

Import the Component

First, import the Chat component into your React file:

import { Chat, Config } from "test-lb";

Configuring the Chatbot

The Chat component accepts a configuration object (config) that allows you to customize the appearance and behavior of the chatbot. Here’s an example of how to configure and use the component:

const configWidget: Config = {
    textHeader: "Welcome to the Chatbot",
    fontColorHeader: "#FFFFFF",
    fontSizeHeader: "20px",
    bgHeader: "#4A90E2",
    iconImage: "url_to_your_icon_image_or_ReactNode",
    bgBody: "#F5F5F5",
    agentMessageColor: "#4A90E2",
    userMessageColor: "#FFFFFF",
    fontColorAgent: "#000000",
    fontColorUser: "#000000",
    bgBubbleColor: "#E0E0E0",
    bubbleColor: "#4A90E2",
    bubbleImage: "url_to_your_bubble_image_or_ReactNode",
    fontSizeBody: "16px",
    width: "350px",
    height: "500px",
    placeholderInput: "Type your message...",
    theme: "default",
    language: "en",
    bgFooter: "#FFFFFF",
    inputBgColorFooter: "#F5F5F5",
    inputTextColorFooter: "#000000",
    inputBorderColorFooter: "#CCCCCC",
    buttonBgColorFooter: "#4A90E2",
    buttonTextColorFooter: "#FFFFFF",
    microphoneButtonBgColorFooter: "#4A90E2",
    microphoneButtonTextColorFooter: "#FFFFFF"
};

<Chat 
    assistantId="your-assistant-key-here"
    config={configWidget}
/>

Setting Up the Assistant

To use the chatbot, replace "your-assistant-key-here" with the assistant key generated on neuronli.ai after purchasing the service. This key is unique to each assistant and allows the chatbot to connect to the AI configured in your Neuronli account.

<Chat 
    assistantId="your-assistant-key-here"
    config={configWidget}
/>

Customization

The config object allows you to fully customize the chatbot's appearance. You can adjust colors, fonts, sizes, and more to ensure the chatbot seamlessly integrates with your website's design.

Config Properties

• textHeader: Text displayed in the chatbot header.
• fontColorHeader: Color of the header text.
• fontSizeHeader: Font size of the header text.
• bgHeader: Background color of the header.
• iconImage: URL of the icon image or a ReactNode component.
• bgBody: Background color of the chat body.
• agentMessageColor: Background color of agent messages.
• userMessageColor: Background color of user messages.
• fontColorAgent: Text color of agent messages.
• fontColorUser: Text color of user messages.
• bgBubbleColor: Background color of chat bubbles.
• bubbleColor: Color of chat bubbles.
• bubbleImage: URL of the bubble image or a ReactNode component.
• fontSizeBody: Font size of the chat body.
• width: Width of the chatbot widget.
• height: Height of the chatbot widget.
• placeholderInput: Placeholder text in the input field.
• theme: Chatbot theme ("dark", "white", or "default").
• language: Chatbot language ("es" for Spanish, "en" for English).
• bgFooter: Background color of the footer.
• inputBgColorFooter: Background color of the input field.
• inputTextColorFooter: Text color of the input field.
• inputBorderColorFooter: Border color of the input field.
• buttonBgColorFooter: Background color of the send button.
• buttonTextColorFooter: Text color of the send button.
• microphoneButtonBgColorFooter: Background color of the microphone button.
• microphoneButtonTextColorFooter: Text color of the microphone button.

License

This project is licensed under the MIT License. For more details, see the LICENSE file.

Thank you for using Neuronli Chatbot! If you have any questions or need assistance, feel free to contact us at [email protected].