# 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 %} --- # 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.mluvii.com/en/for-administrators/tenant-management/settings/webchat.md?ask= ``` 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.