Universal Chat Widget

A universal chat widget that supports vanilla JavaScript/HTML, React TypeScript, and Vue TypeScript. Each framework has its own independent package to avoid unnecessary dependencies.

Installation

Using CDN (Vanilla JS/HTML):

<script src="https://cdn.jsdelivr.net/npm/@supportai.it/chat-widget"></script>

Using npm

For Vanilla JS/HTML projects:

# No additional dependency

For React TypeScript projects:

npm install @supportai.it/chat-widget

For Vue TypeScript projects:

npm install @supportai.it/chat-widget

Usage

Vanilla JavaScript/HTML

<chat-widget
  chat-id="your-chat-id"
  api-key="your-api-key"
></chat-widget>

<script type="module" src="https://cdn.jsdelivr.net/npm/@supportai.it/chat-widget"></script>

React TypeScript

import { ChatWidget, useChatContext } from '@supportai.it/chat-widget/react';

function App() {
  const { updateContext } = useChatContext();

  const handleUpdateContext = () => {
    updateContext({
      user: { id: '123', name: 'John Doe' }
    });
  };

  return (
    <div>
      <ChatWidget
        chatId="your-chat-id"
        apiKey="your-api-key"
      />
      <button onClick={handleUpdateContext}>Update Context</button>
    </div>
  );
}

Vue TypeScript

<script setup lang="ts">
import { ChatWidget, useChatContext } from '@supportai.it/chat-widget/vue';

const { updateContext } = useChatContext();

const handleUpdateContext = () => {
  updateContext({
    user: { id: '123', name: 'John Doe' }
  });
};
</script>

<template>
  <div>
    <ChatWidget
      chat-id="your-chat-id"
      api-key="your-api-key"
      button-color="#ff0000"
      button-size="56px"
    />
    <button @click="handleUpdateContext">Update Context</button>
  </div>
</template>

Updating Context Dynamically (Vanilla JS)

window.dispatchEvent(new CustomEvent("chat-widget/updateContext", {
  detail: {
    user: { id: '123', name: 'John Doe' }
  },
}));

Closing the Widget Programmatically

The widget listens for postMessage events from the iframe to close itself. The origin is verified to match the widget's base-url for security.

// From inside the chat iframe
window.parent.postMessage({ namespace: "chat-widget/close" }, "*");

Props/Attributes

• chat-id: The ID of the chat to be opened.
• api-key: The API key for authentication.
• button-color: Custom button color (Default: #582975)
• button-hover-color: Custom hover color (Default: #7b2ba6)
• button-size: Button size (Default: 64px)
• message-bubble: Display a message bubble on top of the open button (when the chat is closed). Set to false to disable.
• chat-align: Chat alignment "left" or "right". (Default: right)
• chat-width: Chat width (Default: 400px)
• chat-height: Chat height (Default: 600px)
• base-url: Base URL for the chat service
• svg-icon: Custom SVG icon for the chat button

React/Vue Props

For React use camelCase versions of the attributes

Framework-Specific Features

React

• useChatContext() hook for easy context updates
• TypeScript support with proper prop types
• React ref forwarding support

Vue

• useChatContext() composable for easy context updates
• TypeScript support with proper prop types
• Vue template ref support

Package Structure

This package provides three independent entry points:

• Default (@supportai.it/chat-widget): Vanilla JS/HTML web component
• React (@supportai.it/chat-widget/react): React TypeScript wrapper
• Vue (@supportai.it/chat-widget/vue): Vue TypeScript wrapper

Each entry point only includes dependencies relevant to that framework, ensuring minimal bundle size.