# 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: 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-it-specialisty/customizace/vlastni-funkce-webchat-balicku.md?ask=<question>
```

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.
