Customized functions

The mluvii application allows the users to define their own configuration widget features within the startup commands. This functionality gives users the ability to customize the behavior of the widget in the context of their own website.

The procedure to create a customized feature is the following:

configuration of startup commands in the application administration
inserting a customized feature into the website code

Due to its simplicity, as in other tutorials, we recommend using codepen.io. You can start here.

The option to use customized functions must be set within the startup commands. The startup commands allow you to call to different actions depending on the defined conditions (such as customer’s time spent on the site, browser language, etc.) - you can find detailed instructions here.

Now set the startup commands to “time spent on pages” to more than (>) 5 seconds. Once this happens, your features will launch. “The name of the customized function must begin with an underscore” - e.g. “_vlastniFunkce”. So everything is set up in administration.

Inserting a customized feature into a website

Now you need to define the customized feature and paste it into your website code. In order for an application to recognize the feature, it is necessary to define it as a method of the $ owidget object, e.g.:

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

The feature can be inserted either directly into the configuration widget code - then the code would look like this:

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

Or anywhere on the website. In this case, however, it is necessary to wait for the full upload of the web page (i.e. the configuration widget code), most often by listening to the “load” of the browser window event:

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

How you use the feature depends on you.

A simple example is to display an advertising banner when the customer is on the site for more than five seconds. An example would look like this:

Other examples of use may be situations where you want users to see different things based on language, based on the website subpage they are in, or you can also add additional customized parameters for a call to your customer.

And by using customized parameters (here you can find precise instructions to their implementation) your simple page should be ready for use. Based on its own features, the configuration package can display an ad banner and add a call parameter to the customer if it has been delayed on the website for a longer period.

If you used a text editor, the resulting HTML file would look like this:

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

PreviousCustomized Pop-up NextCustomized microsite

Last updated 3 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>

hashtagSetting the configuration widget startup commands.

hashtagInserting a customized feature into a website

Setting the configuration widget startup commands.

Inserting a customized feature into a website