View a markdown version of this page

将您的 “连接客户” 小工具按钮和框架定位为 CSS/JavaScript - Amazon Connect Customer
小部件元素 ID 和示例

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

将您的 “连接客户” 小工具按钮和框架定位为 CSS/JavaScript

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

提示

要更新小部件按钮的颜色或小部件本身的样式，请使用 Connect Customer 管理网站。要实现更可定制的样式，您可以直接传递自定义样式给通信小部件。

小部件元素 ID 和示例

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

Side-by-side 用于打开和关闭聊天窗口的聊天控件的图像。

  1. “打开”小部件按钮：#amazon-connect-open-widget-button

  2. “关闭”小部件按钮：#amazon-connect-close-widget-button

  3. 小部件框架：#amazon-connect-widget-frame

    1. 打开时的小部件框架：#amazon-connect-widget-frame.show

    2. 关闭时的小部件框架：#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)");