本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

使用 CSS/JavaScript 將 Amazon Connect 小工具按鈕和框架設為目標

通訊小工具會直接在託管網站上呈現開啟/關閉小工具按鈕和小工具框架。您可以使用特定選取器，使用 CSS 將這些元素設為目標，或在 JavaScript 中加以參考。

小工具元素 ID 和範例

下圖顯示聊天小工具按鈕在使用者畫面上的顯示情形。第一個影像顯示用來開啟聊天小工具的 [開啟] 按鈕。第二個影像顯示用來關閉聊天小工具的 [關閉] 按鈕。

以下是修改這些元素的 CSS 樣式表範例：

/* Target widget button while widget is minimized */
#amazon-connect-open-widget-button {
  ...
}

/* Target widget button while widget is showing */
#amazon-connect-close-widget-button {
  ...
}

/* Target widget frame */
#amazon-connect-widget-frame {
  ...
}

/* Target widget frame while it is showing */
#amazon-connect-widget-frame.show {
  ...
}

/* Target widget frame while it is minimized */
#amazon-connect-widget-frame:not(.show) {
  ...
}

以下是使用 JavaScript 參考這些元素的範例：

const openWidgetButton = document.getElementById("amazon-connect-open-widget-button");
const closeWidgetButton = document.getElementById("amazon-connect-close-widget-button");

const widgetFrame = document.querySelector("#amazon-connect-widget-frame");
const openWidgetFrame = document.querySelector("#amazon-connect-widget-frame.show");
const hiddenWidgetFrame = document.querySelector("#amazon-connect-widget-frame:not(.show)");