# 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 %}