Property Chat Widget

A customizable chat widget component that can be easily integrated into any website.

Installation

Option 1: NPM Package

npm install property-chat-widget

Option 2: Script Tag

Add the following script tag to your website:

<script src="https://unpkg.com/property-chat-widget@latest/embed.js"></script>

Usage

Option 1: React Component

import ChatWidget from 'property-chat-widget';

function App() {
  return (
    <ChatWidget
      webhookUrl="https://your-webhook-url.com/chat"
      initialMessage="Hello! How can I help you today?"
      position="bottom-right"
      buttonColor="#9b87f5"
      buttonHoverColor="#8b77e5"
      windowHeight={600}
      windowWidth={400}
      customStyles={{
        button: 'custom-button-class',
        window: 'custom-window-class',
        input: 'custom-input-class',
        message: 'custom-message-class',
        userMessage: 'custom-user-message-class',
        botMessage: 'custom-bot-message-class',
      }}
    />
  );
}

Option 2: Script Tag

After adding the script tag, initialize the widget with your configuration:

<script>
  window.PropertyChatWidget.init({
    webhookUrl: 'https://your-webhook-url.com/chat',
    initialMessage: 'Hello! How can I help you today?',
    position: 'bottom-right',
    buttonColor: '#9b87f5',
    buttonHoverColor: '#8b77e5',
    windowHeight: 600,
    windowWidth: 400,
    customStyles: {
      button: 'custom-button-class',
      window: 'custom-window-class',
      input: 'custom-input-class',
      message: 'custom-message-class',
      userMessage: 'custom-user-message-class',
      botMessage: 'custom-bot-message-class',
    }
  });
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | webhookUrl | string | - | The URL of your chat webhook endpoint | | initialMessage | string | "Hello! How can I help you today?" | The initial message shown in the chat | | position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-right' | The position of the chat widget | | buttonColor | string | '#9b87f5' | The color of the chat button | | buttonHoverColor | string | '#8b77e5' | The hover color of the chat button | | windowHeight | number | 600 | The height of the chat window in pixels | | windowWidth | number | 400 | The width of the chat window in pixels | | customStyles | object | {} | Custom CSS classes for different parts of the widget |

Custom Styles

You can customize the appearance of the widget by providing custom CSS classes:

customStyles={{
  button: 'your-button-class',
  window: 'your-window-class',
  input: 'your-input-class',
  message: 'your-message-class',
  userMessage: 'your-user-message-class',
  botMessage: 'your-bot-message-class',
}}

Webhook Integration

The widget expects your webhook endpoint to handle POST requests with the following body:

{
  chatInput: string;
  sessionId: string;
}

And should return a response with the following format:

{
  output: string;
  sessionId?: string;
}

License

MIT