> 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/pro-it-specialisty/customizace/vlastni-funkce-webchat-balicku.md).

# Vlastní funkce WebChat balíčku

Aplikace mluvii umožňuje uživatelům definovat si vlastní funkce WebChat widgetu v rámci spouštěcích pravidel. Tato funkcionalita dává uživatelům možnost přizpůsobit si chování balíčku v kontextu jejich vlastní webové stránky.

Postup tvorby vlastní funkce je následující:

1. konfigurace spouštěcích pravidel v administraci aplikace
2. vložení vlastní funkce do kódu webové stránky

Pro svou jednoduchost, tak jako v jiných návodech, doporučujeme používat codepen.io. Začít můžete [zde](https://codepen.io/pen?template=KXZyGp).

### Nastavení spouštěcích pravidel konfiguračního balíčku

Možnost použít vlastní funkce je třeba nastavit v rámci spouštěcích pravidel. Spouštěcí pravidla umožňují vyvolat různé akce v závislosti na definovaných podmínkách (např. čas zákazníka strávený na stránkách, jazyk prohlížeče apod.) - podrobný návod naleznete [zde](/pro-administratory/sprava-tenantu/nastaveni/pravidla.md).

{% hint style="info" %}
*Spouštěcí pravidla nyní nastavte na parametr „čas strávený na stránce“ větší než (>) 5 sekund. Jakmile se tak stane, spustí se vaše funkce. ''Název vlastní funkce musí začínat podtržítkem'' - např. ''\_vlastniFunkce''. Tím máme na straně admina vše potřebné nastavené.*
{% endhint %}

### Vložení vlastní funkce na webové stránky

Nyní je potřeba vlastní funkci definovat a vložit do kódu webové stránky. K tomu, aby aplikace funkci rozpoznala, je nutné ji definovat jako metodu objektu $owidget, např.:

```js
$owidget._vlastniFunkce = function() {
   // Vlastní kód funkce
}
```

Funkci můžeme vložit buď přímo do kódu konfiguračního balíčku - pak by kód vypadal takto:

```js
    <script type="text/javascript">
        (function () {
          var scr = document.createElement('script'); scr.type = 'text/javascript'; scr.async = true; scr.charset = 'UTF-8';
          scr.src = '//app.mluvii.com/widget/OOWidget.js';
          scr.$owidgetOnLoad = function (owidget) {
            if (!owidget.isSupported) { return; }
            owidget.init('295b1064-cf5b-4a5d-9e05-e7a74f86ae5e', 'navodFunkce');

            $owidget._vlastniFunkce = function() {
                // Vlastní kód funkce
            }

            owidget.connectToServer();

          };
          var ffs = document.getElementsByTagName('script')[0]; ffs.parentNode.insertBefore(scr, ffs);
        })();
    </script>
```

Nebo kdekoliv na webových stránkách. V takovém případě je však potřeba počkat na úplné nahrání webové stránky (tedy i kódu konfiguračního balíčku), nejčastěji pomocí naslouchání „load“ eventu okna prohlížeče:

```js
window.addEventListener('load', function() {
   $owidget._vlastniFunkce = function() {
       // Vlastní kód funkce
   }
});
```

Jak vlastní funkci využijete, již záleží na vás.

Jednoduchým příkladem budiž zobrazení reklamního banneru v momentě, kdy je zákazník na stránkách déle než pět sekund. Příklad by vypadal např. takto:

Dalšími příklady užití mohou být situace, kdy chcete uživatelům webu zobrazit rozdílné věci na základě jazyka, na základě podstránky webu, na které se nacházejí, příp. můžete zákazníkovi ve funkci přidat i vlastní doplňující parametry.

A s použitím vlastních parametrů (přesný návod k jejich implementaci najdete [zde](/pro-it-specialisty/customizace/parametry.md)) by vaše jednoduchá stránka měla být připravena k použití. Na základě vlastních funkcí konfiguračního balíčku umí zobrazit reklamní banner a přidat zákazníkovi parametr v případě, že se na stránkách zdržel delší dobu.

Pokud jste využili textového editoru, výsledný HTML soubor by vypadal např. takto:

```html
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: Raleway;
        }
        html, body {
            margin: 0;
            padding: 0;
        }
        .Page {
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: left;
        }
        #Banner {
            width: 100px;
            height: 80vh;
            background-color: grey;
            margin-left: 20px;
            display: none;
        }
        #Banner>p {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size: 20px;
            height: 100%;
            text-align: center;
            margin: 0 auto;
        }

    </style>
</head>
<body>
    
    <div class="Page">
        <div id="Banner">
            <p>Reklamní banner</p>
        </div>
    </div>

    <script type="text/javascript">
        (function () {
          var scr = document.createElement('script'); scr.type = 'text/javascript'; scr.async = true; scr.charset = 'UTF-8';
          scr.src = '//app.mluvii.com/widget/OOWidget.js';
          scr.$owidgetOnLoad = function (owidget) {
            if (!owidget.isSupported) { return; }
            owidget.init('295b1064-cf5b-4a5d-9e05-e7a74f86ae5e', 'navodFunkce');

            owidget.connectToServer();

          };
          var ffs = document.getElementsByTagName('script')[0]; ffs.parentNode.insertBefore(scr, ffs);
        })();
    </script>

    <script>
        window.addEventListener('load', function() {
            $owidget._vlastniFunkce = function() {
                const banner = document.getElementById('Banner');
                banner.style.display = 'block';
            }

            $owidget._clientUndecided = function() {
                $owidget.addCustomData('navod_undecided', true);
            }
        });

    </script>


</body>
</html>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.mluvii.com/pro-it-specialisty/customizace/vlastni-funkce-webchat-balicku.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
