翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

CSS/JavaScript を使用して Amazon Connect ウィジェットのボタンとフレームをターゲットにする

コミュニケーションウィジェットの開閉ボタンとウィジェットフレームは、ホストウェブサイト上で直接レンダリングされます。特定のセレクタを使用すると、これらの要素を CSS を使ってターゲットにしたり、JavaScript で参照したりできます。

ウィジェットの要素 ID と例

次の図は、チャットウィジェットのボタンがユーザーの画面にどのように表示されるかを示しています。最初の図は、チャットウィジェットを開くための [開く] ボタン、2 番目の図は、チャットウィジェットを閉じるための [閉じる] ボタンを示しています。

これらの要素を変更する 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)");