> For the complete documentation index, see [llms.txt](https://library.zoom.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://library.zoom.com/technical-library/pt/servicos-corporativos/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md).

# Crie a sua experiência de chat

As ferramentas do Zoom facilitam personalizar e lançar sua experiência de chat com pouco ou nenhum código.

### Janela de Engajamento do chat

A janela de engajamento do chat é como seus usuários enviam mensagens para seu agente virtual ou agente humano. Com as ferramentas do Zoom, você pode criar uma janela de chat que seja fácil de ver e interagir, e que corresponda à marca da sua empresa.

Para criar ou editar sua Janela de Engajamento do chat, acesse o administrador Web do Zoom.

| Se você estiver usando... | Então clique...                                 |
| ------------------------- | ----------------------------------------------- |
| central de contato        | central de contato, Gerenciamento de Campanhas. |
| Agente virtual            | AI Studio, Agentes virtuais, Campanhas.         |

A partir daí, clique **+Adicionar Campaign** ou abra o rascunho de uma Campaign existente. Role até a **Janela de Engajamento do chat** seção para criar ou editar sua janela.

#### <mark style="color:azul;">Tamanho da Janela e Experiência Móvel</mark>

A janela de engajamento do chat do Zoom é responsiva, o que significa que ela adapta automaticamente seu layout se seu usuário acessar sua unidade a partir do desktop ou smartphone.

Em dispositivos móveis, a janela de chat abre em tela cheia para maximizar o espaço limitado da tela e garantir uma experiência limpa e legível.

<figure><img src="/files/c086c936cf9374c73a1c8470ab3cf012abfd293d" alt="Image of mobile Zoom Virtual Agent window, opened full-screen." width="375"><figcaption></figcaption></figure>

<figure><img src="/files/263646d315abfbaa2c4f2406cebece3944c134ae" alt="" width="375"><figcaption></figcaption></figure>

Para usuários que acessam o seu chat em dispositivos desktop, você pode escolher entre três opções de tamanho para a altura da janela:

* **S:** 540 pixels
* **M:** 650 pixels, **padrão**
* **L:** 780 pixels

{% hint style="info" %}
**Nota**

A largura é sempre fixa em 420 pixels para garantir a legibilidade.
{% endhint %}

<figure><img src="/files/d826462bcd22fddf37555ba556eeda63df0689b1" alt="Image of desktop Zoom Virtual Agent window, opened in the lower right corner of the window."><figcaption></figcaption></figure>

#### <mark style="color:azul;">Barra de Cabeçalho</mark>

O **barra de cabeçalho do chat** é um elemento-chave do design do seu chat. Quando projetado com cuidado, ele dá aos usuários contexto sobre o que esperar da experiência de Suporte e confiança na conversa. Você pode usar o cabeçalho para compartilhar informações sobre sua equipe de Suporte e/ou Adicionar o logotipo ou as cores da sua marca.

O Zoom CX oferece várias opções de design de cabeçalho que você pode Escolher.

**Imagem Completa do Cabeçalho**

Adicionar uma imagem de 426 pixels por 95 pixels que preencha todo o espaço do cabeçalho, ótima para designs personalizados.

<figure><img src="/files/2784bcb67eb967f29f5a1c22e5c4bea4f212a36e" alt="This image shows a chat window with a blue gradient header that says Zoom Virtual Agent. The image fills the header space." width="375"><figcaption></figcaption></figure>

**Tamanho da Imagem do Avatar**

Adicionar uma imagem de 40 por 40 pixels para aparecer na barra de cabeçalho, sozinha ou ao lado do Texto do Cabeçalho.

{% columns %}
{% column %}

<figure><img src="/files/8e1844aa1cebb3f009c9bc4293d02eaa90e13010" alt="Image of a chat screen with Zoom logo in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/263646d315abfbaa2c4f2406cebece3944c134ae" alt="Image of a chat screen with Zoom logo and header text in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

**Apenas Texto do Cabeçalho**

Compartilhe uma breve nota sobre qualquer coisa, como o nome da sua equipe, disponibilidade ou horário de Suporte. Controle o tamanho do texto do cabeçalho usando H1, H2, H3 ou o tamanho de parágrafo do corpo.

<figure><img src="/files/cfacfb9a5a8e17c438e2f9eeabcab135ba937261" alt="Image of a chat screen with header text only in the header bar." width="375"><figcaption></figcaption></figure>

Para um design simplificado e minimalista, você pode optar por **mantê-lo vazio**, concentrando seus usuários no chat.

<figure><img src="/files/49248806291b992fe636b729d50109ab3aa03f6e" alt="Image of a chat screen with nothing in the header bar." width="375"><figcaption></figcaption></figure>

Você pode usar **Selecionar qualquer cor para o fundo do cabeçalho e dos ícones**, útil para integrar o design do seu chat ao seu site.

{% hint style="warning" %}
**Atenção**

Se você alterar a cor de fundo, certifique-se de que ainda consegue ver os ícones de minimizar e menu. Talvez seja necessário alterar também a cor dos ícones.

<img src="/files/61bce09c54d35482e4a2e952dce6a95df3490909" alt="Image of a chat screen with a blue header bar, with no logo or text." data-size="original">
{% endhint %}

#### <mark style="color:azul;">Cores para a sua bolha de chat, texto, ícones e muito mais</mark>

O construtor da janela de interação permite que você escolha as cores exatas que deseja para o seu chat. Você vai Inserir códigos hexadecimais para cada parte da janela e revisar a pré-visualização para ver como fica.

O Zoom fornece um modelo para começar. Para manter as coisas com ótima aparência (e fáceis de ler), mantenha as cores da sua marca e certifique-se de que haja contraste suficiente entre as cores do texto e do fundo.

<figure><img src="/files/ff2831e9d1e99196deb9d48aeec0d0b5a44032ff" alt="Image of the template for formatting your engagement window."><figcaption></figcaption></figure>

#### <mark style="color:azul;">Tela de Boas-vindas</mark>

O **Tela de Boas-vindas** No Zoom central de contato e no Zoom Virtual Agent, a tela de introdução Opcional aparece antes do início do chat, dando a você a chance de cumprimentar seus Clientes/clientes, coletar informações deles e alinhar a experiência à sua marca.

Isso está Disponível para a experiência de chat na web. Para Configurar, clique na **Engajamento de chat** janela, depois a **Tela de Boas-vindas** aba.

***

### Design do convite

O convite é o que iniciará a experiência de Suporte no seu site. O mais comum é usar o [**Fixo** tipo de convite](/technical-library/pt/servicos-corporativos/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts), que é um ícone flutuante que aparece no seu site. Quando seus usuários clicarem nele, a janela de chat será aberta e iniciará a experiência deles.

Para criar ou editar um convite, vá para o administrador web do Zoom.

| Se você estiver usando... | Então clique...                                 |
| ------------------------- | ----------------------------------------------- |
| central de contato        | central de contato, Gerenciamento de Campanhas. |
| Agente virtual            | AI Studio, Agentes virtuais, Campanhas.         |

A partir daí, clique **+Adicionar Campaign** ou abra o rascunho de uma Campaign existente. Role até a **convite** seção para criar um novo convite.

<figure><img src="/files/04870000a7dc3173ce4e378c225154de9158ad75" alt="Image of a Zoom Support window that says &#x22;Hello! How can we help?&#x22;" width="375"><figcaption></figcaption></figure>

Você pode Configurar as seguintes Configurações para o seu **Convite fixo** ícone:

* **Tamanho do botão:** O tamanho do ícone de convite do seu chat deve ser grande o suficiente para ser facilmente percebido e clicado ou tocado, mas não tão grande a ponto de prejudicar a experiência do usuário ou cobrir conteúdo importante. O Zoom oferece três tamanhos de convite:
  * **S:** 40 pixels
  * **M:** 56 pixels, **padrão**
  * **L:** 72 pixels
* **Cor do botão:** Escolher uma cor de botão que tenha alto contraste com o fundo do seu site. Recomendamos seguir [as diretrizes WCAG 2.1](https://www.w3.org/TR/WCAG21/#contrast-minimum), que é uma relação mínima de contraste de 3:1 para componentes da interface do usuário (UI), como ícones e botões, em relação ao seu fundo.
* **Ícone:** Um ícone pode ajudar os seus usuários a ter uma ideia do que podem esperar ao tocar no botão. A Zoom oferece alguns designs padrão para Escolher que indicam o início de um chat. Você também pode Adicionar o seu próprio ícone personalizado usando um arquivo SVG. Os arquivos SVG devem ter menos de 10MB.
* **Raio do canto:** Quão arredondado ou quadrado você quer que o ícone de convite seja? Dê uma olhada no seu site para ver se ele tem um padrão de aparência dos botões, ou pergunte à sua equipe de marca se ela tem uma preferência. Usar um raio de canto menor, como 8 pixels, tornará o seu convite mais quadrado. Um raio de canto maior, como 28 pixels, tornará o seu convite mais arredondado.
* **Adicionar texto ao seu convite:** Adicionar um rótulo de texto a um botão de convite torna-o mais claro e convidativo. Os usuários sabem instantaneamente a finalidade do botão, portanto não precisam adivinhar o que o ícone significa. No entanto, ele também ocupa mais espaço e pode poluir a tela, especialmente em dispositivos móveis. Certifique-se de considerar seu público e os dispositivos que ele usa com mais frequência. Se adicionar uma fonte, você pode Escolher entre as opções de fonte predefinidas Arial, Georgia, Tahoma ou Verdana; ou carregar sua própria fonte personalizada usando um arquivo TTF.

#### <mark style="color:azul;">**Localização do convite na página**</mark>

A Localização mais popular para um ícone de convite de suporte é o canto inferior direito, com um deslocamento de 20 pixels em relação à parte inferior e à lateral. Normalmente, é fácil de identificar sem bloquear conteúdo importante.

Recomendamos visualizar sua própria unidade tanto em computadores quanto em dispositivos móveis. Se sua unidade já tiver um banner ou botão nesta Localização, isso poderá prejudicar a usabilidade do seu cliente ou possivelmente interromper os fluxos de usuários.

Se você já tiver um elemento (como um banner de cookies, uma barra de navegação ou outro widget) no mesmo local que seu ícone de convite de chat, considere alterar o alinhamento para a esquerda ou direita, ou ajustar o deslocamento da parte inferior ou das laterais.

{% hint style="success" %}
**Exemplo**

Se você perceber que seu botão de convite de chat está cobrindo um link crítico na parte inferior da sua página em dispositivos móveis, aumente o deslocamento até que o ícone de convite não cubra mais esse elemento.
{% endhint %}

Você também pode "Habilitar os consumidores a arrastar e mover o convite" para dar aos seus usuários ainda mais flexibilidade para mover o ícone pela página.

#### <mark style="color:azul;">Pergunta comum</mark>

O ícone de convite de chat está bloqueando ou distraindo os usuários em uma página específica em dispositivos móveis. Quais são minhas opções?

**Resposta:**

Existem várias maneiras de conseguir isso.

* **Opção 1:** Alterar a posição do ícone do convite na página. Você pode mover a posição do convite na página usando as opções de deslocamento e posição. Isto é configurado editando o convite.
* **Opção 2:** Mostrar ou Ocultar o ícone do chat com base na Localização da página. Se quiser remover o convite do chat completamente para todas as páginas de checkout, edite a Localização para excluir as páginas de checkout. Por exemplo, você pode excluir todas as páginas que contenham "checkout" na URL.
* **Opção 3:** Configurar segmentação por Dispositivo. Se não quiser que o ícone de convite apareça em sites móveis, desmarque a opção "telefone móvel" em Segmentação da Campanha. Para configurar, clique **Campanha**, **Segmentação**.

O Zoom Campaigns oferece uma [**convite incorporado**](/technical-library/pt/servicos-corporativos/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) opção caso não queira usar o ícone fixo padrão para iniciar o chat. Isso permite transformar qualquer elemento da sua unidade da Web, como um botão no menu ou um link em uma página, em um acionador para abrir a janela de chat.

Para isso, você cria o elemento no HTML da sua unidade e usa o SDK do Zoom Campaign para conectá-lo ao chat. Quando um usuário clica nesse elemento, ele inicia a janela de chat e começa a experiência da campanha. Se preferir, você também pode usar o HTML existente na sua unidade da Web para acionar a janela de chat.

<figure><img src="/files/672b214c03eff3725943fc861d0413b7e9643e56" alt="Image of the Create Embedded Invitation screen." width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
**Atenção**

Quer ter um ícone de convite fixo e também acionar a abertura do chat ao clicar em um botão na sua unidade da Web?

Crie uma campanha usando a opção de convite fixo e, em seguida, use [SDK de Campaign do Zoom](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) para acionar a abertura do chat.
{% endhint %}

***

### Mensagem proativa

E se você quiser uma maneira mais ativa de chamar a atenção do seu usuário para que ele converse pelo chat com sua equipe ou agente virtual? Os Recursos de mensagem proativa do Zoom permitem que você Configurar e permitem que empresas iniciem conversas com visitantes, em vez de esperar que o cliente inicie o chat clicando no convite.

#### <mark style="color:azul;">Como Ajuda</mark>

* **Maior Engajamento:** Você pode chamar a atenção das pessoas e oferecer ajuda no momento certo.
* **Mais Leads:** Mensagens e botões personalizados podem incentivar as pessoas a Saiba mais conversando com um agente ou compartilhar seus dados para um ligar de acompanhamento.
* **Suporte Mais Rápido:** Conecte rapidamente os visitantes a um bot ou a um agente ao vivo, para que recebam respostas sem demora.

Quando um usuário acessa uma página em que a mensagem proativa está ativada, ele receberá uma mensagem e poderá clicar nos botões para iniciar um fluxo específico.

#### <mark style="color:azul;">Onde Configurá-lo</mark>

Este Recursos é configurado em **Campanhas**, e está disponível para campanhas de chat em páginas da web que usam o **Fixo** tipo de convite.

#### <mark style="color:azul;">Direcione Seus Usuários</mark>

Você pode definir sua mensagem proativa para ter um atraso, para que ela apareça apenas para usuários que estejam nessa página há um período específico de tempo. Você também pode escolher se quer que o usuário veja a mensagem apenas uma vez em um período de 24 horas, ou se quer que a mensagem proativa reapareça se o usuário atualizar a página ou visitar outra página correspondente.

<figure><img src="/files/3cbb2f46de138c06fe0bd25048c38eb60998d5fc" alt="Image of a Zoom Campaign window that asks &#x22;How can I help&#x22;." width="191"><figcaption></figcaption></figure>

#### <mark style="color:azul;">Pergunta comum</mark>

Quero ter um ícone de convite para que meus usuários possam iniciar um chat a qualquer momento, mas também quero enviar aos meus clientes uma mensagem proativa em uma página específica (por exemplo, a página de preços da minha empresa). Como configuro isso?

**Resposta**

Você precisará criar duas campanhas: uma para seu convite padrão em todo o seu site ("Campaign A") e outra campanha ("Campaign B") para a página em que você deseja ter uma mensagem proativa.

Para cada campanha, você vai querer definir as Localizações da campanha para que elas não se sobreponham.

{% hint style="success" %}
**Exemplo**

A Localização da campanha A deve excluir "zoom.us/pricing" e a Localização da campanha B deve conter "zoom.us/pricing". Dessa forma, os usuários que visitarem qualquer URL que inclua "zoom.us" verão o convite padrão, mas os usuários que acessarem a página específica "zoom.us/pricing" verão a mensagem proativa aparecer.
{% endhint %}

***

### Avatares

Um avatar é a imagem que aparece ao lado das mensagens no chat da web. Ele ajuda a trazer personalidade e branding para a conversa.

<figure><img src="/files/300e71ba1d6a9d9464ab41c937a2738c88fde7fd" alt="Image of the Zoom Virtual Agent avatar, including a picture of a woman with dark hair and a headset." width="375"><figcaption></figcaption></figure>

Para mensagens enviadas antes de um usuário se conectar com um agente (por exemplo, uma mensagem de boas-vindas ou o Zoom Virtual Agent), você pode definir um único avatar padrão em todas as suas experiências ou pode definir um avatar exclusivo para cada fluxo de chat individual. Isso lhe dá a flexibilidade de manter tudo consistente ou personalizar a experiência para diferentes marcas ou casos de uso.

Se você estiver usando **Zoom central de contato**, clique no seguinte:

1. Preferências
2. Experiência do consumidor
3. Avatar e nome da mensagem do fluxo padrão.

Se você estiver usando **Apenas Zoom Virtual Agent**, clique no seguinte:

1. AI Studio
2. Agentes Virtuais
3. Chatbots
4. Configurações

<figure><img src="/files/81d86df5e9f136bebcbf93852c0327b4905684cf" alt="Side-by-side image of the Customize Name and Avatar screen and a rendering of the settings."><figcaption></figcaption></figure>

Quando o seu cliente passa do bot para um agente ao vivo no Zoom central de contato, você também pode controlar como o avatar do agente aparece. Você pode Escolher Mostrar a foto do perfil do agente na central de contato, suas iniciais ou uma imagem de avatar definida.

Para configurar, clique no seguinte:

1. Preferências
2. Experiência do consumidor
3. Exibir imagem

***

### Configurações adicionais de chat

#### <mark style="color:azul;">Controle a janela de chat da web com o Zoom Campaign SDK</mark>

O Zoom central de contato (ZCC) e o Zoom Virtual Agent (ZVA) Campaign SDK dão aos desenvolvedores mais controle sobre como o chat da web se comporta e interage com a sua unidade na web. Ele permite abrir, fechar e controlar o comportamento do chat programaticamente com base nas ações do usuário, no contexto da página ou em lógica personalizada.

Por exemplo, você pode fazer com que a janela de chat se abra automaticamente quando os seus usuários estiverem na página por um número específico de segundos ou clicarem em um botão específico.

Ver [Referência do SDK da documentação de desenvolvedor da Zoom](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) para mais detalhes.

#### <mark style="color:azul;">Persistência de chat em toda a unidade</mark>

A persistência de chat controla se a sessão de chat de um usuário continua à medida que ele se move entre diferentes páginas da sua unidade.

* **Quando a persistência está&#x20;*****ativada*****&#x20;(padrão):** O mesmo chat permanece aberto entre páginas, para que o usuário possa Continuar a conversa sem interrupção.
* **Quando a persistência está&#x20;*****desativada*****:** O chat não pode Continuar quando o usuário navega para uma nova página, a menos que essa página faça parte explicitamente da Localização definida da primeira campanha.

Alterar isso torna mais fácil para empresas com várias marcas ou departamentos no mesmo domínio manter campanhas de chat separadas. Isso impede os usuários de levar um chat entre páginas não relacionadas e reduz a necessidade de configuração manual.

Encontre essa configuração em **Zoom central de contato** e **Preferências do Zoom Virtual Agent**.

#### <mark style="color:azul;">Notificações de Áudio</mark>

Por padrão, quando o seu agente ou agente virtual envia uma mensagem no chat da web, os consumidores ouvem um Áudio de notificação. Se os sons padrão parecerem disruptivos para a experiência da sua marca, você pode desativá-los em Notificações de Áudio **Zoom central de contato** ou **Preferências do Zoom Virtual Agent**.

Os consumidores ainda terão a opção de re-Habilitá-los no menu de chat, se preferirem.


---

# 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://library.zoom.com/technical-library/pt/servicos-corporativos/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.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.