# Métodos e opções do Web V2

{% hint style="danger" %}
**A partir de 31 de outubro de 2024, todos os clientes da Chatlayer que usam o canal Web precisarão mudar para o** [**novo widget web, Web V2**](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2)**.** Isso significa que o Web V1 será removido da nossa base de código. Saiba tudo sobre [migrar do V1 para o V2](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2/from-web-v1-to-v2).
{% endhint %}

## Todos os métodos

<table data-full-width="true"><thead><tr><th width="226">Método </th><th width="331">Descrição</th><th width="255">Argumentos</th><th>Leia mais em</th></tr></thead><tbody><tr><td><code>Chatlayer.init()</code></td><td>Inicializa o widget usando as opções especificadas. Este método retorna um objeto parecido com uma promise.</td><td>(opções: <em>Opções</em>)</td><td><a href="#initialize-the-web-widget-with-options">#Inicializar o widget Web com opções</a></td></tr><tr><td><code>Chatlayer.open()</code></td><td>Abre o widget.</td><td> </td><td> </td></tr><tr><td><code>Chatlayer.close()</code></td><td>Fecha o widget.</td><td> </td><td> </td></tr><tr><td><code>Chatlayer.toggle()</code></td><td>Se o widget estiver fechado, ele o abre e vice-versa.</td><td> </td><td> </td></tr><tr><td><code>Chatlayer.destroy()</code></td><td>Destrói o widget</td><td></td><td></td></tr><tr><td><code>Chatlayer.isOpen()</code></td><td>Mostra se o widget está aberto.</td><td> </td><td> </td></tr><tr><td><code>Chatlayer.login()</code></td><td>Para federar a identidade do cliente com a do seu site ou aplicação.</td><td>(externalId: string, jwt: string)</td><td><a href="#user-authentication-with-externalid">#Autenticação do usuário com externalId</a></td></tr><tr><td><code>Chatlayer.logout()</code></td><td>Encerra a sessão e uma nova conversa começará do zero.</td><td>(externalId: string, jwt: string)</td><td><a href="#delete-the-chat-history">#Excluir o histórico de chat</a></td></tr><tr><td><code>Chatlayer.on()</code></td><td>Inscreva-se em eventos predefinidos e personalizados durante a conversa do usuário com seu bot.</td><td>(evento, (arg1, arg2) => ...)</td><td><a href="#events-sent-by-chatlayer">#Eventos enviados pelo Chatlayer</a></td></tr><tr><td><code>Chatlayer.off()</code></td><td>Pare de rastrear ou cancele a assinatura para receber os eventos definidos em <code>Chatlayer.on</code>.</td><td> </td><td> </td></tr><tr><td><code>Chatlayer.setLanguage()</code></td><td>Define o idioma atual. Somente idiomas na lista de idiomas suportados pelo seu bot serão aceitos.</td><td> </td><td><a href="#change-the-language"> #Alterar o idioma</a></td></tr><tr><td><code>Chatlayer.language()</code></td><td>O idioma atual do widget.</td><td> </td><td><a href="#change-the-language"> #Alterar o idioma</a></td></tr><tr><td><code>Chatlayer.setSessionData()</code></td><td>Define dados extras na sessão de conversa e retorna uma promise.</td><td> </td><td> <a href="#set-the-session-data">#Definir os dados da sessão</a></td></tr><tr><td><code>Chatlayer.getCustomer()</code></td><td>Recupera dados da sessão de <code>Internal.user</code> e campos customizados adicionados a ele.</td><td> </td><td> </td></tr><tr><td><code>Chatlayer.sendMessage()</code></td><td>Envia uma mensagem em nome do usuário, se ele clicar em um botão na página, por exemplo.</td><td>(texto)</td><td> </td></tr><tr><td><code>Chatlayer.track()</code></td><td>Cria um novo evento que será <a href="../../../../bot-answers/track-events-for-analytics">rastreado</a>.</td><td><p>ex.: Chatlayer.track</p><p>("view_product”, product_id: "SKU123"})</p><p> </p></td><td> </td></tr><tr><td><code>Chatlayer.trackEvent()</code></td><td>Rastrear eventos que ocorrem no seu site ou app.</td><td>(eventName: string, eventAttributes: Record&#x3C;string,any>)</td><td></td></tr><tr><td><code>Chatlayer.render()</code></td><td>Este método pode ser usado se você quiser o widget incorporado em uma página.</td><td> </td><td> </td></tr><tr><td><code>Chatlayer.startTyping()</code></td><td>Mostra o indicador de digitação</td><td>(remetente)</td><td></td></tr><tr><td><code>Chatlayer.stopTyping()</code></td><td>Oculta o indicador de digitação ativo</td><td></td><td></td></tr><tr><td><code>Chatlayer.createConversation()</code></td><td>Inicia uma nova conversa vazia mantendo as informações do cliente</td><td></td><td></td></tr><tr><td><code>Chatlayer.setDelegate()</code></td><td>Permite definir um delegate customizado para o avatar do agente e o nome exibido</td><td><code>DelegateConfig</code></td><td><a href="#setting-delegate">#Configurando um delegate</a></td></tr></tbody></table>

***

## Inicialize o widget Web com opções

`'Chatlayer.init(options: Options)'`

Isto inicializa o widget Web usando as opções especificadas. Este método retorna um [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)-like objeto.

{% hint style="warning" %}
Note que exceto pelos `on` e `off` métodos, o restante dos métodos documentados abaixo precisa ser chamado após `init` ser concluído.
{% endhint %}

### **Opções**

O `Opções` pode ser:

<table data-full-width="true"><thead><tr><th>Opção</th><th>É opcional</th><th>Valor padrão</th><th>Tipo</th><th></th></tr></thead><tbody><tr><td>channelId</td><td>Não</td><td>-</td><td><code>string</code></td><td>O ID do canal Chatlayer</td></tr><tr><td>title</td><td>Sim</td><td>-</td><td><code>string</code></td><td>O título a ser exibido no cabeçalho do widget</td></tr><tr><td>subtitle</td><td>Não</td><td>-</td><td><code>string</code></td><td>Um subtítulo opcional para mostrar abaixo do título</td></tr><tr><td>posição</td><td>Não</td><td><code>direita</code></td><td><code>direita | esquerda</code></td><td>A posição do widget. Os valores possíveis são <code>esquerda</code> ou <code>direita</code></td></tr><tr><td>buttonWidth</td><td>Não</td><td>58</td><td><code>número</code></td><td>A largura do botão do widget</td></tr><tr><td>buttonHeight</td><td>Não</td><td>58</td><td><code>número</code></td><td>A altura do botão do widget</td></tr><tr><td><a href="#customcolors">customColors</a></td><td>Sim</td><td>-</td><td><code>CoresPersonalizadas</code></td><td>Substituir as cores do widget</td></tr><tr><td>headerIconUrl</td><td>Sim</td><td>-</td><td><code>url</code></td><td>URL de uma imagem pública a ser exibida no cabeçalho</td></tr><tr><td>região</td><td>Sim</td><td>eu-west1-gcp</td><td><code>string</code></td><td>A região da sua conta Chatlayer</td></tr><tr><td><a href="#customcolors">customText</a></td><td>Sim</td><td>-</td><td><code>TextoPersonalizado</code></td><td>Substituir o texto dos diferentes elementos da UI do widget</td></tr><tr><td>enableTextInput</td><td>Não</td><td>verdadeiro</td><td><code>booleano</code></td><td>Defina como false para ocultar o campo de entrada de texto, permitindo que os usuários interajam apenas via botões e respostas rápidas</td></tr><tr><td>enableAudioInput</td><td>Não</td><td>verdadeiro</td><td><code>booleano</code></td><td>Defina como false para ocultar o botão de gravação de áudio, impedindo que os usuários enviem mensagens de áudio pelo widget</td></tr><tr><td>enableFileUpload</td><td>Não</td><td>verdadeiro</td><td><code>booleano</code></td><td>Defina como false para ocultar o botão de upload de arquivo, impedindo que os usuários enviem arquivos pelo widget. A solicitação de upload de arquivo ainda funcionará</td></tr><tr><td>enableSoundNotifications</td><td>Não</td><td>verdadeiro</td><td><code>booleano</code></td><td>Controla se o usuário receberá notificações sonoras toda vez que uma nova mensagem chegar. Também pode ser alterado pelo usuário nas configurações</td></tr><tr><td><a href="#prechatform">prechatForm</a></td><td>Não</td><td>-</td><td><code>PrechatForm</code></td><td>Coleta de informações usando um formulário antes do início do chat</td></tr><tr><td>delegate</td><td>Não</td><td>-</td><td><code>DelegateConfig</code></td><td>Defina um delegate para a conversa. Verifique <a data-mention href="#setting-a-delegate">#setting-a-delegate</a>para mais detalhes</td></tr></tbody></table>

### customColors

O `customColors` pode ser:

| **Opção**         | **Opcional** | **Valor padrão** | **Descrição**                                                                                                         |
| ----------------- | ------------ | ---------------- | --------------------------------------------------------------------------------------------------------------------- |
| brandColor        | Sim          | 007171           | Esta cor será usada no cabeçalho do messenger e no lançador. Deve ser uma cor hexadecimal de 3 ou 6 caracteres.       |
| conversationColor | Sim          | 007171           | Esta cor será usada para mensagens do cliente, respostas rápidas e ações no rodapé.                                   |
| actionColor       | Sim          | 007171           | Esta cor será usada para chamadas à ação dentro de suas mensagens. Deve ser uma cor hexadecimal de 3 ou 6 caracteres. |

### customText

`customText` pode ser:

| **Opção**        | **Opcional** | **Valor padrão**    | **Descrição**                                                         |
| ---------------- | ------------ | ------------------- | --------------------------------------------------------------------- |
| inputPlaceholder | Sim          | Enviar uma mensagem | Texto placeholder exibido no campo de entrada de mensagem             |
| botDisplayName   | Sim          | Bot                 | Este nome de exibição do bot. Use uma string vazia para ocultá-lo.    |
| agentDisplayName | Sim          | Agente              | Este nome de exibição do agente. Use uma string vazia para ocultá-lo. |

{% hint style="info" %}
Para fornecer valores diferentes para idiomas diferentes, adicione um subcampo com o código do idioma.
{% endhint %}

### prechatForm

O p`rechatForm` é uma das opções que temos no widget Web para configurar um formulário com um conjunto de campos de entrada antes de começar o chat.&#x20;

Internamente, consiste em um array de Definições de Elemento. Cada elemento pode ter o seguinte `type`, `rótulo`, `placeholder` e `variantes`.&#x20;

| **Nome**    | **Tipo** | **Descrição**                             | **Aplica-se a**                                                                                             |
| ----------- | -------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| type        | String   | O tipo de elemento                        | Um de `text`, `espaçador`, `entrada`, `selecionar`, `caixa de seleção`, `rótulo`, `área de texto`, `imagem` |
| rótulo      | String   | O texto que vai acima do campo de entrada | `entrada`, `área de texto`, `selecionar`, `caixa de seleção`                                                |
| placeholder | String   | O texto de exemplo no campo               | `entrada`, `área de texto`, `selecionar`, `caixa de seleção`                                                |
| variantes   | String   | A variante do elemento                    | Um de `primário`, `secundário` \| `rótulo`                                                                  |

<details>

<summary>Exemplo de código de como usar prechatForm e seus elementos</summary>

```
// Exemplo de código que mostra como usar prechatForm e seus elementos.  
<script type="application/javascript">Chatlayer.init(Chatlayer.init({"channelId": "SEU_CHANNEL_ID", "region": "eu-west1-gcp", "position": "right", 
            "prechatForm": {
            elements: [
              {
                id: 'age',
                type: 'input',
                label: 'Age',
                required: true,
                variant: 'number',
                placeholder: 'Placeholder text...',
              },
              {
                id: 'email',
                type: 'input',
                variant: 'email',
                label: 'Email',
                defaultValue: 'a@a.com',
                placeholder: 'Placeholder text...',
              },
              {
                id: 'website',
                type: 'input',
                label: 'Company website',
                placeholder: 'Placeholder text...',
              },
              {
                type: 'select',
                id: 'checkbox-1',
                label: 'Select Label',
                placeholder: 'Select company size',
                options: [
                  {
                    id: 'option-1',
                    type: 'option',
                    label: 'Option 1',
                  },
                  {
                    id: 'option-2',
                    type: 'option',
                    label: 'Option 2',
                  },
                  {
                    id: 'option-3',
                    type: 'option',
                    label: 'Option 3 (Disabled)',
                    disabled: true,
                  },
                ],
              },
              {
                type: 'spacer',
                size: 'md',
              },
              {
                type: 'text',
                text: 'Learn more [here](https://google.com)',
              },
              {
                type: 'checkbox',
                id: 'checkbox-2',
                // label: 'Select Label',
                required: true,
                placeholder: 'Select company size',
                options: [
                  {
                    id: 'option-1',
                    type: 'option',
                    required: true,
                    label: 'Accept Terms and conditions',
                  },
                ],
              },
            ],
          }                                        
})</script> 
```

</details>

Abaixo, um exemplo de pré-visualização de como `PrechatForm` parece no widget. O usuário pode personalizar os campos antes de iniciar o chat.

<div align="center"><figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2Fp4kUyVySesAQKKk6Ws1L%2Fimage.png?alt=media&#x26;token=69ed853c-ccce-408d-81bb-88c84bca580b" alt="" width="375"><figcaption><p>exemplo de prechatForm.</p></figcaption></figure></div>

## Outros métodos

### Autenticação de usuário com externalId

Quando o widget é inicializado, um cliente anônimo é criado automaticamente. Esse cliente pode então enviar mensagens para o bot.

Em alguns cenários, você pode querer federar a identidade do cliente com a do seu site ou aplicação. Isso é feito usando o `externalId`. Este campo identifica o usuário no seu sistema. Pode ser um endereço de e-mail, um nome de usuário, um uuid ou qualquer outro id de usuário no seu banco de dados. O mais importante é que seja único e sempre referencie uma entidade do seu sistema.

Para comprovar a autenticidade do usuário, exigimos um token JWT assinado que valide sua propriedade do widget. Caso contrário, qualquer pessoa pode se passar por seus usuários.

<details>

<summary>Criar um token JWT assinado</summary>

Para criar um token JWT assinado:

1. Faça login na sua conta Chatlayer.
2. &#x20;Crie um token de acesso em: <https://app.chatlayer.ai/settings/api-access/tokens>
3. O token terá a forma de `[keyId]:[keySecret]`. Observe que há `:` separando as duas partes do token.
4. Implemente código no lado servidor para assinar novos JWTs usando o`keyId` e `keySecret`. O cabeçalho do JWT deve especificar o ID da chave no `kid` campo. O payload do JWT deve incluir uma `channel_id` claim no payload do jwt e um `sub` claim que deve ser definido como seu id externo do usuário.

Abaixo é fornecido um exemplo em node.js usando jsonwebtoken >= 6.0.0:

```javascript
var jwt = require('jsonwebtoken');
// given token 647f1ecd48f7f8aa3abe17fd:5e39a6051B53e7Cf92CF0dB9F2Bd5Eb0
var KEY_ID = '647f1ecd48f7f8aa3abe17fd';
var KEY_SECRET = '5e39a6051B53e7Cf92CF0dB9F2Bd5Eb0';
var CHANNEL_ID = 'liiq8woe:647f1f0910f7d21246e1df75';

var signJwt = function (userId) {
  return jwt.sign(
    {
      channel_id: CHANNEL_ID,
      sub: userId,
    },
    KEY_SECRET,
    {
      header: {
        alg: 'HS256',
        typ: 'JWT',
        kid: KEY_ID,
      },
    }
  );
};
```

5. Do seu site, chame:

```javascript
Chatlayer.login(externalUserId, signedJWT).then(() => {
  // usuário autenticado
  }, err => {
// ocorreu um erro
  })`
```

</details>

| **método**           | **informações necessárias**       |
| -------------------- | --------------------------------- |
| `Chatlayer.login()`  | (externalId: string, jwt: string) |
| `Chatlayer.logout()` | (externalId: string, jwt: string) |

### Excluir o histórico do chat

Nosso novo widget, por padrão, armazena todas as conversas entre o bot e o cliente. Isso garante uma experiência semelhante a outras plataformas de mensagens. Quando os usuários contatam o bot pelo widget e o reabrem, eles podem ver todas as conversas anteriores por padrão.

Se você quiser contornar isso ou quiser que os clientes possam atualizar a conversa, você pode usar nosso `chatlayer.login` ou `chatlayer.logout` comandos para permitir que você faça isso.

#### **Criar um botão de atualização**

O script abaixo permite que você adicione um botão ao seu widget que, ao ser clicado, limpará a conversa. O botão terá o `id: RESTART_CONVERSATION` e ao ser clicado fará o logout do usuário e o logará novamente imediatamente.&#x20;

Certifique-se de que a constante esteja definida primeiro:

```
const RESTART_CONVERSATION = 'restart-conversation';
```

"customActions" deve ser uma propriedade do objeto usado para o método Chatlayer.init:

```
O próprio botão (para adicionar na seção do cabeçalho):
  customActions: [
            {
              id: RESTART_CONVERSATION,
              label: 'Restart conversation'
              image:
                "data:image/svg+xml,%3Csvg xmlns='' height='24' width='24'%3E%3Cpath d='M12 5V2L8 6l4 4V7c3.31 0 6 2.69 6 6 0 2.97-2.17 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93 0-4.42-3.58-8-8-8zM6 13c0-1.65.67-3.15 1.76-4.24L6.34 7.34A8.014 8.014 0 0 0 4 13c0 4.08 3.05 7.44 7 7.93v-2.02c-2.83-.48-5-2.94-5-5.91z' fill='white' /%3E%3C/svg%3E",
            },
          ]
```

{% hint style="info" %}
`rótulo`é um campo opcional disponível para cada CustomAction, é usado para aria-label de um elemento e é importante para aumentar a acessibilidade do seu widget.
{% endhint %}

O listener para "widget:custom\_action" deve ser adicionado após a inicialização:

```
Chatlayer.on('widget:custom_action', async ({ id }) => {
              console.log('callback do manipulador de evento widget:custom_action', { id });
              if (id === RESTART_CONVERSATION) {
                await window.Chatlayer.logout();
                await window.Chatlayer.login();
              }
            });
```

Trecho de código completo seria parecido com este exemplo:

```
const RESTART_CONVERSATION = 'restart-conversation';

Chatlayer.init(
  {"channelId": "xxxxxxxxx", 
  "region": "xx-xxxx-xx", 
  "position": "xxxxxx",
  "customActions": [
            {
              id: RESTART_CONVERSATION,
              image:
                "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 5V2L8 6l4 4V7c3.31 0 6 2.69 6 6 0 2.97-2.17 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93 0-4.42-3.58-8-8-8zM6 13c0-1.65.67-3.15 1.76-4.24L6.34 7.34A8.014 8.014 0 0 0 4 13c0 4.08 3.05 7.44 7 7.93v-2.02c-2.83-.48-5-2.94-5-5.91z' fill='white' /%3E%3C/svg%3E",
            },
          ]
  }
).then(() => {
	Chatlayer.on('widget:custom_action', async ({ id }) => {
              console.log('callback do manipulador de evento widget:custom_action', { id });
              if (id === RESTART_CONVERSATION) {
                await window.Chatlayer.logout();
                await window.Chatlayer.login();
              }
            });
})
```

### Eventos enviados pelo Chatlayer

#### `Chatlayer.on(event, (arg1, arg2) => ...)`

| **evento**             | **descrição**                                   | **arg1**       |
| ---------------------- | ----------------------------------------------- | -------------- |
| `widget:opened`        | O widget foi aberto                             | -              |
| `widget:closed`        | O widget foi fechado                            | -              |
| `widget:custom_action` | Quando um botão de ação customizada foi clicado | -              |
| `message:received`     | Uma mensagem foi recebida                       | -              |
| `message:sent`         | Uma mensagem foi enviada pelo usuário           | -              |
| `event:received`       | Um evento foi recebido                          | `EventPayload` |
| `init`                 | O widget foi inicializado                       | -              |
| `destroy`              | O widget foi destruído                          | -              |

**EventPayload**

| **Campo**            | **Tipo**           | **Descrição**                      |
| -------------------- | ------------------ | ---------------------------------- |
| generic\_event       | `GenericEvent`     | Um evento genérico                 |
| agent\_joined\_event | `AgentJoinedEvent` | Quando um agente entra na conversa |
| agent\_left\_event   | `AgentLeftEvent`   | Quando um agente sai da conversa   |

**GenericEvent**

| **Campo** | **Tipo** | **Descrição**                                                     |
| --------- | -------- | ----------------------------------------------------------------- |
| payload   | JSON     | Dados arbitrários definidos para o evento. Um objeto JSON válido. |

{% hint style="info" %}
Observe que você pode usar o [construtor JSON](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/buildabot/flow-logic/dialog-state/action-bot-dialog#json-builder) para enviar eventos genéricos da sessão do seu usuário para o site onde você hospedou o widget.
{% endhint %}

**AgentJoinedEvent**

| **Campo** | **Tipo** | **Descrição**                                   |
| --------- | -------- | ----------------------------------------------- |
| agente    | `Agente` | Representa um agente envolvido em uma conversa. |

**Agente**

| **Campo**     | **Tipo**    | **Descrição**                                                          |
| ------------- | ----------- | ---------------------------------------------------------------------- |
| display\_name | string      | Nome de exibição do agente                                             |
| picture\_url  | string      | A URL da foto do Agente.                                               |
| type          | `AgentType` | A classificação do Agente pode ser UNKNOWN\_AGENT\_TYPE, HUMAN ou BOT. |

{% hint style="info" %}
Use **`Chatlayer.off(event, (arg1, arg2) => ...)`**&#x70;ara cancelar a inscrição desses eventos.
{% endhint %}

### Alterar o idioma

#### `Chatlayer.setLanguage(language)`

Define o idioma atual. Somente idiomas na lista de idiomas suportados pelo seu bot serão aceitos.

#### `Chatlayer.language`

É o idioma atual no widget.

{% hint style="info" %}
Observe que você também pode alterar o idioma do bot usando o [iframe](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2/..#set-to-a-specific-language) no **Instalação** aba.
{% endhint %}

### Definir os dados da sessão

Se você quiser transferir dados do seu site para o chatbot, você pode adicionar esses dados à função `chatlayer` função após inicializar o widget. Todos os dados serão colocados na sessão do Chatlayer. Esses dados então podem ser usados para personalizar o fluxo do chatbot, com base em dados reais do site.

#### `Chatlayer.setSessionData(SessionData)`

Define dados extras na sessão de conversa e retorna uma promise

**Exemplo**&#x20;

```
Chatlayer.setSessionData({
  Produto: 'iPhone XS',
  });
// ou
Chatlayer.setSessionData('Product', 'iPhone XS');
```

O exemplo acima mostra como você pode definir a variável `Produto` na sessão do Chatlayer. Ela receberá o valor `iPhone XS` neste caso.

### Definindo um delegate

O widget permite que você defina um delegate para receber callbacks quando mudanças importantes ocorrerem na conversa. Para definir um delegate, passe o parâmetro delegate nas opções de init, ou use o método setDelegate. O objeto delegate pode opcionalmente conter funções beforeDisplay ou beforeSend.

Passar o delegate como parte das opções de init é o método preferido. O método setDelegate pode ser usado para alterar ou remover comportamentos do delegate depois que uma conversa foi inicializada.

```
const delegate = {
  beforeDisplay(message) {
    if (data.sender.type === 'agent') {
      message.sender.display_name = 'John Doe';
    }
    return message;
  },
  beforeSend(message) {
    return message;
  },
};
 
// Passando o delegate como parâmetro de init
Chatlayer.init({
  channelId: '<channel-id>',
  delegate,
});
 
// Usando setDelegate
Chatlayer.init({ integrationId: '<channel-id>' }).then(() => {
  Chatlayer.setDelegate(delegate);
});
```

#### DelegateConfig

DelegateConfig é um objeto contendo os 2 campos abaixo:

#### &#x20;beforeDisplay

O `beforeDisplay` delegate permite que uma mensagem seja ocultada ou modificada antes de ser exibida na conversa. Este delegate deve retornar um valor falsy como null para ocultar a mensagem. Ele também pode retornar um objeto de mensagem modificado para alterar o que o usuário verá renderizado no histórico da conversa. Observe que essa alteração afeta apenas a renderização no cliente; a cópia do servidor dessa mensagem não pode ser modificada por este delegate.

#### beforeSend

O `beforeSend` o método delegate permite que você modifique propriedades de uma mensagem antes de enviá-la ao Chatlayer. A mensagem modificada deve ser retornada para que a alteração tenha efeito.

Um uso comum desse método é adicionar metadados à mensagem.

Observe que quando um arquivo ou imagem é enviado, apenas os metadados da mensagem podem ser atualizados. Outras propriedades da mensagem, como tipo ou texto, não serão consideradas.

***

## 💬 Dar feedback

{% hint style="success" %}
Por favor, nos diga o que você acha do novo widget Web [aqui](https://forms.office.com/Pages/ResponsePage.aspx?id=ropROyGJe0qEl2GddWziDlEYn6XpsIRDjnCtdRk8L21UMFVHN09TSVFVVU9ESlAwNTRZWjFUWlJSTiQlQCN0PWcu).&#x20;
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2/web-v2-methods-and-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.