ChattyKey - Customizable Chat Widget

Overview

ChattyKey is a lightweight, highly customizable chat widget that you can easily integrate into any website. It provides a modern, responsive interface for real-time customer support conversations.

Features

• 💻 Easy Integration - Simple installation via CDN or NPM
• 🎨 Fully Customizable - Change colors, position, text, and more
• 📱 Responsive Design - Works perfectly on all devices
• 🖼️ File Attachments - Support for image and file uploads
• 🔒 Secure Communication - Encrypted messaging
• ⚙️ Configuration Options - Extensive customization API

Quick Start

CDN Installation

Add the following script tag to your HTML:

<script
  src="https://cdn.jsdelivr.net/npm/chatty-key-widget/dist/chatty-key-widget-cdn.umd.js"
  data-chattykey-init="true"
  data-chattykey-apikey="YOUR_API_KEY"
  data-chattykey-position="bottom-right"
  data-chattykey-color="#3B82F6"
  data-chattykey-title="Chat Support"
  data-chattykey-subtitle="We typically reply within a few minutes"
  data-chattykey-agent-name="Support Agent"
></script>

For production use, you may want to specify a fixed version:

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chatty-key-widget-cdn.umd.js"
  data-chattykey-init="true"
  data-chattykey-apikey="YOUR_API_KEY"
  data-chattykey-position="bottom-right"
  data-chattykey-color="#3B82F6"
  data-chattykey-title="Chat Support"
  data-chattykey-subtitle="We typically reply within a few minutes"
  data-chattykey-agent-name="Support Agent"
></script>

NPM Installation

npm install chatty-key-widget

Then import and use in your React application:

import { ChatWidget } from "chatty-key-widget";

function App() {
  return (
    <div>
      <ChatWidget
        apiKey="YOUR_API_KEY"
        position="bottom-right"
        primaryColor="#3B82F6"
        title="Chat Support"
        subtitle="We typically reply within a few minutes"
        agentName="Support Agent"
      />

      {/* Your app content */}
    </div>
  );
}

Live Demo

Check out our live demo to see the widget in action and explore configuration options.

Configuration Options

| Option | Type | Default | Description | | -------------- | ------ | ----------------------- | ------------------------------------------------------------------------ | | apiKey | string | (required) | Your ChattyKey API key | | position | string | 'bottom-right' | Widget position ('bottom-right', 'bottom-left', 'top-right', 'top-left') | | primaryColor | string | '#3B82F6' | Primary color for the widget (hex, rgb, rgba) | | title | string | 'Chat Support' | Title displayed in the chat header | | subtitle | string | 'We typically reply...' | Subtitle displayed in the chat header | | agentName | string | 'Support Agent' | Name of the support agent | | agentAvatar | string | '' | URL to the support agent's avatar image |

File Attachments

ChattyKey supports file attachments in conversations:

• Users can upload images and files
• Thumbnails are automatically generated for images
• Grid view for multiple attachments
• Counter for additional attachments beyond the visible ones

Browser Support

ChattyKey works in all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

License

MIT © ChattyKey