Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Targetkan tombol dan bingkai widget Amazon Connect Anda dengan CSS/ JavaScript
<a name="target-widget-button"></a>

Widget komunikasi merender tombol open/close widget dan bingkai widget langsung di situs web host. Ada pemilih khusus yang dapat Anda gunakan untuk menargetkan elemen-elemen ini menggunakan CSS atau mereferensikannya. JavaScript 

**Tip**  
Untuk memperbarui warna tombol widget, atau gaya widget itu sendiri, gunakan [situs web Amazon Connect admin](add-chat-to-website.md#customize-chat-widget). Untuk gaya yang lebih dapat disesuaikan, Anda dapat [meneruskan gaya khusus](pass-custom-styles.md) langsung ke widget komunikasi.

## Elemen widget IDs dan contoh
<a name="widget-elementid"></a>

Gambar berikut menunjukkan bagaimana tombol widget obrolan muncul di layar pengguna. Gambar pertama menunjukkan tombol Buka untuk membuka widget obrolan. Gambar kedua menunjukkan tombol Tutup untuk menutup widget obrolan.

![\[Side-by-side gambar widget obrolan untuk membuka dan menutup jendela obrolan.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/widget-elements.png)


1.  Buka tombol widget: `#amazon-connect-open-widget-button` 

1. Tutup tombol widget: `#amazon-connect-close-widget-button`

1. Bingkai widget: `#amazon-connect-widget-frame`

   1. Bingkai widget saat terbuka: `#amazon-connect-widget-frame.show`

   1. Bingkai widget saat ditutup: `#amazon-connect-widget-frame:not(.show)`

Berikut ini adalah contoh dari style sheet CSS yang memodifikasi elemen-elemen ini:

```
/* 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) {
  ...
}
```

Berikut ini adalah contoh referensi elemen-elemen ini menggunakan 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)");
```