# 6. Configure um canal e publique seu bot

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FJVfNdz7UWxiUiaOhE0sB%2FScreenshot%202024-03-27%20at%2017.21.59.png?alt=media&#x26;token=56655a1c-5480-468d-9aa3-094a4de1449e" alt="" width="373"><figcaption><p>Como seu widget web ficará depois que o bot for publicado em um canal Web.</p></figcaption></figure>

## Passo 10: Configurar um canal Web

Para este bot, usaremos um canal Web.

{% hint style="danger" %}
Tenha em mente que ainda não estamos operando no ambiente RASCUNHO do seu bot, ou seja, um ambiente para construção e testes. Para ter um canal no seu ambiente AO VIVO (ou seja, o ambiente voltado ao cliente), você precisará refazer estas etapas após publicar, no ambiente AO VIVO. Saiba mais [aqui](https://docs.chatlayer.ai/bot-answers/publishing-your-bot#understanding-the-draft-version).
{% endhint %}

Para configurar um canal Web para seu chatbot:

1. No menu à esquerda, clique em **Canais**.

{% hint style="warning" %}
Existem muitos outros canais onde você pode publicar seu bot, porém eles exigem alguma configuração que não cobrimos neste breve tutorial. Para saber mais sobre canais, consulte [esta página](https://docs.chatlayer.ai/channels/multi-channel).
{% endhint %}

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FoD181g9MO8BsMvw4sewg%2FScreenshot%202024-03-19%20at%2012.03.19.png?alt=media&#x26;token=5bdb87b4-e516-40b3-abb3-43d4e7466410" alt=""><figcaption><p>A aba Canais.</p></figcaption></figure>

2. Clique em **Adicionar canal** botão, no canto superior direito da sua tela.
3. Clique em **Web**.
4. Aqui, configure o widget do seu chatbot como preferir. Para este tutorial nós iremos:
   * chamar o chatbot *Leadzy*,
   * dar a ela *Seu assistente de compras* como um subtítulo,
   * e desabilitar entrada de áudio e upload de arquivos já que nosso bot não usa isso.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F2B5UkVwNWbDKxk9Lyf1J%2FScreenshot%202024-03-27%20at%2017.26.06.png?alt=media&#x26;token=725ef986-1d40-402c-83d6-7b5371c3d1a2" alt=""><figcaption><p>Configure o básico do seu widget web.</p></figcaption></figure>

5. Sob a **Aparência** aba, selecione cores e adicione uma imagem para o avatar do seu bot.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FfMSB5jsL42iI7k3myjq9%2FScreenshot%202024-03-27%20at%2017.23.46.png?alt=media&#x26;token=c4b89c26-7e01-45fd-92c3-421c5eae1eb4" alt=""><figcaption><p>Configure a aparência do seu widget web.</p></figcaption></figure>

![Screenshot 2024-02-21 at 16.38.00.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/6d68ea67-ee27-4a92-8691-2a4d5aaf90c6/a5bb36b9-6c5c-4d98-83d1-43eb81ff2a28/Screenshot_2024-02-21_at_16.38.00.png)

6. Clique **Salvar**.

Seu widget agora está desenhado e pronto para ser usado!

### Teste seu widget web no Webchat

Para testar seu bot no Webchat:

1. No menu do seu canal Web, clique em **Instalação** aba.
2. Aqui, copie a URL do iframe a partir do link fornecido no topo:

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F9knGfrPkPeixpikCU0RO%2FScreenshot%202024-02-21%20at%2016.39.44%20(1).png?alt=media&#x26;token=1600d13f-0c7b-4c0a-8714-6b73b87082ca" alt="" width="375"><figcaption><p>Copie o link do iframe.</p></figcaption></figure>

3. Cole-o em uma nova janela: você pode testar seu bot aqui no Webchat!

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FM23GT16hUrrWa0ELnMAf%2FScreenshot%202024-03-27%20at%2017.30.08.png?alt=media&#x26;token=c1a7083f-fd81-4494-b9c2-891101abe6f2" alt=""><figcaption><p>Teste seu chatbot em um iframe.</p></figcaption></figure>

{% hint style="info" %}
Por favor, tenha em mente que ainda estamos no ambiente RASCUNHO aqui.
{% endhint %}

### Teste seu widget web no Codepen

Para testar seu bot no Codepen:

1. No menu do seu canal web, vá para o **Instalação** aba.
2. Clique em **Visualização** no canto inferior esquerdo da tela.
3. Um **Codepen** a página abre simulando como o widget do seu chatbot ficaria no seu site.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2Fb5vxEU2SMjP53E5Vt6Xo%2FScreenshot%202024-03-27%20at%2017.30.50.png?alt=media&#x26;token=ddaf6679-fd36-4f11-a2bc-d105eba83fd1" alt=""><figcaption><p>Teste seu bot no Codepen.</p></figcaption></figure>

## Passo 11: Publicar seu bot

Para publicar seu bot:

1. Abra seu **Fluxos** visualizar.
2. No canto superior direito da sua tela, clique em **Publicar**.
3. Uma janela aparece e pede para você descrever o que está publicando. Adicione uma breve descrição como nota de versão.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FpdyswBflPv8IXs8QQEeg%2FScreenshot%202024-02-21%20at%2016.50.14.png?alt=media&#x26;token=f5694eaf-1929-44d2-b865-b73d1301eb3a" alt="" width="324"><figcaption><p>Forneça uma breve descrição da versão do seu bot que você está prestes a publicar.</p></figcaption></figure>

4. Clique em **Publicar.**
5. [Configurar um canal Web](#step-10-set-up-a-web-channel) no seu ambiente AO VIVO desta vez.

{% hint style="danger" %}
Para ter um canal no seu ambiente AO VIVO (ou seja, o ambiente voltado ao cliente), você precisa configurar um canal dentro desse ambiente AO VIVO. Saiba mais [aqui](https://docs.chatlayer.ai/bot-answers/publishing-your-bot#understanding-the-draft-version).
{% endhint %}

### Verifique as diferentes versões do seu bot

Você sabe se está na versão RASCUNHO ou AO VIVO do seu bot dependendo do que vê no canto inferior direito da sua tela.

{% hint style="info" %}
Ao editar a versão AO VIVO do seu bot, você está editando o que os usuários interagem imediatamente. Cuidado! É sempre melhor trabalhar no ambiente RASCUNHO e depois publicá-lo para que ele sobrescreva o AO VIVO. Saiba mais [aqui](https://docs.chatlayer.ai/bot-answers/publishing-your-bot#understanding-the-draft-version).
{% endhint %}

Para verificar as diferentes versões do seu bot:

1. No menu à esquerda, embaixo de **Histórico** aba, clique em **Versões**.
2. Lá, você pode ver as diferentes versões do seu bot que foram publicadas.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F1OAOMbAWx4j0rQa51lJW%2FScreenshot%202024-02-21%20at%2016.58.15.png?alt=media&#x26;token=6c142f0f-9ccc-4c08-8752-39228c9631a2" alt=""><figcaption><p>Verifique as diferentes versões do seu bot.</p></figcaption></figure>

{% hint style="info" %}
Em caso de problema, as Versões permitem que você publique uma versão anterior do seu bot. Saiba mais sobre versionamento [aqui](https://docs.chatlayer.ai/bot-answers/publishing-your-bot/restore-a-version).
{% endhint %}

## Recapitulação da Lição 6

Você terminou este primeiro tutorial do Chatlayer, parabéns! 👏

Nesta última lição, você aprendeu a:

* [ ] Adicionar um canal Web ao seu bot.
* [ ] Configurar o widget do seu chatbot.
* [ ] Testar seu widget no Codepen e no Webchat.
* [ ] Publicar seu bot.
* [ ] Verifique as diferentes versões do seu bot.

## 💬 Feedback

{% hint style="warning" %}
Seu feedback sobre o tutorial significa muito para nós! Por favor, conte-nos o que você acha através de [este formulário curto.](https://forms.office.com/Pages/ResponsePage.aspx?id=ropROyGJe0qEl2GddWziDlEYn6XpsIRDjnCtdRk8L21UMFZMMlAzN0tHOTI4UjMxVTgzTVAwTE5aOCQlQCN0PWcu)
{% endhint %}