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

使用 CSS/ 瞄准你的 Amazon Connect 小工具按钮和框架 JavaScript

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

控件元素 IDs 和示例

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

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