本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 使用 CSS/ 瞄准你的 Amazon Connect 小工具按钮和框架 JavaScript
<a name="target-widget-button"></a>

通信控件将控 open/close 件按钮和控件框架直接呈现在主机网站上。您可以使用特定的选择器来使用 CSS 定位这些元素或在中 JavaScript引用它们。

**提示**  
要更新小部件按钮的颜色或小部件本身的样式，请使用 [Amazon Connect 管理网站](add-chat-to-website.md#customize-chat-widget)。要实现更可定制的样式，您可以直接[传递自定义样式](pass-custom-styles.md)给通信小部件。

## 控件元素 IDs 和示例
<a name="widget-elementid"></a>

下图显示聊天小部件按钮在用户屏幕上的显示效果。第一个图显示“打开”按钮，用于打开聊天小部件。第二个图显示“关闭”按钮，用于关闭聊天小部件。

![\[Side-by-side 用于打开和关闭聊天窗口的聊天小部件的图像。\]](http://docs.aws.amazon.com/zh_cn/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)");
```