RobinChatJS

Description

RobinChatJS is a versatile plugin that can be seamlessly integrated into any JavaScript project, whether you're using a library or framework such as React, Vue.js, or Angular. This plugin, available through npm, connects with Robin's service to provide robust support for your users, answering their questions and addressing their concerns directly within your application.

Benefits of Having a Chatbot on Your Website:

1. 24/7 Customer Support: With RobinChatJS, your users can receive immediate assistance at any time, enhancing their experience and satisfaction without the need for constant human monitoring.

2. Increased Efficiency: By automating responses to common questions, RobinChatJS frees up your support team to focus on more complex issues, improving overall operational efficiency.

3. Enhanced User Engagement: The interactive chat interface encourages users to engage more with your website or application, leading to higher user retention and potentially increased conversions.

Installation

Install the package via npm:

npm install robinchatjs

Implementation

Add the following script tag to your HTML file:

<script src="dist/chatComponent.js"></script>
<script>
    const apiKey = 'APIKEY'; // Define your API key
    const folderId = 'FOLDERID'; // Define your folderId
    const link = "srcIcon";
    const chat = new ChatComponent(apiKey, folderId, 'Robin assistant', link);
    chat.init();
</script>

Constructor Parameters

To initialize the chat plugin, you need to pass several parameters to its constructor. Below is a detailed description of each parameter:

1. apiKey (required)

   • Type: string
   • Description: This is the API key used to authenticate and authorize the chat plugin's communication with your backend services. It is essential for secure interactions and accessing necessary resources.
   • Example: "abcd1234"

2. folderId (required)

   • Type: string
   • Description: This is the identifier for the folder or directory where chat data or configurations are stored. It can be used to organize and retrieve relevant content from your backend system.
   • Example: "folder7890"

3. title (optional)

   • Type: string
   • Default: "Chat"
   • Description: The title displayed at the top of the chat window. It serves as a header that can describe the chat’s purpose or name.
   • Example: "Customer Support Chat"

4. link (optional)

   • Type: string
   • Default: this.linkLogo
   • Description: The URL of a link or logo that is displayed in the chat interface. This could be a link to your company’s homepage or a relevant image that represents the chat service.
   • Example: "https://example.com/logo.png"

5. chatLogo (optional)

   • Type: string
   • Default: this.linkLogo
   • Description: The URL of the chat’s logo image. This logo is shown within the chat window, often as a small icon or branding element.
   • Example: "https://example.com/chat-logo.png"

6. options (optional)

   • Type: object
   • Default: {}
   • Description: An object containing customization options for the chat interface. These options allow you to style and configure various aspects of the chat, such as its size and colors.
   • Available Options:
     • chatwidth: Width of the chat window (e.g., "400px").
     • messageHeight: Height of the message list area (e.g., "300px").
     • questionColor: Color of the user’s question text (e.g., "#fff").
     • answerColor: Color of the chatbot’s answer text (e.g., "#000").
     • sendButtonColor: Color of the send button (e.g., "#8043f9").
     • questionColorContent: Background color of the question message bubble (e.g., "#8043f9").
     • answerColorContent: Background color of the answer message bubble (e.g., "#f6f8f9").
     • iconDeleteColor: Color of the delete icon in the chat (e.g., "#f46a6a").
     • headerColor: Background color of the chat header (e.g., "#8043f9").
     • initQuestionsColor: Color of the initial questions’ buttons (e.g., "rgb(138, 43, 226)").

7. previewButtonOptions (optional)

   • Type: object
   • Default: {}
   • Description: An object for configuring the preview button of the chat plugin. This button usually appears on the main page and, when clicked, opens the chat window.
   • Available Options:
     • previewButtonWidth: Width of the preview button (e.g., "55px").
     • previewButtonBorderRadius: Border radius of the preview button (e.g., "0.35rem").
     • previewButtonPadding: Padding inside the preview button (e.g., "0.1rem").
     • previewButtonImgWidth: Width of the image/icon within the preview button (e.g., "55px").

8. helperText (optional)

   • Type: string
   • Default: "Hi there ! 👋 How can I help you today ?"
   • Description: The initial helper text or greeting message displayed in the chat. This message is shown to welcome users or prompt them to start the conversation.
   • Example: "Welcome to our support chat! How can we assist you?"

9. linkSpinner (optional)

   • Type: string
   • Default: "assets/images/pluggin-ellipsis-loader.gif"
   • Description: The URL of an animated spinner or loader image that is displayed while the chat plugin processes a request. This visual feedback helps indicate that the system is working on a task.
   • Example: "https://example.com/spinner.gif"

10. initQuestions (optional)

    • Type: Array<{ question: string, answer: string }>
    • Default: Predefined list of questions and answers
    • Description: An array of objects, each containing a question and a corresponding answer. These initial questions provide quick options for users to start the chat with commonly asked questions or actions.
    • Example:

      [
        { question: "I'd like to talk to Sales", answer: "Default sales" },
        { question: "Learn more about the company", answer: "Default company" },
        { question: "Become a Partner", answer: "Default partner" },
        { question: "Looking for Support", answer: "Default support" }
      ]

11. placehorderInput (optional)

    • Type: string
    • Default: "write your message ..."
    • Description: The placeholder text shown in the message input field where users type their messages. This text typically gives a hint about what users should enter.
    • Example: "Type your question here..."

Example Usage

Here's an example of how to create an instance of the chat plugin with custom settings:

const chatPlugin = new ChatPlugin(
    "abcd1234", // API key
    "folder7890", // Folder ID
    "Customer Support Chat", // Title
    "https://example.com/logo.png", // Link or logo URL
    "https://example.com/chat-logo.png", // Chat logo URL
    { chatwidth: "500px", messageHeight: "400px" }, // Options for customizing the chat window
    { previewButtonWidth: "60px", previewButtonBorderRadius: "0.5rem" }, // Options for the preview button
    "Welcome to our support chat! How can we assist you?", // Helper text
    "https://example.com/spinner.gif", // Spinner image URL
    [
        { question: "Contact Support", answer: "Default support answer" },
        { question: "Talk to Sales", answer: "Default sales answer" }
    ], // Initial questions
    "Type your question here..." // Placeholder text for the input field
);

By setting these parameters, you can tailor the chat plugin to fit your application's specific needs and provide a personalized user experience.