> For the complete documentation index, see [llms.txt](https://docs.mluvii.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mluvii.com/en/for-administrators/tenant-management/settings/webchat.md).

# WebChat

{% hint style="info" %}
*Do you want to modify the form of the Mluvii widget on your site? Then you are precisely in the Widget section. Here you can set up **a chat widget look**, **CallBack** field, or **chat window**. You can customize colors, texts, logos, or profile photos here.* 

*The application has a preset look and text. If you do not edit the settings according to your preference, the application will use the basic settings.*
{% endhint %}

{% hint style="success" %}
*For each of the WebChat widgets, it is useful to note in the description, for example, the URL of the site where the WebChat widget is used.*
{% endhint %}

## Create a new widget

Click the “**Add” button** to set up the new configuration widget. Fill in the name and select either an existing routing command from the list or create a new one (click the **“Add”** button, name the command save it, and set it up later) and **click “OK” to save the setting**. You have just created a new configuration widget, which you can customize as described in the following sections.

{% hint style="info" %}
*You have just created a new WebChat widget, which you can customize as you wish by following the instructions in the following sections.*
{% endhint %}

## General settings

Here you have to choose a **routing** and you can assign some **rules** to the widget. We recommend that you review the Routing and Rules sections before setting them up. You can also insert your **widget** using the code:

In the General Settings section, you find **javascript code**, which you can simply paste into your site. Just press the “Copy Code” button and paste it to your site or elements. Or you can create **your test website**.

## Button

In the button settings, you can change the button's appearance as well as its behavior.

### Appearance

* You can set the button when selecting **the button appearance**, setting its form and type of entry (chat, callback, or video call)
* **Position setting** - place the button on the page. You can choose from the right, left, top, or bottom positions, or choose your placement with horizontal and vertical offsets.
* **The Z-index** determines which element is in the foreground (the higher the z-index, the more in the foreground).
* **color settings** - an indication of Online, Busy, or Offline status.

#### Behavior

* here you can decide whether you want to **display the button** in the **busy** state and in the **offline state**
* **WebChat availability** - you can select **routing evaluation**, status of all groups, or status of one group.

{% hint style="warning" %}
*The "evaluate routing" option affects, among other things, the behavior of chatbots or routing itself!*
{% endhint %}

{% hint style="info" %}
***Model situation:*** 

* *You are setting the WebChat Package Behavior*
* *The WebChat widget uses routing that includes a group of operators and a chatbot*
*  *You select an item from the menu according to "Status of one group" and choose the given group*

***--> The presence of a chatbot in the routing is irrelevant and the state of the widget is determined by the state of the group!!!***
{% endhint %}

## Pop-up

A pop-up is an element that will help you catch the visitor’s attention on the page. It can be text, a custom image, or an element in an iframe that will appear after a set time. You can set the size, offset, or color of the text yourself. You can also **completely switch off the** pop-up.

## WebChat

Here you can set all the parameters that apply to the chat window and entry, exit, and offline forms.

You can edit:

* **the company logo** - we recommend a square image or gif format. You can edit its position in the editor.
* **text in the top bar** - setting the company name, and setting the entry message (in several languages).
* **color of individual elements** - the color of texts, the color of the operator, and customer conversation bubbles.
* **position and offset** - the position of the chat window (right, left, middle...) and its offset from the edges.
* **the size of the chat window** - you can set the width and height as needed.

{% hint style="success" %}
*If you do not wish to see the information "We are looking for an operator for you" in the chat window, use the settings at the bottom of the window.*
{% endhint %}

### Forms

Mluvii distinguishes 4 types of forms: 

* **entry**
* **feedback**
* **offline**
* **call script** (used for telephone campaigns)

For your widget, you can use either the basic Mluvii form (or you can choose its GDPR variant) or *an* iframe to create your own.

If you do not want to use forms to chat with your clients, you can simply turn them off.

{% hint style="info" %}
*For the offline form, it is necessary to enter the email from which conversation transcripts will be sent **to clients**.*
{% endhint %}

{% hint style="warning" %}
*The Entry and feedback form for Callback buttons is managed by the settings on the **Showroom tab**.*
{% endhint %}

## Showroom

The Showroom serves to visually set up a connection through the CallBack feature. Set up here **the background of the showroom**, i.e. image, visualization, or color scheme. A separate entry and feedback form is set here.

{% hint style="success" %}
*You can check the WebChat settings before deploying it by clicking on the **"Preview" button**. You can perform such a check for **Showroom, Chat, Pop-up selected form or Hero Card.***
{% endhint %}

{% hint style="success" %}
*To test how your widget behaves in a real environment, click on the **test page**. If you have the routing and group set correctly, you can try a session from the beginning to the end.*
{% endhint %}

{% hint style="warning" %}
*If you need to set the page background for **Invitations**, go to the "Showroom" tab within the Default Widget.*
{% endhint %}