> For the complete documentation index, see [llms.txt](https://docs.chatlayer.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2/web-v2-methods-and-options.md).

# 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 migrar para o** [**novo widget da web, Web V2**](/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2.md)**.** Isso significa que o Web V1 será removido da nossa base de código. Saiba tudo sobre [a migração da V1 para a V2](/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2/from-web-v1-to-v2.md).
{% 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 semelhante a uma promise.</td><td>(opções: <em>Opções</em>)</td><td><a href="#initialize-the-web-widget-with-options">#Inicialize 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 as do seu site ou aplicativo.</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>Fecha 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 do chat</a></td></tr><tr><td><code>Chatlayer.on()</code></td><td>Assine eventos predefinidos e personalizados durante toda a conversa do usuário com o 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 acompanhar ou cancele a inscrição 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 da 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 da 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 personalizados 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, por exemplo, se ele clicar em um botão na página.</td><td>(texto)</td><td></td></tr><tr><td><code>Chatlayer.track()</code></td><td>Cria um novo evento que será <a href="/pages/3d98c0f0b2af55e2cb21160ec8703153d5015d19">rastreado</a>.</td><td><p>ex.: Chatlayer.track</p><p>("view_product", product_id: "SKU123"})</p></td><td></td></tr><tr><td><code>Chatlayer.trackEvent()</code></td><td>Acompanhe 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 personalizado para o avatar e o nome do agente exibidos</td><td><code>DelegateConfig</code></td><td><a href="#setting-delegate">#Definindo um delegate</a></td></tr></tbody></table>

***

## Inicialize o widget Web com opções

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

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

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

### **Opções**

A `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 do Chatlayer</td></tr><tr><td>título</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>position</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>CustomColors</code></td><td>Substitua 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 mostrada 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 do Chatlayer</td></tr><tr><td><a href="#customcolors">customText</a></td><td>Sim</td><td>-</td><td><code>CustomText</code></td><td>Substitua o texto dos diferentes elementos da interface 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 a entrada de texto, permitindo que os usuários interajam apenas por meio de 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 envio de arquivos, impedindo que os usuários enviem arquivos pelo widget. A solicitação de envio de arquivo ainda funcionará</td></tr><tr><td>enableSoundNotifications</td><td>Não</td><td>verdadeiro</td><td><code>booleano</code></td><td>Controle se o usuário receberá notificações sonoras sempre que uma nova mensagem chegar. Isso 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

A `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 launcher. 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 call-to-actions dentro das 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 de placeholder exibido no campo de entrada da mensagem              |
| botDisplayName   | Sim          | Bot                 | Este é o nome de exibição do bot. Use uma string vazia para ocultá-lo.    |
| agentDisplayName | Sim          | Agente              | Este é o 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 iniciar o chat.

Internamente, consiste em uma matriz de definições de elementos. Cada elemento pode ter o seguinte `tipo`, `rótulo`, `placeholder` e `variante`.

| **Nome**    | **Tipo** | **Descrição**                                 | **Aplica-se a**                                                                      |
| ----------- | -------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
| tipo        | String   | O tipo de elemento                            | Um dos `text`, `spacer`, `input`, `select`, `checkbox`, `botão`, `textarea`, `image` |
| rótulo      | String   | O texto que aparece acima do campo de entrada | `input`, `textarea`, `select`, `checkbox`                                            |
| placeholder | String   | O texto de exemplo no campo                   | `input`, `textarea`, `select`, `checkbox`                                            |
| variante    | String   | A variante do elemento                        | Um dos `primária`, `secundária` \| `botão`                                           |

<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": "YOUR_CHANNEL_ID", "region": "eu-west1-gcp", "position": "right", 
            "prechatForm": {
            elements: [
              {
                id: 'age',
                type: 'input',
                label: 'Idade',
                required: true,
                variant: 'number',
                placeholder: 'Texto de placeholder...',
              },
              {
                id: 'email',
                type: 'input',
                variant: 'email',
                label: 'E-mail',
                defaultValue: 'a@a.com',
                placeholder: 'Texto de placeholder...',
              },
              {
                id: 'website',
                type: 'input',
                label: 'Site da empresa',
                placeholder: 'Texto de placeholder...',
              },
              {
                type: 'select',
                id: 'checkbox-1',
                label: 'Rótulo da seleção',
                placeholder: 'Selecione o tamanho da empresa',
                options: [
                  {
                    id: 'option-1',
                    type: 'option',
                    label: 'Opção 1',
                  },
                  {
                    id: 'option-2',
                    type: 'option',
                    label: 'Opção 2',
                  },
                  {
                    id: 'option-3',
                    type: 'option',
                    label: 'Opção 3 (Desativada)',
                    disabled: true,
                  },
                ],
              },
              {
                type: 'spacer',
                size: 'md',
              },
              {
                type: 'text',
                text: 'Saiba mais [aqui](https://google.com)',
              },
              {
                type: 'checkbox',
                id: 'checkbox-2',
                // label: 'Rótulo da seleção',
                required: true,
                placeholder: 'Selecione o tamanho da empresa',
                options: [
                  {
                    id: 'option-1',
                    type: 'option',
                    required: true,
                    label: 'Aceitar termos e condições',
                  },
                ],
              },
            ],
          }                                        
})</script> 
```

</details>

Abaixo, um exemplo de prévia de como `PrechatForm` aparece no widget. O usuário pode personalizar os campos antes de iniciar o chat.

<div align="center"><figure><img src="/files/f0e293ff00c1dbc29afb162d509d0a6967879636" alt="" width="375"><figcaption><p>exemplo de prechatForm.</p></figcaption></figure></div>

## Outros métodos

### Autenticação do 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 aplicativo. 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 a propriedade do widget. Caso contrário, qualquer pessoa pode se passar pelos seus usuários.

<details>

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

Para criar um token JWT assinado:

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

Um exemplo em node.js é fornecido abaixo usando jsonwebtoken >= 6.0.0:

```javascript
var jwt = require('jsonwebtoken');
// dado o 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 à de outras plataformas de mensagens. Quando os usuários entram em contato com o bot pelo widget e o reabrem, eles podem visualizar todas as conversas anteriores por padrão.

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

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

O script abaixo permitirá adicionar 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á logout do usuário e fará login novamente imediatamente.

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: 'Reiniciar conversa'
              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, ele é usado como 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 do evento widget:custom_action', { id });
              if (id === RESTART_CONVERSATION) {
                await window.Chatlayer.logout();
                await window.Chatlayer.login();
              }
            });
```

O trecho completo do código ficaria 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 do 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) => ...)`

| **event**              | **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 personalizada 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**

| **Field**            | **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**

| **Field** | **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 [JSON Builder](/chatlayer-documentation-pt-br/buildabot/flow-logic/dialog-state/action-bot-dialog.md#json-builder) para enviar eventos genéricos da sessão do seu usuário para o site em que você hospedou o widget.
{% endhint %}

**AgentJoinedEvent**

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

**Agente**

| **Field**     | **Tipo**    | **Descrição**                                                          |
| ------------- | ----------- | ---------------------------------------------------------------------- |
| display\_name | string      | Nome de exibição do agente                                             |
| picture\_url  | string      | URL da imagem do agente.                                               |
| tipo          | `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. Apenas os idiomas na lista de idiomas suportados pelo seu bot serão aceitos.

#### `Chatlayer.language`

É o idioma atual do widget.

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

### Defina os dados da sessão

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

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

Define dados extras na sessão da conversa e retorna uma promessa

**Exemplo**

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

O exemplo acima mostra como você pode definir a variável `Product` na sessão do Chatlayer. Ele 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 acontecerem na conversa. Para definir um delegate, passe o parâmetro delegate nas opções de inicialização ou use o método setDelegate. O objeto delegate pode conter opcionalmente as funções beforeDisplay ou beforeSend.

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

```
const delegate = {
  beforeDisplay(message) {
    if (data.sender.type === 'agent') {
      message.sender.display_name = 'John Doe';
    }
    return message;
  },
  beforeSend(message) {
    return message;
  },
};
 
// Passando delegate como parâmetro de inicialização
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:

#### beforeDisplay

A `beforeDisplay` O 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 lado do cliente; a cópia dessa mensagem no lado do servidor não pode ser modificada por este delegate.

#### beforeSend

A `beforeSend` O método delegate permite modificar as 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 deste método é adicionar metadados à mensagem.

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

***

## 💬 Dê 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).
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` 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>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.