LuliChat Support Chat

LuliChat Support Chat is a library that provides a real-time live support chat widget for web applications. It can be integrated into React applications or loaded directly via UMD/script tags in standard HTML pages.

1. React Installation & Usage

Installation

npm install lulichat

Usage

Import the component and stylesheet:

import React from "react";
import LuliChat from "lulichat";
import "lulichat/dist/style.css";

const App = () => {
  return (
    <LuliChat
      apiKey="YOUR_API_KEY"
      companyName="LuliChat Demo"
      welcomeMessage="How can we help you today?"
      primaryColor="#4f46e5"
      allowAnonymous={true}
      requireContactInfo={true}
      position="bottom-right"
    />
  );
};

export default App;

2. Vanilla Script Integration (No React)

You can load the widget on any website using the unpkg CDN.

Option A: Standalone Bundle (Recommended for non-React websites)

This bundle includes React, ReactDOM, Socket.io, marked, and DOMPurify internally, making it a zero-dependency drop-in.

<script
  src="https://unpkg.com/lulichat/dist/lulichat-widget-standalone.umd.js"
  data-api-key="YOUR_API_KEY"
  data-company-name="Your Company"
  data-position="bottom-right"
  data-primary-color="#4f46e5"
  defer
  onload="window.LuliChatSupport && window.LuliChatSupport.initFromScript()"
></script>

Option B: Externalized Bundle

If your page already loads React, ReactDOM, and socket.io-client, use the smaller externalized bundle:

<link rel="stylesheet" href="https://unpkg.com/lulichat/dist/style.css" />
<script
  src="https://unpkg.com/lulichat/dist/lulichat-widget.umd.js"
  data-api-key="YOUR_API_KEY"
  data-company-name="Your Company"
  data-position="bottom-right"
  data-primary-color="#4f46e5"
  defer
  onload="window.LuliChatSupport && window.LuliChatSupport.initFromScript()"
></script>

3. Configuration Options

Set these options via React component props, data-* script tag attributes, or URL query parameters:

| Parameter / Attribute | Description | Default | | :------------------------------------------------- | :------------------------------------------------------------------------ | :------------------------- | | apiKey / data-api-key | Your LuliChat public API key (Required) | - | | companyName / data-company-name | Header title of the widget | LuliChat | | welcomeMessage / data-welcome-message | Initial greeting message | - | | primaryColor / data-primary-color | Hex theme color code (e.g. #4f46e5) | #4f46e5 | | position / data-position | Widget placement (bottom-right, bottom-left, top-right, top-left) | bottom-right | | allowAnonymous / data-allow-anonymous | Allow users to chat without entering contact info | false | | requireContactInfo / data-require-contact-info | Ask for contact info before initiating a session | true | | baseUrl / data-base-url | Base endpoint URL for the chat backend API | https://api.lulichat.com |

4. JavaScript / Programmatic API

When loaded via a script tag, the widget registers a global window.LuliChatSupport object:

• window.LuliChatSupport.mount(config, targetSelector?): Mounts the widget programmatically.
• window.LuliChatSupport.unmount(id): Unmounts a specific widget instance by ID.
• window.LuliChatSupport.unmountAll(): Removes all mounted widget instances.
• window.LuliChatSupport.initFromScript(): Reads properties from the current <script> tag and initializes the widget.

License

This project is licensed under the MIT License.