# Crie sua experiência de chat

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

### Janela de Engajamento de Chat

A janela de engajamento de chat é como os seus usuários enviam mensagens com o 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 de Chat, vá para o Administrador Web do Zoom.

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

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

A janela de engajamento de chat do Zoom é responsiva, o que significa que ela adapta automaticamente seu layout se o 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 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 fornece aos usuários contexto sobre o que esperar da sua 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.

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

**Imagem Completa do Cabeçalho**

Adicione uma imagem de 426 pixels por 95 pixels que preenche todo o espaço do cabeçalho, ideal 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**

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

**Somente Texto do Cabeçalho**

Compartilhe uma breve observação 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 do 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 os ícones**, útil para alinhar 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 consiga ver os ícones de minimizar e menu. Talvez você precise Alterar a cor do ícone também.

<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 o seu balão de chat, texto, ícones e muito mais</mark>

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

O Zoom fornece um modelo para você começar. Para manter tudo com uma ótima aparência (e fácil de ler), use 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 é uma tela de introdução Opcional que aparece antes do início do chat, dando a você a chance de cumprimentar seus clientes, coletar informações deles e alinhar a experiência à sua marca.

Isto está Disponível para a experiência de chat na web. Para Configurar, clique no **Engajamento de chat** janela, depois no **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 os seus usuários clicam 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.

A partir daí, clique em **+Adicionar Campanha** ou abra o rascunho de uma Campanha 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 do seu convite de chat deve ser grande o suficiente para ser facilmente notado e clicado ou tocado, mas não tão grande a ponto de atrapalhar 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 exigem uma proporçã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 seus usuários a ter uma ideia do que podem esperar ao tocar no botão. Zoom oferece alguns designs padrão para Escolher que indicam o início de um chat. Você também pode Adicionar seu próprio ícone personalizado usando um arquivo SVG. Os arquivos SVG devem ter menos de 10 MB.
* **Raio do canto:** Quão arredondado ou quadrado você quer que o ícone de convite seja? Dê uma olhada na sua unidade para ver se ela tem um padrão de como os botões aparecem, ou pergunte à sua equipe de marca se ela tem uma preferência. Usar um raio de canto menor, como 8 pixels, deixará seu convite mais quadrado. Um raio de canto maior, como 28 pixels, deixará seu convite mais arredondado.
* **Adicionar Texto ao Seu Convite:** Adicionar um rótulo de texto a um botão de convite o torna mais claro e convidativo. Os usuários sabem instantaneamente a finalidade do botão, então não há adivinhação sobre o que o ícone significa. No entanto, isso também ocupa mais espaço e pode poluir a tela, especialmente no mobile. 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 enviar 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 a partir da parte inferior e da lateral. Normalmente, é fácil de notar sem bloquear conteúdo importante.

Recomendamos olhar para sua própria unidade tanto no desktop quanto no mobile. Se sua unidade já tiver um banner ou botão nessa Localização, isso pode prejudicar a usabilidade do seu cliente ou possivelmente interromper os fluxos do usuário.

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

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

Se você perceber que o 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 que os consumidores arrastem e movam 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 do chat está a bloquear ou a distrair os utilizadores numa determinada página em dispositivos móveis. Quais são as minhas opções?

**Resposta:**

Existem várias formas de conseguir isto.

* **Opção 1:** Alterar a posição do ícone de convite na página. Pode mover a colocação do convite na página utilizando as opções de deslocamento e posição. Isto é configurado ao editar o convite.
* **Opção 2:** Mostrar ou Ocultar o ícone de chat com base na Localização da página. Se quiser remover completamente o convite de chat de todas as páginas de Conselho de administração, edite a Localização para excluir as páginas de Conselho de administração. Por exemplo, pode excluir todas as páginas que contenham "Conselho de administração" no URL.
* **Opção 3:** Configure a segmentação por Dispositivo. Se não quiser que o ícone de convite apareça em sites móveis, desmarque a opção "telemóvel" em Segmentação da campanha. Para configurar, clique **Campanha**, **Segmentação**.

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

Para fazer 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 abre a janela de chat e inicia a experiência da campanha. Você também pode usar HTML existente na sua unidade para acionar a janela de chat, se preferir.

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

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

Quer tanto um ícone de convite fixo quanto acionar a abertura do chat por meio de um clique em um botão na sua unidade?

Crie uma Campanha usando a opção convite fixo e, em seguida, use [o 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 quiser uma forma mais ativa de captar a atenção do seu usuário para que ele use o chat com a sua equipa ou agente virtual? O Recursos de mensagem Proativa do Zoom permite-lhe Configurar e permite às empresas iniciar conversas com visitantes, em vez de esperar que o cliente inicie o chat ao clicar no convite.

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

* **Melhor envolvimento:** Pode captar a atenção das pessoas e oferecer ajuda no momento certo.
* **Mais leads:** Mensagens e botões personalizados podem incentivar as pessoas a saber mais ao conversar por chat com um agente, ou a partilhar as suas informações para um ligar de acompanhamento.
* **Suporte mais rápido:** Ligue rapidamente os visitantes a um bot ou agente em direto, para que obtenham respostas sem demora.

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

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

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

#### <mark style="color:azul;">Direcione seus usuários</mark>

Você pode definir sua mensagem proativa para ter um atraso, de modo que ela apareça apenas para usuários que estiveram nessa página por um período específico de tempo. Você também pode Escolher se deseja que o usuário veja a mensagem apenas uma vez em um período de 24 horas, ou se deseja 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 faço para configurar isso?

**Resposta**

Você vai querer criar duas Campaigns: uma para o seu convite padrão em todo o seu site ("Campaign A"), e outra Campaign ("Campaign B") para a página onde você quer ter uma mensagem proativa.

Para cada Campaign, você vai querer definir as Campaign Locations para que não se sobreponham.

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

A Localização da Campaign A deve excluir "zoom.us/pricing" e a Localização da Campaign B deve conter "zoom.us/pricing." Dessa forma, usuários que visitarem qualquer URL que inclua "zoom.us" verão o convite regular, 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 na 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 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 oferece a flexibilidade de manter tudo consistente ou adaptar 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 **somente Zoom Virtual Agent**, clique no seguinte:

1. Estúdio de IA
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 se move 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 do 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 Configurações do chat

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

O Zoom central de contato (ZCC) e o Zoom Virtual Agent (ZVA) Campaign SDK oferecem aos desenvolvedores mais controle sobre como o chat na web se comporta e interage com o seu site. 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 sua janela de chat abra automaticamente quando 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 para Desenvolvedores Zoom](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) para mais detalhes.

#### <mark style="color:azul;">Persistência do Chat em Toda a Unidade</mark>

A persistência do chat controla se a sessão de chat de um usuário continua à medida que ele se move entre diferentes páginas no seu website.

* **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 sua conversa sem interrupção.
* **Quando a persistência está&#x20;*****desativada*****:** O chat não Continuar quando o usuário navega para uma nova página, a menos que essa página faça explicitamente parte da localização definida da primeira campanha.

Essa alteração facilita para empresas com várias marcas ou departamentos no mesmo domínio manterem as campanhas de chat separadas. Ela impede que os usuários levem 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 som de notificação. Se os sons padrão parecerem prejudicar a experiência da sua marca, você pode desativá-los em **Zoom central de contato** ou **Preferências do Zoom Virtual Agent**.

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


---

# 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://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>
```

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.