JSPM

Package Exports

smartchat-widget
smartchat-widget/dist/smartchat-widget.esm.js
smartchat-widget/dist/smartchat-widget.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (smartchat-widget) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

企業級智能客服嵌入套件 - 5分鐘讓任何網站擁有專業AI客服功能

📦 安裝

NPM 安裝 (推薦)

npm install smartchat-widget

CDN 使用

<script src="https://unpkg.com/smartchat-widget@latest/dist/smartchat-widget.min.js"></script>

🚀 快速開始

🌐 HTML / 原生 JavaScript

<script>
  window.SmartChatConfig = {
    clientId: 'your-client-id',
    theme: { primaryColor: '#007bff' }
  };
</script>
<script src="https://unpkg.com/smartchat-widget@latest/dist/smartchat-widget.min.js"></script>

⚡ Angular 12+ 企業級整合

npm install smartchat-widget

🎯 方法1: 動態導入 (推薦)

// app.component.ts
import { Component, OnInit } from '@angular/core';

declare global {
  interface Window {
    SmartChatWidget: any;
  }
}

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>我的企業應用</h1>
      <button (click)="openChat()" [disabled]="!isReady">
        {{ isReady ? '打開客服' : '載入中...' }}
      </button>
    </div>
  `
})
export class AppComponent implements OnInit {
  private widget: any;
  isReady = false;

  async ngOnInit() {
    await this.initializeWidget();
  }

  private async initializeWidget() {
    try {
      // 動態載入 (Angular 12+)
      const { SmartChatWidget } = await import('smartchat-widget');
      this.setupWidget(SmartChatWidget);
    } catch (error) {
      console.warn('動態導入失敗，使用CDN載入:', error);
      this.loadViaCDN();
    }
  }

  private setupWidget(SmartChatWidget: any) {
    this.widget = new SmartChatWidget({
      clientId: 'your-client-id',
      theme: { primaryColor: '#007bff' },
      ui: { showHeader: true, enableSound: false }, // 企業環境友善
      debug: false // 生產環境
    });
    this.isReady = true;
  }

  private loadViaCDN() {
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/smartchat-widget@latest/dist/smartchat-widget.umd.min.js';
    script.onload = () => this.setupWidget((window as any).SmartChatWidget);
    document.head.appendChild(script);
  }

  openChat() {
    this.widget?.open();
  }
}

🎯 方法2: angular.json 配置 (IE 11 友善)

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/smartchat-widget/dist/smartchat-widget.umd.min.js"
            ]
          }
        }
      }
    }
  }
}

⚛️ React 使用方式

import React, { useEffect, useRef } from 'react';

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

  useEffect(() => {
    async function initWidget() {
      const { SmartChatWidget } = await import('smartchat-widget');
      
      widgetRef.current = new SmartChatWidget({
        clientId: 'your-client-id',
        theme: { primaryColor: '#007bff' }
      });
    }
    
    initWidget();
  }, []);

  return (
    <div>
      <h1>我的 React 應用</h1>
      <button onClick={() => widgetRef.current?.open()}>
        打開客服
      </button>
    </div>
  );
}

💚 Vue.js 使用方式

<template>
  <div>
    <h1>我的 Vue 應用</h1>
    <button @click="openChat">打開客服</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      widget: null
    }
  },
  
  async mounted() {
    const { SmartChatWidget } = await import('smartchat-widget');
    
    this.widget = new SmartChatWidget({
      clientId: 'your-client-id',
      theme: { primaryColor: '#007bff' }
    });
  },
  
  methods: {
    openChat() {
      this.widget?.open();
    }
  }
}
</script>

🛠️ 開發指南

安裝依賴

npm install

開發模式

npm run dev

建置生產版本

npm run build

# 建置後開啟測試頁面
open example.html

📦 輸出檔案

建置後會在 dist/ 目錄產生以下檔案：

smartchat-widget.js - UMD格式 (瀏覽器直接使用)
smartchat-widget.min.js - 壓縮版本 (~45KB)
smartchat-widget.esm.js - ES Module格式
smartchat-widget.d.ts - TypeScript類型定義

🎯 使用方式

CDN 嵌入 (推薦)

<script>
  window.SmartChatConfig = {
    clientId: 'your-client-id',
    theme: { primaryColor: '#007bff' }
  };
</script>
<script src="https://cdn.smartchat.com/widget/smartchat-widget.min.js"></script>

NPM 安裝

npm install smartchat-widget

import SmartChatWidget from '@smartchat/widget';

const widget = new SmartChatWidget({
  clientId: 'your-client-id'
});

⚙️ 配置選項

interface SmartChatConfig {
  clientId: string;                    // 必填：客戶端ID
  apiEndpoint?: string;                // API端點 (預設: api.smartchat.com)
  theme?: {
    primaryColor?: string;             // 主題顏色
    position?: 'bottom-right' | ...;   // Widget位置
  };
  ui?: {
    welcomeMessage?: string;           // 歡迎訊息
    placeholder?: string;              // 輸入框提示
  };
  features?: {
    quickReplies?: boolean;            // 快速回覆
    typing?: boolean;                  // 輸入指示
  };
  debug?: boolean;                     // 開發模式
}

🎮 程式控制

const widget = new SmartChatWidget(config);

// 控制方法
widget.open();           // 打開
widget.close();          // 關閉
widget.toggle();         // 切換
widget.send('message');  // 發送訊息
widget.clearChat();      // 清空聊天
widget.destroy();        // 銷毀

// 事件監聽
widget.on('initialized', () => console.log('初始化完成'));
widget.on('message-added', (data) => console.log(data.message));

🌐 瀏覽器支援

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+
IE 11 (基礎支援)

📋 開發指南

修改 src/smartchat-widget.ts
執行 npm run dev 監聽變化
在 example.html 中測試
執行 npm run build 打包

🔧 技術架構

TypeScript - 強型別開發
Rollup - 模組打包
零依賴 - 不依賴任何外部庫
Shadow DOM - 完全樣式隔離

由 SmartChat 團隊用 ❤️ 製作

smartchat-widget