無標題網頁 SDK 可讓您彈性擴充及自訂貴公司的支援服務體驗，滿足自身需求。這個 SDK 包含所有常見的網頁 SDK 功能，並提供建構 UI 和 UX 的能力，以支援這些功能。
如要安裝及使用無標題網頁 SDK，貴機構的網頁開發團隊必須提供支援。為順利完成整合並發揮最佳成效，Google 建議您請合格人員參與。
在軟體開發領域，「無頭」是指前端呈現層 (即「頭」) 與後端邏輯和功能分離的架構。在無頭架構中，後端 (又稱「無頭」部分) 提供 API，讓您使用其功能和服務。
例如自訂工作流程自動化。使用者發起即時通訊時，系統會觸發 on("chat.message") 事件。您可以根據收到的特定即時通訊訊息，定義自訂自動化觸發條件。舉例來說，如果使用者在即時通訊中輸入「Escalate」，事件處理常式可以自動將即時通訊工作階段轉給更高層級的支援團隊，及時處理重大問題。
本指南會逐步說明如何安裝 SDK、整合功能及使用方式。如要瞭解如何使用 API，請參閱無頭網頁 SDK API 說明文件。如要查看可用的活動清單，請前往活動頁面。
安裝無圖形使用者介面的網頁 SDK
如要安裝無標題網頁 SDK，請在專案中使用下列程式碼片段：
npm install @ujet/websdk-headless --save
使用無頭網頁 SDK
如要使用無標題 Web SDK，請參閱提供的範例程式碼：
import { Client } from "@ujet/websdk-headless"
const client = new Client({ ... })
async function authenticate() {
const resp = await fetch("/your-auth-endpoint")
const data = await resp.json()
return { token: data.token }
}
const client = new Client({
companyId: "YOUR-COMPANY-ID",
tenant: "YOUR-TENANT-NAME",
authenticate: authenticate,
})
// const company = await client.getCompany()
// const menus = await client.getMenus()
Client 類別接受多個選項 (您可以根據需求自訂)：
interface ClientOption {
companyId: string;
authenticate: () => Promise<TokenResponse>;
tenant?: string;
host?: string;
lang?: string;
bridge?: string;
cobrowse?: {
enabled: boolean;
messages?: CobrowseMessages;
api?: string;
license?: string;
trustedOrigins?: string[];
capabilities?: string[];
registration?: boolean;
redactedViews?: string[];
unredactedViews?: string[];
};
}
啟用記錄功能
在實作和測試期間，可能需要在控制台記錄中蒐集額外資訊。如要為無標題 SDK 啟用記錄功能，請將下列程式碼新增至網頁應用程式，匯入
Logger 和 consoleLoggerHandler：
import {Logger, consoleLoggerHandler } from '@ujet/websdk-headless'
Logger.addHandler(consoleLoggerHandler)
設定分享螢幕畫面
您可以使用無頭網頁 SDK 啟用及設定螢幕分享功能。
下列程式碼範例說明如何啟用螢幕分享功能：
new Client({
// ...
cobrowse: {
enabled: true,
license: 'YOUR_SCREEN_SHARE_LICENSE'
}
})
下列程式碼範例顯示畫面分享的選項：
interface CobrowseOption {
enabled: boolean
template?: string
confirmSessionTemplate?: string
confirmRemoteControlTemplate?: string
confirmFullDeviceTemplate?: string
sessionControlsTemplate?: string
root?: Element
messages?: {
confirmSessionTitle: string;
confirmSessionContent: string;
confirmRemoteControlTitle: string;
confirmRemoteControlContent: string;
confirmFullDeviceTitle: string;
confirmFullDeviceContent: string;
allowText: string;
denyText: string;
endSessionText: string;
}
api?: string
license?: string
trustedOrigins?: string[]
capabilities?: string[]
registration?: boolean
redactedViews?: string[]
unredactedViews?: string[]
}
自訂範本
您可以使用上述程式碼範例中的 template 選項，自訂「分享畫面」對話方塊範本。
以下範例顯示預設範本：
<dialog open class="cobrowse-dialog">
<h1>$title</h1>
<div class="cobrowse-dialog_content">$content</div>
<div class="cobrowse-dialog_footer">
<button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
<button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
</div>
</dialog>
您可以使用這個範本設定對話方塊，要求使用者核准下列事項：
發起分享螢幕畫面活動
啟動遠端控制分享螢幕畫面工作階段
啟動裝置的完整螢幕分享工作階段
範本選項如下：
confirmSessionTemplate：用於確認螢幕分享工作階段。confirmRemoteControlTemplate：用於確認遠端控制螢幕分享工作階段。confirmFullDeviceTemplate。確認完整裝置螢幕分享工作階段。sessionControlsTemplate：工作階段控制項按鈕。以下是預設範本：<button class="cobrowse-end js-cobrowse-end">$end</button>
訊息
自訂範本會使用下列訊息變數：
$title$content$allow$deny
以下範例說明如何套用這些變數：
{
confirmSessionTitle: string; // $title
confirmSessionContent: string; // $content
confirmRemoteControlTitle: string; // $title
confirmRemoteControlContent: string; // $content
confirmFullDeviceTitle: string; // $title
confirmFullDeviceContent: string; // $content
allowText: string; // $allow
denyText: string; // $deny
endSessionText: string; // $end
}
以下範例顯示英文變數的預設值：
{
"confirmSessionTitle": "Screen Share Session Request",
"confirmSessionContent": "Do you want to share your current screen with the agent?",
"endSessionText": "End Screen Share Session",
"confirmRemoteControlTitle": "Remote Access Request",
"confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
"confirmFullDeviceTitle": "Screen Share Request",
"confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
"allowText": "Allow",
"denyText": "Deny"
}
自訂資料設定
您可以透過 custom_data 選項，將任意鍵/值組合資料傳遞至網頁 SDK。
用量
建立對話時，您可以提供自訂資料，格式為物件 (未簽署) 或字串 (已簽署)：
interface ChatRequest {
lang?: string;
trigger_id?: string;
ticket_id?: string;
email?: string;
greeting?: string;
cobrowsable?: boolean;
custom_data?: {
signed?: string;
unsigned?: Record<string, any>;
};
}
請參閱以下範例：
const custom_data = {
unsigned: {
version: {
label: 'Version',
value: '1.0.0'
}
},
signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}
try {
const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
// handle error
}
轉移外部聊天機器人
在某些情況下，您可能希望保留其他即時通訊服務供應商的記錄和互動內容。您可以使用 custom_data object 執行這項操作。
請參閱以下範例：
const custom_data = {
unsigned: {
external_chat_transfer: {
greeting_override: "Please hold while we connect you with a human agent.",
agent: {
name: "Agent Name",
avatar: "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
},
transcript: [
{
sender: "agent",
timestamp: "2021-03-15 12:00:00Z",
content: [
{
type: "text",
text: "Hello! How can I help you today?"
},
{
type: "buttons",
buttons: [
{
label: "Create New Order",
selected: false
},
{
label: "Check Order Status",
selected: true
},
{
label: "Check Account Balance",
selected: false
},
]
}
]
},
{
sender: "end_user",
timestamp: "2021-03-15 12:00:15Z",
content: [
{
type: "text",
text: "Check Order Status"
}
]
},
{
sender: "agent",
timestamp: "2021-03-15 12:00:16Z",
content: [
{
type: "text",
text: "I can help you with that, what's your order number?"
}
]
},
{
sender: "end_user",
timestamp: "2021-03-15 12:00:20Z",
content: [
{
type: "media",
media: {
type: "image",
url: "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
}
}
]
}
]
}
},
signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}
try {
const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
// handle error
}
參考實作
如需網頁 SDK 的參考實作方式，請參閱 GitHub 上的 ccaas-web-headless-sdk-sample。
這個存放區包含使用 CCAI Platform Web Headless SDK 建構的即時通訊應用程式示範。這個範例展示基本的用戶端/伺服器架構，其中 Node.js 後端會處理安全驗證和設定傳送作業，而純 JavaScript 前端則提供即時通訊使用者介面。