# Web V2

## Create your Web widget

To create a web channel with the new widget:

1. Navigate to the **Channel** page on your bot.
2. Press the **Add channel** button in the top right.
3. Look for 'Web'.
4. Select **Web**.
5. Click on **Next**.

<figure><img src="https://2786867680-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>Create your Web widget from the Channels tab.</p></figcaption></figure>

{% hint style="warning" %}
Make sure your widget is created on the correct version of your bot, be it [DRAFT](https://docs.chatlayer.ai/publish/publishing-your-bot#understanding-the-draft-version) or [LIVE](https://docs.chatlayer.ai/publish/publishing-your-bot#understanding-the-live-version).
{% endhint %}

## Customize your Web widget

The first two tabs **Basics** and **Appearance** will allow you to change the settings and looks of your bot. That way you can ensure the branding of your new widget corresponds to the one your company uses.&#x20;

### Basics

On the **'Basics'** page you can make a number of changes:

* The **Title** and **Subtitle** of the widget will appear at the top of the widget. Make sure to leave them empty if you don't want any title to appear.
* **Enable text input** is on by default and will allow your customer to type text towards your bot. Make sure to turn this off if you want your bot to be used solely as a click bot.
* **Enable audio input** allows the user to send voice snippets to the bot using the record button at the bottom right corner of the widget.
* **Enable file upload** will make the paperclip to the right of the input-box appear. This will allow your customer to send files to your chatbot.
* **Enable sound notifications** activates audible alerts for your bot's message replies.

<figure><img src="https://2786867680-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>Set your Web widget Basic settings.</p></figcaption></figure>

### Appearance

On the **Appearance** page you can make a number of changes:

* Change the position of your widget to **Bottom right** or **Bottom left.**&#x20;
* Customize your **Brand color**, **Conversation color** and **Action color**.
* **Launcher** is the image to show in the launcher button.
* **Header logo** is the image shown in the header.
* **Bot avatar** is the default image for the bot avatar.
* **Agent avatar** is to show as the default agent avatar.

<figure><img src="https://2786867680-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>Change your Web widget's style under the Appearance tab.</p></figcaption></figure>

{% hint style="info" %}
Make sure that you click on **Save** after changing your bot's appearance.
{% endhint %}

### Variable size limit

The WebV2 widget has size limitation of 65536 bytes (= 64 KiB), so the total size of all variables cannot exceed this hard limit. Exceeding it will cause messages to not show up on the emulator (Test your bot feature, which is based on WebV2) and on your web channel.

## Preview your Web widget

To preview your Web widget after styling it:

1. Click **Save**.&#x20;
2. Press **Preview**.

Your bot will open on a CodePen page where you can test it.

<figure><img src="https://2786867680-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>Preview your bot in CodePen.</p></figcaption></figure>

## Add your Web widget to your website

After having configured your widget you can start embedding it on your website.

To embed your website widget:&#x20;

1. Click on the **Installation** ta&#x62;**.**
2. You'll see an HTML script under **Embed your widget.** Copy and paste this script in the header section of every HTML page of your website where you want it to appear.&#x20;
3. Additionally, place the provided snippets at the end of the body section on each HTML page of your website.

{% hint style="warning" %}
Make sure that the 1st *and* 2nd snippets are pasted to your page.
{% endhint %}

<figure><img src="https://2786867680-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>Install your Web widget to your web page using the Installations tab.</p></figcaption></figure>

### Set to a specific language

To set the language in an iframe, add the desired language as a query parameter to the iframe URL. This allows you to force your widget to display in that specific language.

For example:

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

{% hint style="info" %}
Note that you can also change the bot language by using the [HTML](https://docs.chatlayer.ai/channels/all-channels/webhook-api)[.](https://docs.chatlayer.ai/channels/channels/web-v2/technical-documentation#changing-the-language)
{% endhint %}

***

## 💬 Give feedback

{% hint style="success" %}
Please let us know what you think of the new Web widget [here](https://forms.office.com/Pages/ResponsePage.aspx?id=ropROyGJe0qEl2GddWziDlEYn6XpsIRDjnCtdRk8L21UMFVHN09TSVFVVU9ESlAwNTRZWjFUWlJSTiQlQCN0PWcu).&#x20;
{% endhint %}