> 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.md). # Web V2 ## Crie seu widget Web Para criar um canal web com o novo widget: 1. Navegue até a **Canal** página no 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**.

Crie seu widget Web na aba Canais.

{% hint style="warning" %} Certifique-se de que seu widget foi criado na versão correta do seu bot, seja ela [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 abas **Noções básicas** e **Aparência** permitirão que você altere as configurações e a aparência do seu bot. Dessa forma, você pode garantir que a identidade visual do seu novo widget corresponda à que a sua empresa usa. ### Noções básicas Na **'Básico'** página, você pode fazer uma série de alterações: * A **Título** e **Subtítulo** do widget aparecerão no topo do widget. Certifique-se de deixá-los vazios se não quiser que nenhum título apareça. * **Ativar entrada de texto** vem 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 somente 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 upload de arquivos** fará aparecer o clipe de papel à direita da caixa de entrada. Isso permitirá que seu cliente envie arquivos para o seu chatbot. * **Ativar notificações sonoras** ativa alertas sonoros para as respostas de mensagem do seu bot.

Defina as configurações Básicas do seu widget Web.

### Aparência Na **Aparência** página, você pode fazer uma série de alterações: * Altere a posição do seu widget para **Inferior direito** ou **Inferior esquerdo.** * Personalize seu **Cor da marca**, **Cor da conversa** e **Cor da ação**. * **Launcher** é a imagem exibida no botão de lançamento. * **Logo do cabeçalho** é a imagem mostrada no cabeçalho. * **Avatar do bot** é a imagem padrão do avatar do bot. * **Avatar do agente** é a imagem exibida como avatar padrão do agente.

Altere o estilo do seu widget Web na aba Aparência.

{% hint style="info" %} Certifique-se de clicar em **Salvar** após alterar a aparência do seu bot. {% endhint %} ### Limite de tamanho da variável O widget WebV2 tem um limite de tamanho de 65536 bytes (= 64 KiB), então o tamanho total de todas as variáveis não pode exceder esse limite rígido. Excedê-lo fará com que as mensagens não apareçam no emulador (recurso Testar seu bot, que é baseado no WebV2) e no seu canal web. ## Pré-visualize seu widget Web Para visualizar seu widget Web depois de personalizá-lo: 1. Clique em **Salvar**. 2. Pressione **Pré-visualização**. Seu bot será aberto em uma página do CodePen onde você pode testá-lo.

Pré-visualize seu bot no CodePen.

## Adicione seu widget Web ao seu site Depois de configurar seu widget, você pode começar a incorporá-lo no seu site. Para incorporar o widget do seu site: 1. Clique no **Instalação** aba**.** 2. Você verá um script HTML em **Incorporar seu widget.** Copie e cole este script na seção de cabeçalho de cada página HTML do seu site onde você quer que ele apareça. 3. Além disso, coloque os trechos fornecidos no 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 na sua página. {% endhint %}

Instale seu widget Web na sua página web usando a aba Instalações.

### Definir para um idioma específico Para definir o idioma em um iframe, adicione o idioma desejado como um parâmetro de consulta na 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](/chatlayer-documentation-pt-br/channels/all-channels/webhook-api.md)[.](https://docs.chatlayer.ai/channels/channels/web-v2/technical-documentation#changing-the-language) {% endhint %} *** ## 💬 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.md?ask=&goal= ``` `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.