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

# 使用 CSS/JavaScript 將 Amazon Connect 小工具按鈕和框架設為目標
<a name="target-widget-button"></a>

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

**提示**  
若要更新小工具按鈕的顏色，或小工具本身的樣式，請使用 [Amazon Connect 管理員網站](add-chat-to-website.md#customize-chat-widget)。如需更多可自訂的樣式，您可以直接將[自訂樣式傳遞](pass-custom-styles.md)至通訊小工具。

## 小工具元素 ID 和範例
<a name="widget-elementid"></a>

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

![\[開啟和關閉聊天視窗的聊天小工具並排影像。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/widget-elements.png)


1.  開啟小工具按鈕：`#amazon-connect-open-widget-button`

1. 關閉小工具按鈕：`#amazon-connect-close-widget-button`

1. 小工具框架：`#amazon-connect-widget-frame`

   1. 開啟時的小工具框架：`#amazon-connect-widget-frame.show`

   1. 關閉時的小工具框架：`#amazon-connect-widget-frame:not(.show)`

以下是修改這些元素的 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)");
```