# WebChat {% embed url="" %} Základní vztah: Skupina-Routing-Webchat balíček {% endembed %} {% hint style="info" %} *Chcete upravit podobu tlačítka WebChatu na svém webu? Pak jste v sekci WebChat správně. Zde můžete nastavit **vzhled chatového widgetu**, pole **CallBack** nebo **chatového okna**. Přizpůsobit zde můžete barvy, texty či loga.* *Aplikace má přednastavený vzhled i texty. Pokud si neupravíte nastavení podle svých preferencí, aplikace bude používat základní nastavení.* {% endhint %} {% hint style="success" %} *Ke každému z WebChat balíčků je užitečné si poznamenat do popisu např. URL webu, kde je WebChat balíček použit.* {% endhint %} ## Vytvoření nového WebChat balíčku Nový WebChat balíček nastavíte kliknutím na tlačítko **„Přidat“.** Vyplníte jeho název a buď ze seznamu vyberete existující routovací pravidlo, nebo vytvoříte nové (klikněte na tlačítko **„Přidat”**, pravidlo pojmenujte a uložte, ostatní můžete nastavit později) a klikem na „OK” nastavení uložíte. {% hint style="info" %} *Právě jste vytvořili nový WebChat balíček, který si můžete podle návodu v následujících sekcích libovolně upravit.* {% endhint %} ## **Obecné nastavení** Zde můžete navolit **routingová a spouštěcí pravidla** k WebChat balíčku. Před jejich nastavením doporučujeme si prostudovat jednotlivé sekce [Routing](/pro-administratory/sprava-tenantu/nastaveni/routingova-pravidla.md) a [Pravidla](/pro-administratory/sprava-tenantu/nastaveni/pravidla.md). V sekci **Obecné nastavení** naleznete také **javascriptový kód**, kterým můžete balíček do vaší stránky jednoduše vložit. Stačí stisknout tlačítko „Kopírovat kód” a vložit ho do vašich stránek do `` nebo `` elementů. Nebo si můžete vytvořit **vlastní testovací webovou stránku**. ## **Tlačítko** U nastavení tlačítka máte možnost měnit jeho vzhled a také jeho chování. ### **Vzhled** * při volbě **vzhledu tlačítka** nastavujete jeho podobu a typ vstupu (WebChat, Callback či Videohovor), * **nastavení pozice** - umístění tlačítka na stránce. Vybrat si můžete z pozic vpravo, vlevo, nahoře, dole nebo si navolit vlastní umístění s horizontálním a vertikálním odsazením. * **Z-index** určuje, který prvek je v popředí (čím vyšší z-index tím víc v popředí). * **nastavení barev** - indikace stavu Online, Zaneprázdněn, Offline. #### **Chování** * zde máte možnost rozhodnout, zda chcete **zobrazovat tlačítko** ve stavu **zaneprázdněn** a ve stavu **offline** * **dostupnost WebChatu** - můžete zvolit **vyhodnocení routingu**, stav všech skupin, či stav jedné skupiny. {% hint style="warning" %} *Volba "vyhodnocení routingu" ovlivňuje mimo jiné chování chatbotů či routingu samotného!* {% endhint %} {% hint style="info" %} ***Modelová situace:*** * *Nastavujete Chování WebChat balíčku* * *WebChat balíček používá routing, který obsahuje skupinu operátorů a chatbota* * *Vyberete z nabídky položku podle "Stavu jedné skupiny" a zvolíte danou skupinu* ***--> Přítomnost chatbota v routingu nemá význam a stav widgetu je dán stavem skupiny!!!*** {% endhint %} ## **Pop-up** Pop-up je prvek, který vám pomůže upoutat pozornost návštěvníka na stránce. Může jím být text, vlastní obrázek nebo prvek v iframe, který se objeví po nastavené době. Velikost, odsazení nebo barvu textu si můžete sami nastavit. Pop-up lze ovšem také **zcela vypnout**. ### **WebChat** Zde můžete nastavit všechny parametry, které se týkají chatového okna a vstupních, výstupních a offline formulářů. Upravovat můžete: * **logo společnosti** - doporučujeme čtvercový formát obrázku nebo gifu. Jeho pozici pak můžete upravit v editoru. * **textace v horní liště** - tedy nastavení názvu společnosti, nastavení vstupní zprávy (možno v několika jazycích). * **barva jednotlivých prvků** - barva textů, barva konverzačních bublin operátora i klienta. * **umístění a odsazení** - poloha chatového okna (vpravo, vlevo, uprostřed...) a jeho odsazení od okrajů. * **velikost chatového okna** - můžete nastavit šířku a výšku zcela dle potřeby. {% hint style="success" %} *Pokud si nepřejete zobrazovat v chatovém okně informaci "Hledáme pro vás volného operátora", použijte nastavení ve spodní části okna.* {% endhint %} ### **Formuláře** Mluvii rozlišuje 4 druhy formulářů: * **vstupní** * **výstupní** * **offline** * **Call script (**používaný v případě telefonních kampaní). Pro svůj widget můžete použít buď mluvii formulář vytvořený v rámci editoru formulářů, nebo si pomocí iframe vytvořit vlastní. Pokud nechcete při konverzaci s klienty používat formuláře, můžete je jednoduše vypnout. {% hint style="info" %} *U offline formuláře je nutné zadat e-mail, ze kterého budou klientům odesílány **přepisy konverzací**.* {% endhint %} {% hint style="warning" %} *Vstupní a výstupní formulář u tlačítek typu Callback se řídí nastavením v rámci záložky **Showroom formuláře.*** {% endhint %} ### **Showroom** Showroom slouží k vizuálnímu nastavení pro spojení přes funkci CallBack či pro Pozvánky. Nastavuje se zde **pozadí showroomu**, tedy obrázek, vizualizace nebo barevné schéma. A samostatně se zde nastavuje vstupní a výstupní formulář. {% hint style="success" %} *Nastavení WebChatu si můžete ještě před jeho nasazením zkontrolovat kliknutím na **tlačítko „Náhled“.** Takovou kontrolu můžete provádět jak u **Showroomu, chatu, Pop-up nebo vybraného formuláře či Hero Card.*** {% endhint %} {% hint style="success" %} *Chcete-li si otestovat, jak se bude váš WebChat chovat v reálném prostředí, klikněte na **testovací stránku**. Pokud máte k WebChatu správně nastavený routing a skupinu, můžete si zkusit sezení od úplného začátku až po jeho konec.* {% endhint %} {% hint style="warning" %} *Pokud si potřebujete nastavit pozadí stránky pro potřeby **Pozvánek**, přesuňte se na záložku "Showroom" v rámci Výchozího WebChat balíčku.* {% 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/pro-administratory/sprava-tenantu/nastaveni/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.