JSPM – smartchat-widget@1.0.0

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 使用方式

npm install smartchat-widget

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

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

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>我的 Angular 應用</h1>
      <button (click)="openChat()">打開客服</button>
      <!-- SmartChat Widget 會自動加載到這裡 -->
    </div>
  `
})
export class AppComponent implements OnInit {
  private widget: any;

  async ngOnInit() {
    // 動態載入 SmartChat Widget
    const { SmartChatWidget } = await import('smartchat-widget');
    
    this.widget = new SmartChatWidget({
      clientId: 'your-client-id',
      theme: {
        primaryColor: '#007bff',
        position: 'bottom-right'
      },
      ui: {
        welcomeMessage: '您好！我是智能助理，有什麼可以幫助您的嗎？'
      },
      debug: true
    });

    // 監聽事件
    this.widget.on('initialized', () => {
      console.log('SmartChat Widget 已初始化');
    });
  }

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

⚛️ 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