WorkTalk Chat Widget

A lightweight, customizable chat widget for integrating WorkTalk chat platform into any website. Supports vanilla JavaScript, React, Vue, and other frameworks.

Features

• 🚀 Easy integration with any website or web application
• 🎨 Fully customizable themes and messages
• 📱 Responsive design for mobile and desktop
• 🔐 Secure authentication with token support
• 🌐 Multi-language support
• 📊 User metadata and custom attributes
• 🔔 Unread message notifications
• ⚛️ React and Vue.js support
• 📦 TypeScript definitions included
• 🎯 Small bundle size (~25KB gzipped)

Installation

NPM

npm install @uzinfocom-org/worktalk-ai-chat-bot

Yarn

yarn add @uzinfocom-org/worktalk-ai-chat-bot

CDN

<script src="https://unpkg.com/@uzinfocom-org/worktalk-ai-chat-bot/dist/chat-widget.umd.js"></script>

Quick Start

Create new account in worktalk.uz

Create new account and chat bot app. Set your CHANNEL_ID, ORGANIZATION_ID, APP_ID

Vanilla JavaScript

import { createChatWidget } from '@uzinfocom-org/worktalk-ai-chat-bot';

const widget = createChatWidget({
  // Required fields
  channelId: 'your-channel-id',
  organizationId: 'your-organization-id',
  appId: 'your-app-id',

  // Optional fields
  token: 'user-auth-token',
  userId: 'unique-user-id',
  userName: 'John Doe',
  userEmail: '[email protected]',

  // Callbacks
  onReady: (widget) => {
    console.log('Widget is ready');
  },
  onMessage: (message) => {
    console.log('New message:', message);
  }
});

// Initialize the widget
widget.init();

React

import React, { useEffect, useRef } from 'react';
import { createChatWidget } from '@uzinfocom-org/worktalk-ai-chat-bot';

function App() {
  const widgetRef = useRef(null);

  useEffect(() => {
    const widget = createChatWidget({
      channelId: 'your-channel-id',
      organizationId: 'your-organization-id',
      appId: 'your-app-id',
      token: 'user-auth-token',
      userId: 'user-123',
      userName: 'John Doe',
      userEmail: '[email protected]',

      // Customize theme
      theme: {
        primaryColor: '#7723d2',
        primaryGradient: '#8a66b2',
        backgroundColor: '#ffffff',
        textColor: '#1f2937'
      },

      // Auto open on mount
      autoOpen: false,

      onReady: () => {
        console.log('Chat widget ready');
      },

      onMessage: (message) => {
        console.log('New message:', message);
      }
    });

    widget.init();
    widgetRef.current = widget;

    // Cleanup on unmount
    return () => {
      widget.destroy();
    };
  }, []);

  const handleOpenChat = () => {
    widgetRef.current?.open();
  };

  return (
    <div>
      <h1>My App</h1>
      <button onClick={handleOpenChat}>Open Chat</button>
    </div>
  );
}

export default App;

Vue.js

<template>
  <div id="app">
    <h1>My Vue App</h1>
    <button @click="openChat">Open Chat</button>
  </div>
</template>

<script>
import { createChatWidget } from '@uzinfocom-org/worktalk-ai-chat-bot';

export default {
  name: 'App',
  data() {
    return {
      chatWidget: null
    };
  },
  mounted() {
    this.chatWidget = createChatWidget({
      channelId: 'your-channel-id',
      organizationId: 'your-organization-id',
      appId: 'your-app-id',
      token: 'user-auth-token',
      userId: 'user-123',
      userName: 'John Doe',
      userEmail: '[email protected]',

      theme: {
        primaryColor: '#7723d2'
      },

      position: 'bottom-right',

      onReady: () => {
        console.log('Chat widget ready');
      }
    });

    this.chatWidget.init();
  },
  beforeDestroy() {
    if (this.chatWidget) {
      this.chatWidget.destroy();
    }
  },
  methods: {
    openChat() {
      if (this.chatWidget) {
        this.chatWidget.open();
      }
    }
  }
};
</script>

Configuration Options

Required Parameters

| Parameter | Type | Description | |-----------|------|-------------| | channelId | string | Your channel identifier | | organizationId | string | Your organization identifier | | appId | string | Your application identifier |

Optional Parameters

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | websiteUrl | string | current hostname | Website URL for tracking | | aiEnabled | boolean | false | Enable AI assistant | | apiEndpoint | string | https://chat.worktalk.uz/api | API endpoint URL | | wsEndpoint | string | https://ws.chat.worktalk.uz/ | WebSocket endpoint URL | | widgetUrl | string | https://chat.worktalk.uz | Widget iframe URL | | token | string | undefined | Authentication token | | userId | string | auto-generated | Unique user identifier | | userName | string | 'Website Visitor' | User display name | | userEmail | string | undefined | User email address | | userPhone | string | undefined | User phone number | | userAvatar | string | undefined | User avatar URL | | metadata | object | {} | Custom user metadata | | position | string | 'bottom-right' | Widget position: 'bottom-right', 'bottom-left', 'top-right', 'top-left' | | autoOpen | boolean | false | Auto open widget on load | | hideToggleButton | boolean | false | Hide the toggle button |

Theme Customization

theme: {
  primaryColor: '#7723d2',        // Primary brand color
  primaryGradient: '#8a66b2',     // Gradient end color
  backgroundColor: '#ffffff',     // Widget background
  backgroundGradient: '#f8fafc',  // Background gradient
  textColor: '#1f2937',           // Main text color
  secondaryTextColor: '#6b7280',  // Secondary text
  borderColor: 'rgba(0,0,0,0.08)', // Border color
  buttonRadius: '12px',           // Button border radius
  widgetRadius: '16px',           // Widget border radius
  fontFamily: 'system-ui',        // Font family
  fontSize: '14px'                // Base font size
}

Localization

messages: {
  // Welcome screen
  welcomeTitle: 'Welcome!',
  welcomeSubtitle: 'How can we help?',

  // Status indicators
  onlineText: 'Online',
  offlineText: 'Offline',
  typingText: 'typing...',

  // Input
  messageInputPlaceholder: 'Type your message...',

  // Errors
  messageSendError: 'Failed to send message',

  // ... and many more
}

API Methods

Core Methods

// Initialize the widget
await widget.init();

// Open the chat window
widget.open();

// Close the chat window
widget.close();

// Toggle open/close
widget.toggle();

// Destroy and cleanup
widget.destroy();

User Management

// Update user information
widget.updateUser({
  userId: 'new-user-id',
  userName: 'Jane Doe',
  userEmail: '[email protected]'
});

// Set custom metadata
widget.setMetadata({
  plan: 'premium',
  company: 'Acme Corp',
  customField: 'value'
});

Messaging

// Send a message programmatically
widget.sendMessage('Hello, I need help!');

// Get unread count
const unreadCount = widget.getUnreadCount();

// Clear unread count
widget.clearUnreadCount();

State Management

// Get current widget state
const state = widget.getState();
console.log(state);
// {
//   isExpanded: boolean,
//   isLoaded: boolean,
//   isOnline: boolean,
//   unreadCount: number
// }

// Update configuration
widget.updateConfig({
  theme: {
    primaryColor: '#ff0000'
  }
});

Event Handling

const widget = createChatWidget({
  // ... config

  // Called when widget is ready
  onReady: (widget) => {
    console.log('Widget initialized');
  },

  // Called when chat opens
  onOpen: () => {
    console.log('Chat opened');
  },

  // Called when chat closes
  onClose: () => {
    console.log('Chat closed');
  },

  // Called on new message
  onMessage: (message) => {
    console.log('New message:', message);
  },

  // Called on errors
  onError: (error) => {
    console.error('Widget error:', error);
  }
});

TypeScript Support

The package includes TypeScript definitions. Import types:

import {
  ChatWidgetConfig,
  ChatWidgetInstance,
  WidgetState
} from '@uzinfocom-org/worktalk-ai-chat-bot';

const config: ChatWidgetConfig = {
  channelId: 'your-channel-id',
  organizationId: 'your-organization-id',
  appId: 'your-app-id'
};

const widget: ChatWidgetInstance = createChatWidget(config);

Browser Support

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

Security

• All communications are encrypted using HTTPS/WSS
• Token-based authentication support
• XSS protection through iframe isolation
• Origin validation for postMessage communication

License

MIT License - see LICENSE file for details

Support

For issues, questions, or feature requests, please visit:

• GitHub: https://github.com/worktalk/chat-widget
• Email: [email protected]

Development

# Install dependencies
npm install

# Run development build with watch
npm run dev

# Build for production
npm run build

# Run tests
npm test

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Made with ❤️ by WorkTalk Team