robinclientjs

Description

robinclientjs 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 robinclientjs, 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, robinclientjs 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 robinclientjs

Implementation

Add the following module import to your JavaScript file after installing:

import { ChatRobinComponent } from 'robinclientjs';

const apiKey = 'APIKEY'; // Define your API key
const link = "srcIcon"; // Define the url of the icon you want to use
const chat = new ChatRobinComponent(apiKey, 'Robin assistant', link);
chat.init();

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. 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"

3. 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"

4. 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"

5. 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)").
     • welcomeMessage: Initial greeting shown inside the chat window when opened (e.g., "¡Bienvenido a Capital Salud!"). Pass "" to hide it.
     • placeholderInput: Placeholder text in the message input field (e.g., "Escribe tu mensaje...").
     • showPoweredBy: Show/hide the "Powered by" footer (true by default). Set false to hide.
     • poweredByText: Text before the brand name (default: "Powered by").
     • poweredByBrand: Brand name in the footer (default: "Robin").
     • poweredByIcon: Icon URL in the footer (default: chatLogo).
     • gradient: Enable gradient styles (false by default). Set true to use gradients.
     • gradientTitle: Custom CSS gradient for the chat header (only when gradient: true).
     • gradientGeneral: Custom CSS gradient for widget backgrounds (only when gradient: true).
     • previewButtonBackground: Background color of the floating button (default: "#111").
     • backendUrl: Base URL for the text/audio backend API (e.g., "https://api.miproduccion.com").
     • wsUrl: WebSocket initialization URL (e.g., "wss://ws.miproduccion.com").
     • voice: Voice used for spoken (TTS) replies. Set once and applied to the whole session. Must be one of the service's approved voices: "Aoede", "Charon", "Fenrir", "Kore", "Leda", "Puck". If omitted, the backend uses its default voice.
     • linkColor: Color of clickable URLs in bot responses (e.g., "#8043f9", "blue"). Defaults to "blue" if omitted.

6. 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").

7. 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?"

8. 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"

9. 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" }
     ]

10. 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:

import { ChatRobinComponent } from 'robinclientjs';

const chatPlugin = new ChatRobinComponent(
    "abcd1234", // API key
    "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.