Web 會談開發概觀

如果您熟悉 JavaScript 程式碼，則可以使用 Web 會談 API 來自訂及延伸 Web 會談。您也可以使用 WebView，在行動式應用程式中內嵌 Web 會談。

如需 Web 會談 API 的詳細參照資訊，請參閱 Web 會談開發人員文件。

若要將 Web 會談小組件新增至您的網站或行動式應用程式中的 WebView，您只需在 HTML 原始檔中內嵌產生的 Script 元素 (如需內嵌 Script 的相關資訊，請參閱在頁面上內嵌 Web 會談)。在此內嵌 Script 內，您可以使用 Web 會談 API 來自訂或延伸 Web 會談。

Web 會談 API 由數個元件組成:

配置物件: 內嵌 Script 定義名為 watsonAssistantChatOptions 的配置物件，其指定 Web 會談小組件的配置物件。透過編輯配置物件，您可以在呈現之前自訂 Web 會談的外觀及行為。如需可用配置選項的相關資訊，請參閱 Web API 參考資料中的配置選項物件。
實例方法:Web 會談實例方法提供 Web 會談小組件的低階控制項。您可以使用實例方法來實作自訂行為，例如變更 Web 會談小組件的開啟方式、顯示及隱藏內容，以及設定身分資訊。如需可用實例方法的相關資訊，請參閱 Web 會談 API 參考資料中的方法及內容清單。
事件:Web 會談事件系統可讓您的網站回應 Web 會談事件 (例如開啟或關閉 Web 會談視窗，傳送或接收訊息)。透過訂閱事件，您可以實作自訂行為，甚至截取及修改訊息內容。如需事件系統的相關資訊，請參閱 Web 會談 API 參考資料中的事件。

如果您想要使用 Web 會談 API 來自訂 Web 會談實作，則不必從頭開始。提供指導教學，其中顯示一般 Web 會談自訂作業的範例。如需相關資訊，請參閱 Web 會談開發指導教學。

開發作業

您可以使用 Web 會談 API，以下列方式自訂及延伸 Web 會談:

Web 會談樣式及內容

自訂 Web 會談的外觀
自訂主畫面
自訂字串
支援全球觀眾

開啟、關閉及呈現 Web 會談視窗

取代預設啟動程式
保持 Web 會談一律開啟
變更 Web 會談的大小或位置
將 Web 會談新增至行動應用程式

自訂交談

截取及修改訊息
呈現自訂回應類型
實作聯絡中心整合

管理資料

管理使用者身分資訊

安全與管理

保護 Web 會談安全
控制 Web 會談版本

如需 Web 會談整合的其他範例，請參閱這裡。

Web 會談樣式及內容

自訂 Web 會談的外觀

如果您想要在 Web 會談設定中的樣式標籤上可用的選項之外自訂 Web 會談的樣式和外觀，則可以透過選擇不同的 Carbon Design 佈景主題來執行此動作。

支援的佈景主題是 IBM Carbon Design所定義的顏色佈景主題。若要設定 Carbon 佈景主題，請使用 carbonTheme 配置選項。

您也可以在佈景主題內設定個別變數，以自訂特定的使用者介面元素。例如，會談視窗中顯示的文字會使用字型 IBMPlexSans, Arial, Helvetica, sans-serif。如果您想要使用不同的字型，可以使用 updateCSSVariables() 實例方法來指定它。

自訂主畫面

主畫面會歡迎客戶，並選擇性地顯示建議的交談入門範本清單。您可以自訂主畫面的樣式和內容:

若要將元素新增至主畫面，您可以使用 writeableElements.homeScreenAfterStartersElement 佈景主題變數來定義自訂 HTML:
```
instance.writeableElements.homeScreenAfterStartersElement.innerHTML =
  '<div class="MyCustomClass">This is my custom element</div>';
```
範例: 如需顯示如何將自訂元素新增至主畫面的工作範例，請參閱 watsonx Assistant Web 會談的主畫面自訂元素。
若要變更主畫面樣式，請使用 CSS Helper 類別。

自訂字串

您可以自訂字串，以定義 Web 會談所顯示的各種標籤及寫在程式中的詞組。若要自訂字串，請使用 updateLanguagePack() 實例方法來取代現行語言套件中的字串。如需相關資訊，請參閱語言。

支援全球觀眾

依預設，Web 會談所顯示的字串是英文。若要變更為不同的語言，請使用 updateLanguagePack() 實例方法，將現行語言套件取代為其中一個可用的翻譯語言套件。如需相關資訊，請參閱在 Web 會談中支援廣域對象。

開啟、關閉及呈現 Web 會談視窗

取代預設啟動程式

若要與網站更好地整合，您可能想要將內建啟動程式圖示取代為用於開啟 Web 會談的不同機制。若要隱藏預設啟動程式，請將 showLauncher 配置選項設為 false。若要根據部分其他互動開啟 Web 會談，請使用 openWindow 實例方法。

指導教學: 如需顯示如何實作自訂啟動程式的指導教學，請參閱使用自訂啟動程式。

保持 Web 會談一律開啟

如果您想要讓 Web 會談一律在頁面上開啟，請使用 openChatByDefault 配置開啟，以呈現已開啟會談視窗的頁面，並使用 hideCloseButton 選項來防止客戶關閉該頁面。

變更 Web 會談的大小或位置

您的網站設計可能需要您變更 Web 會談視窗在網站上呈現的位置及方式。例如，您可能想要它出現在頁面上的不同位置、不同大小，或巢狀在頁面上的另一個元素內。

若要變更 Web 會談視窗的大小，您可以使用 updateCSSVariables() 實例方法來修改 CSS 樣式。

如果您需要變更 Web 會談視窗的位置，或需要變更超出 CSS 中容許的限制的大小，您可以使用自訂 DOM 元素來包含 Web 會談視窗。若要這麼做，請使用 element 配置選項。

指導教學: 如需顯示如何在自訂元素中呈現 Web 會談的指導教學，請參閱指導教學: 自訂 Web 會談的大小及位置。

將 Web 會談新增至行動式應用程式

您可以使用 WebView 搭配 JavaScript 橋接器，將 Web 會談新增至行動式應用程式。如需相關資訊，請參閱將 Web 會談新增至行動式應用程式。

自訂交談

截取及修改訊息

透過訂閱事件，您的程式碼可以截取客戶與助理之間傳送及接收的訊息，甚至修改其內容。

如果您想要在將客戶的訊息傳送給助理之前截取客戶的訊息，請訂閱 pre:receive 事件。例如，您可能想要從訊息文字中移除個人識別資訊，或將環境定義變數新增至訊息有效負載。

如果您想要截取來自助理的送入回應，然後再向客戶顯示該回應，請訂閱 pre:send 事件。例如，您可能想要新增 Web 會談特有的格式、鏈結或其他元素。

指導教學: 如需如何使用 pre:receive 事件來截取及修改送入訊息的指導教學，請參閱指導教學: 在 Web 會談中實作自訂選項按鈕。

呈現自訂回應類型

如果助理使用自訂 (user_defined) 回應類型傳送特殊化回應，則您可以實作自訂視圖，以在 Web 會談視窗中顯示這些回應。若要這樣做，請訂閱 customResponse 事件，每次收到 user_defined 回應時都會發動此事件。在事件處理程式方法中，您接著可以讀取回應的內容，並使用您自己的元素來呈現輸出。

指導教學: 如需顯示如何呈現自訂回應類型以取代預設選項回應的指導教學，請參閱指導教學: 在 Web 會談中實作自訂選項按鈕。

實作聯絡中心整合

除了內建 watsonx Assistant 整合之外，您可以使用其中一個 Web 會談入門範本套件與客服中心 (服務台) 平台整合。數個聯絡中心平台可以使用完整功能參照實作; 此外，您可以使用入門範本套件來開發與您所選擇平台的自訂整合。

如需相關資訊，請參閱新增聯絡中心支援。

管理資料

管理使用者身分資訊

Web 會談會將使用者 ID 與它傳送給助理的每一則訊息相關聯; 此使用者 ID 用於使用者型計費及其他目的。您可以容許 Web 會談為每一個使用者產生匿名 ID，也可以自行控制使用者 ID。

視您是否已啟用 Web 會談的安全而定，您可以使用 updateUserID 實例方法或 updateIdentityToken 方法來指定使用者身分資訊。

如需如何指定使用者身分資訊及其使用方式的相關資訊，請參閱在 Web 會談中管理使用者身分資訊。

安全與管理

保護 Web 會談安全

若要保護 Web 會談的安全，您可以使用「JSON Web 記號 (JWT)」來鑑別使用者並加密專用資料。如需相關資訊，請參閱保護 Web 會談安全。

控制 Web 會談版本

IBM Cloud 所管理的 Web 會談程式碼會定期更新，以改善及新增特性。依預設，內嵌 Script 會自動使用最新版本的 Web 會談。為了避免可能影響您網站的非預期變更，您可能想要控制您網站使用的 Web 會談版本，讓您有機會在正式作業中部署之前先測試每一個新版本，以便在發行新版本時避免非預期的變更。

如需 Web 會談版本化的相關資訊，請參閱控制 Web 會談版本。