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í:

konfigurace spouštěcích pravidel v administraci aplikace
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.

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.

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é.

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ř.:

$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:

    <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:

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) 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:

<!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>

PreviousVlastní vstup Pop-up NextKonfigurace vlastní mikrostránky

Last updated 2 years ago

Was this helpful?

<!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>