# Web V2

## Crie seu widget Web

Para criar um canal web com o novo widget:

1. Navegue até o **Canal** na página do seu bot.
2. Pressione o **Adicionar canal** botão no canto superior direito.
3. Procure por 'Web'.
4. Selecione **Web**.
5. Clique em **Próximo**.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FB433BzIHEqfDOQZ8ezNF%2Fadd%20channel.gif?alt=media&#x26;token=e85d236f-e66c-4fba-9609-020400e2f8b5" alt=""><figcaption><p>Crie seu widget Web na guia Canais.</p></figcaption></figure>

{% hint style="warning" %}
Certifique-se de que seu widget seja criado na versão correta do seu bot, seja [RASCUNHO](https://docs.chatlayer.ai/publish/publishing-your-bot#understanding-the-draft-version) ou [AO VIVO](https://docs.chatlayer.ai/publish/publishing-your-bot#understanding-the-live-version).
{% endhint %}

## Personalize seu widget Web

As duas primeiras guias **Noções básicas** e **Aparência** permitem que você altere as configurações e a aparência do seu bot. Assim você pode garantir que a identidade visual do seu novo widget corresponda à utilizada pela sua empresa.&#x20;

### Noções básicas

Na **'Noções básicas'** página você pode fazer várias alterações:

* O **Título** e **Subtítulo** do widget aparecerá no topo do widget. Certifique-se de deixá-los vazios se não quiser que nenhum título apareça.
* **Ativar entrada de texto** está ativado por padrão e permitirá que seu cliente digite texto para o seu bot. Certifique-se de desativar isso se quiser que seu bot seja usado apenas como um bot de cliques.
* **Ativar entrada de áudio** permite que o usuário envie trechos de voz para o bot usando o botão de gravação no canto inferior direito do widget.
* **Ativar envio de arquivos** fará com que o clipe de papel à direita da caixa de entrada apareça. Isso permitirá que seu cliente envie arquivos para o seu chatbot.
* **Ativar notificações sonoras** ativa alertas audíveis para as respostas de mensagens do seu bot.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2Fwwmp44T39KGAD6WiZotk%2FScreenshot%202024-07-31%20at%2010.40.15.png?alt=media&#x26;token=b0b81d5b-e355-446f-bb8c-a69608390a67" alt=""><figcaption><p>Defina as configurações básicas do seu widget Web.</p></figcaption></figure>

### Aparência

Na **Aparência** página você pode fazer várias alterações:

* Altere a posição do seu widget para **Canto inferior direito** ou **Canto inferior esquerdo.**&#x20;
* Personalize sua **Cor da marca**, **Cor da conversa** e **Cor da ação**.
* **Botão de abertura** é a imagem a ser exibida no botão lançador.
* **Logo do cabeçalho** é a imagem exibida no cabeçalho.
* **Avatar do bot** é a imagem padrão para o avatar do bot.
* **Avatar do agente** é para exibir como o avatar padrão do agente.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FE2hKnhYZ5d4N96CBU0Bw%2FScreenshot%202024-07-31%20at%2010.45.58.png?alt=media&#x26;token=4ef8c22c-de29-4d6f-b190-0299789026f6" alt=""><figcaption><p>Altere o estilo do seu widget Web na guia Aparência.</p></figcaption></figure>

{% hint style="info" %}
Certifique-se de clicar em **Salvar** após alterar a aparência do seu bot.
{% endhint %}

### Limite de tamanho de variáveis

O widget WebV2 tem limitação de tamanho de 65536 bytes (= 64 KiB), portanto o tamanho total de todas as variáveis não pode exceder esse limite rígido. Excedê-lo fará com que mensagens não apareçam no emulador (recurso Testar seu bot, que é baseado no WebV2) e no seu canal web.

## Visualize seu widget Web

Para visualizar seu widget Web após estilizar:

1. Clique **Salvar**.&#x20;
2. Pressione **Visualizar**.

Seu bot será aberto em uma página do CodePen onde você pode testá-lo.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FimJ5bhsMyevX6UY7CiFh%2FScreenshot%202024-07-30%20at%2015.42.00.png?alt=media&#x26;token=35f15d57-7b71-40a8-862e-0340e8fab494" alt=""><figcaption><p>Visualize seu bot no CodePen.</p></figcaption></figure>

## Adicione seu widget Web ao seu site

Depois de configurar seu widget você pode começar a incorporá-lo em seu site.

Para incorporar seu widget no site:&#x20;

1. Clique na **Instalação** gui&#x61;**.**
2. Você verá um script HTML em **Incorpore seu widget.** Copie e cole este script na seção head de cada página HTML do seu site onde você deseja que ele apareça.&#x20;
3. Além disso, coloque os trechos fornecidos ao final da seção body em cada página HTML do seu site.

{% hint style="warning" %}
Certifique-se de que o 1º *e* 2º trechos sejam colados em sua página.
{% endhint %}

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FBlsh0RA9ZjeHnbUTTnbX%2FScreenshot%202024-07-31%20at%2010.48.09.png?alt=media&#x26;token=db2f8d96-805a-4050-beb8-f705e6d5815d" alt=""><figcaption><p>Instale seu widget Web na sua página web usando a guia Instalações.</p></figcaption></figure>

### Definir para um idioma específico

Para definir o idioma em um iframe, adicione o idioma desejado como um parâmetro de consulta à URL do iframe. Isso permite forçar seu widget a ser exibido nesse idioma específico.

Por exemplo:

```markup
https://webchat.chatlayer.ai/embedded/botId:channelId?language=en
```

{% hint style="info" %}
Observe que você também pode alterar o idioma do bot usando o [HTML](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/webhook-api)[.](https://docs.chatlayer.ai/channels/channels/web-v2/technical-documentation#changing-the-language)
{% endhint %}

***

## 💬 Dê feedback

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


---

# Agent Instructions: Querying This Documentation

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

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

```
GET https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2.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.