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á.

# Personalizar o comportamento de inicialização do widget e o ícone do botão para seu site hospedado no Amazon Connect
<a name="customize-widget-launch"></a>

Para personalizar ainda mais a forma como seu site renderiza e inicia o ícone do widget hospedado, você pode configurar o comportamento de inicialização e ocultar o ícone padrão. Por exemplo, você pode iniciar programaticamente o widget a partir de um elemento de botão **Fale conosco** que é renderizado em seu site.

**Topics**
+ [Como configurar o comportamento de inicialização personalizado para o widget](#config-widget-launch)
+ [Restrições e opções com suporte](#launch-options-constraints)
+ [Configurar a inicialização do widget para casos de uso personalizados](#launch-usage)
+ [Habilitar a persistência da sessão de chat em todas as guias](#chat-persistence-across-tabs)

## Como configurar o comportamento de inicialização personalizado para o widget
<a name="config-widget-launch"></a>

Para transmitir um comportamento de inicialização personalizado, use o bloco de código de exemplo a seguir e incorpore-o ao seu widget. Todos os campos mostrados no exemplo a seguir são opcionais e qualquer combinação pode ser usada.

```
amazon_connect('customLaunchBehavior', {
    skipIconButtonAndAutoLaunch: true,
    alwaysHideWidgetButton: true,
    programmaticLaunch: (function(launchCallback) {
        var launchWidgetBtn = document.getElementById('launch-widget-btn');
        if (launchWidgetBtn) {
            launchWidgetBtn.addEventListener('click', launchCallback);
            window.onunload = function() {
            launchWidgetBtn.removeEventListener('click', launchCallback);
            return;
            }
        }
    })
});
```

## Restrições e opções com suporte
<a name="launch-options-constraints"></a>

A tabela a seguir lista as opções de comportamento de inicialização personalizado com suporte. Os campos são opcionais e qualquer combinação pode ser usada.


| Nome da opção | Tipo | Description | Valor padrão  | 
| --- | --- | --- | --- | 
|  `skipIconButtonAndAutoLaunch`  | Booleano  | Uma bandeira para enable/disable o lançamento automático do widget sem que o usuário clique no carregamento da página. | não definido | 
|  `alwaysHideWidgetButton`  | Booleano  | Uma bandeira para enable/disable o botão do ícone do widget a partir da renderização (a menos que haja uma sessão de bate-papo em andamento). | não definido | 
|  `programmaticLaunch`  | Função  |  | não definido | 

## Configurar a inicialização do widget para casos de uso personalizados
<a name="launch-usage"></a>

### Botão de inicialização de widget personalizado
<a name="custom-launch-button"></a>

O exemplo a seguir mostra as alterações que você precisaria fazer no widget para configurar a inicialização programática para abrir somente quando o usuário escolhesse um elemento de botão personalizado renderizado em qualquer lugar do seu site. Por exemplo, eles podem escolher um botão chamado **Fale conosco** ou **Converse conosco**. Opcionalmente, você pode ocultar o ícone padrão do widget do Amazon Connect até que o widget seja aberto.

```
<button id="launch-widget-btn">Chat With Us</button>
```

```
<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true,
        alwaysHideWidgetButton: true,
        programmaticLaunch: (function(launchCallback) {
            var launchWidgetBtn = document.getElementById('launch-widget-btn');
            if (launchWidgetBtn) {
                launchWidgetBtn.addEventListener('click', launchCallback);
                window.onunload = function() {
                launchWidgetBtn.removeEventListener('click', launchCallback);
                return;
                }
            }
        }),
    });
</script>
```

### Suporte de hiperlinks
<a name="hyperlink-support"></a>

O exemplo a seguir mostra as alterações que você precisaria fazer na configuração do widget `auto-launch`, que abre o widget sem esperar que o usuário clique. Você pode implantar em uma página hospedada pelo seu site para criar um hiperlink compartilhável.

```
https://example.com/contact-us?autoLaunchMyWidget=true
```

```
<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
</script>
```

### Carregar ativos do widget quando o botão é clicado
<a name="load-assets"></a>

O exemplo a seguir mostra as alterações que você precisaria fazer no widget para acelerar o carregamento da página do seu site, buscando os ativos estáticos do widget quando um usuário clica no botão **Converse conosco**. Normalmente, apenas uma pequena porcentagem dos clientes que visitam uma página de **Fale conosco** abre o widget do Amazon Connect. O widget pode estar adicionando latência no carregamento da página ao buscar arquivos do CDN, mesmo que os clientes nunca abram o widget.

Uma solução alternativa é executar o código do snippet de forma assíncrona (ou nunca) ao clicar no botão. 

```
<button id="launch-widget-btn">Chat With Us</button>
```

```
var buttonElem = document.getElementById('launch-widget-btn');

buttonElem.addEventListener('click', function() {
    (function(w, d, x, id){
        s=d.createElement("script");
        s.src="./amazon-connect-chat-interface-client.js"
        s.async=1;
        s.id=id;
        d.getElementsByTagName("head")[0].appendChild(s);
        w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
    })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
    amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
    amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
});
```

### Iniciar um novo chat em uma janela do navegador
<a name="new-chat-browser-window"></a>

O exemplo a seguir mostra as alterações que você precisaria fazer no widget para abrir uma nova janela do navegador e iniciar automaticamente o chat em tela cheia.

```
<button id="openChatWindowButton">Launch a Chat</button>
```

```
<script> // Function to open a new browser window with specified URL and dimensions
    function openNewWindow() {
        var url = 'https://mycompany.com/support?autoLaunchChat=true';

        // Define the width and height
        var width = 300;
        var height = 540;

        // Calculate the left and top position to center the window
        var left = (window.innerWidth - width) / 2;
        var top = (window.innerHeight - height) / 2;

        // Open the new window with the specified URL, dimensions, and position
        var newWindow = window.open(url, '', 'width=${width}, height=${height}, left=${left}, top=${top}');
    }

    // Attach a click event listener to the button
    document.getElementById('openChatWindowButton').addEventListener('click', openNewWindow);
</script>
```

## Habilitar a persistência da sessão de chat em todas as guias
<a name="chat-persistence-across-tabs"></a>

Por padrão, se um chat for aberto em uma guia e, depois, o usuário abrir uma nova guia e iniciar outro chat, um novo chat será iniciado em vez de se conectar ao chat existente. Você poderá habilitar a persistência da sessão de chat em todas as guias se quiser que o usuário se conecte ao chat existente na guia inicial. 

A sessão de chat é salva no armazenamento da sessão no navegador, na variável `persistedChatSession`. Você precisará copiar esse valor no armazenamento da sessão da nova guia quando o widget for inicializado pela primeira vez. Veja as instruções.

Para se conectar à mesma sessão de chat quando o usuário navega para subdomínios diferentes, você pode definir a propriedade de domínio do cookie. Por exemplo, você tem dois subdomínios: `domain1.example.com` e `domain2.example.com`. É possível adicionar a propriedade `domain=.example.com` para que o cookie possa ser acessado de todos os subdomínios.

1. Copie o código a seguir ao lado das outras funções amazon\$1connect no trecho do widget hospedado. Isso usa os manipuladores de eventos `registerCallback` para armazenar o `persistedChatSession` como um cookie para que possam ser acessados na nova guia. Também limpa o cookie quando o chat termina.

   

   ```
   amazon_connect('registerCallback', {
   'CONNECTION_ESTABLISHED': (eventName, { chatDetails, data }) => {
    document.cookie = `activeChat=${sessionStorage.getItem("persistedChatSession")}; SameSite=None; Secure`;
   }, 
   'CHAT_ENDED': () => {
     document.cookie = "activeChat=; SameSite=None; Secure";
   }
   });
   ```

1. Recupere o valor do cookie, se ele existir, e defina o valor de armazenamento da sessão na nova guia.

   ```
   const cookie = document.cookie.split('; ').find(c => c.startsWith('activeChat='));
   if (cookie) {
     const activeChatValue = cookie.split('=')[1];
     sessionStorage.setItem('persistedChatSession', activeChatValue);
   }
   
   //Your hosted widget snippet should be on this page
   ```