# 6. Set up a channel and publish your bot

<figure><img src="/files/1uXrAYZ3P2r0adM20Sly" alt="" width="373"><figcaption><p>What your web widget will look like once the bot is published on a Web channel.</p></figcaption></figure>

## Step 10: Set up a Web channel

For this bot, we will use a Web channel.

{% hint style="danger" %}
Bear in mind that we're not still operating in the DRAFT environment of your bot, i.e. an environment for building and testing. To have a channel in your LIVE environment (i.e. the customer-facing environment), you'll need to re-do these steps after publishing, in the LIVE environment. Lean more [here](https://docs.chatlayer.ai/bot-answers/publishing-your-bot#understanding-the-draft-version).
{% endhint %}

To set up a Web channel for your chatbot:

1. From your left-hand menu, click on **Channels**.

{% hint style="warning" %}
There are many other channels where you can publish your bot, yet, they require some configuration that we’re not covering in this short tutorial. To learn more about channels, check [this page](https://docs.chatlayer.ai/channels/multi-channel).
{% endhint %}

<figure><img src="/files/H5EVwiqHgcmyvzyWZk0S" alt=""><figcaption><p>The Channels tab.</p></figcaption></figure>

2. Click on the **Add channel** button, at the top-right corner of your screen.
3. Click on **Web**.
4. Here, set up your chatbot widget as you please. For this tutorial we will:
   * call the chatbot *Leadzy*,
   * give her *Your shopping assistant* as a subtitle,
   * and disable audio input and file upload since our bot doesn’t use that.

<figure><img src="/files/PxeVWydNGcaUK6zdEeY2" alt=""><figcaption><p>Set up the basics of your web widget.</p></figcaption></figure>

5. Under the **Appearance** tab, select colors and add an image for your bot avatar.

<figure><img src="/files/Gp5TRy3p2zQeLOjmejCE" alt=""><figcaption><p>Set up the appearance of your web widget.</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. Click **Save**.

Your widget is now designed and ready to be used!

### Test your web widget on Webchat

To test your bot on Webchat:

1. From your Web channel menu, click on the **Installation** tab.
2. Here, copy your iframe URL from the link provided at the top:

<figure><img src="/files/nOxlo9IVbWlfy8CUlMHu" alt="" width="375"><figcaption><p>Copy the iframe link.</p></figcaption></figure>

3. Paste it to a new window: you can test your bot here on Webchat!

<figure><img src="/files/BveVjss0mZCIygD0sULl" alt=""><figcaption><p>Test your chatbot in an iframe.</p></figcaption></figure>

{% hint style="info" %}
Please bear in mind that we're still in the DRAFT environment here.
{% endhint %}

### Test your web widget on Codepen

To test your bot on Codepen:

1. From your web channel menu, go to the **Installation** tab.
2. Click on **Preview** at the bottom-left corner of the screen.
3. A **Codepen** page opens that simulates what your chatbot widget would look like on your website.

<figure><img src="/files/PZH7bzNP7PJFLhgwUyBi" alt=""><figcaption><p>Test your bot on Codepen.</p></figcaption></figure>

## Step 11: Publish your bot

To publish your bot:

1. Open your **Flows** view.
2. On the top-right corner of your screen, click on **Publish**.
3. A window pops up and asks you to describe what you’re publishing. Add a short description as a release note.

<figure><img src="/files/dIMJ7a2TvYDwzi4fMMk3" alt="" width="324"><figcaption><p>Give a short description of the version of your bot that you're about to publish.</p></figcaption></figure>

4. Click on **Publish.**
5. [Set up a Web channel](#step-10-set-up-a-web-channel) in your LIVE environment this time.

{% hint style="danger" %}
To have a channel in your LIVE environment (i.e. the customer-facing environment), you' need to set up a channel inside that LIVE environment. Lean more [here](https://docs.chatlayer.ai/bot-answers/publishing-your-bot#understanding-the-draft-version).
{% endhint %}

### Check the different versions of your bot

You know if you are in the DRAFT or LIVE version of your bot depending on what you see on the bottom right corner of your screen.

{% hint style="info" %}
When editing the LIVE version of your bot, you are editing what users interact with immediately. Be careful! It’s always best to work on the DRAFT environment then publish it so that it overwrites the LIVE one. Lean more [here](https://docs.chatlayer.ai/bot-answers/publishing-your-bot#understanding-the-draft-version).
{% endhint %}

To check the different versions of your bot:

1. From the left-hand menu, under the **History** tab, click on **Versions**.
2. There, you can see the different versions of your bot that were published.

<figure><img src="/files/IhdhRMNu5WtDA319LUUy" alt=""><figcaption><p>Check the different versions of your bot.</p></figcaption></figure>

{% hint style="info" %}
In case of a problem, the Versions allows you to publish an older version of your bot. Learn more about versioning [here](https://docs.chatlayer.ai/bot-answers/publishing-your-bot/restore-a-version).
{% endhint %}

## Lesson 6 recap

You’re done with this very first Chatlayer tutorial, congratulations to you! 👏

In this last lesson, you’ve learned how to:

* [ ] Add a Web channel to your bot.
* [ ] Configure your chatbot widget.
* [ ] Test your widget on Codepen and Webchat.
* [ ] Publish your bot.
* [ ] Check the different versions of your bot.

## 💬 Feedback

{% hint style="warning" %}
Your feedback on the tutorial means the world to us! Please, let us know what you think through [this short form.](https://forms.office.com/Pages/ResponsePage.aspx?id=ropROyGJe0qEl2GddWziDlEYn6XpsIRDjnCtdRk8L21UMFZMMlAzN0tHOTI4UjMxVTgzTVAwTE5aOCQlQCN0PWcu)
{% 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/start-quickly/leadzy-tutorial/6.-set-up-a-channel-and-publish-your-bot.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.