Athena Chat Widget

Embeddable AI chat widget — drop a single script tag to add an intelligent assistant to any page.

Install

npm install athena-chat-widget

Usage

Via Script Tag (CDN)

<script src="https://unpkg.com/athena-chat-widget/athena-chat-widget.iife.js"></script>
<script>
  AthenaChat.init({
    serverUrl: 'https://your-server.com',
    apiKey: 'your-api-key'
  });
</script>

Via NPM (ES Module)

import AthenaChat from 'athena-chat-widget'

const widget = AthenaChat.init({
  serverUrl: 'https://your-server.com',
  apiKey: 'your-api-key',
  position: 'right',
  title: '智能助手'
})

Auto Init

Set window.AthenaChatConfig before loading the script to auto-initialize:

<script>
  window.AthenaChatConfig = {
    serverUrl: 'https://your-server.com',
    apiKey: 'your-api-key'
  };
</script>
<script src="https://unpkg.com/athena-chat-widget/athena-chat-widget.iife.js"></script>

Configuration

| Option | Type | Default | Description | |---|---|---|---| | serverUrl | string | required | Server URL | | apiKey | string | required | API Key | | position | 'left' \| 'right' | 'right' | Widget position | | offsetX | number | 24 | Horizontal offset (px) | | offsetY | number | 24 | Vertical offset (px) | | width | number | 420 | Panel width (px) | | height | number | 640 | Panel height (px) | | bubbleSize | number | 56 | Bubble button size (px) | | bubbleColor | string | '#692ee6' | Bubble button color | | bubbleIcon | string | '' | Custom icon URL | | title | string | '智能助手' | Widget title | | zIndex | number | 99999 | CSS z-index |

API

const widget = AthenaChat.init({ serverUrl: '...', apiKey: '...' })

widget.open()    // Open chat panel
widget.close()   // Close chat panel
widget.toggle()  // Toggle chat panel
widget.destroy() // Remove widget from DOM

License

MIT