As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

# Segmente o botão e o quadro do widget do Amazon Connect com CSS/ JavaScript
<a name="target-widget-button"></a>

O widget de comunicação renderiza o botão do open/close widget e o quadro do widget diretamente no site anfitrião. Há seletores específicos que você pode usar para direcionar esses elementos usando CSS ou referenciá-los. JavaScript 

**dica**  
Para atualizar as cores do botão do widget ou os estilos do próprio widget, use o [site de administração do Amazon Connect](add-chat-to-website.md#customize-chat-widget). Para acessar estilos mais personalizáveis, você pode [transmitir estilos personalizados](pass-custom-styles.md) diretamente para o widget de comunicação.

## Elemento de widget IDs e exemplos
<a name="widget-elementid"></a>

As imagens a seguir mostram como o botão do widget de chat aparece na tela do usuário. A primeira imagem mostra o botão Abrir para abrir o widget de chat. A segunda imagem mostra o botão Fechar para fechar o widget de chat.

![\[Side-by-side imagens do widget de bate-papo para abrir e fechar a janela de bate-papo.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/widget-elements.png)


1.  Botão para abrir o widget: `#amazon-connect-open-widget-button` 

1. Botão para fechar o widget: `#amazon-connect-close-widget-button`

1. Quadro do widget: `#amazon-connect-widget-frame`

   1. Quadro do widget enquanto está aberto: `#amazon-connect-widget-frame.show`

   1. Quadro do widget enquanto está fechado: `#amazon-connect-widget-frame:not(.show)`

Veja a seguir um exemplo de folha de estilos CSS que modifica estes elementos:

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

A seguir está um exemplo de referência a esses elementos usando 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)");
```