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

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

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

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

ウィジェット要素 IDsと例

次の図は、チャットウィジェットボタンがユーザーの画面にどのように表示されるかを示しています。最初の画像は、チャットウィジェットを開くための Open ボタンを示しています。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)");