LogoLogo
Mluvii webLoginAPIDEMO
English
English
  • ABOUT
  • UPDATES MLUVII
    • 2.125
    • 2.124
    • 2.123
    • Archive
      • 2.122
      • 2.121
      • 2.120
      • 2.119
      • 2.118
      • 2.117
      • 2.116
      • 2.115
      • 2.114
      • 2.113
      • 2.112
      • 2.111
      • 2.110
      • 2.109
      • 2.108
      • 2.107
      • 2.106
      • 2.105
      • 2.104
      • 2.103
      • 2.102
      • 2.101
      • 2.100
      • 2.99
      • 2.98
      • 2.97
      • 2.96
      • 2.95
      • 2.94
      • 2.93
      • 2.92
      • 2.91
      • 2.90
      • 2.89
      • 2.88
      • 2.87
      • 2.86
      • 2.85
      • 2.84
      • 2.83
      • 2.82
      • 2.81
      • 2.80
      • 2.79
      • 2.78
      • 2.77
      • 2.76
      • 2.75
      • 2.72
      • 2.71
      • 2.70
      • 2.68
      • 2.67
      • 2.66
      • 2.65
      • 2.64
      • 2.63
      • 2.61
      • 2.60
      • 2.59
      • 2.58
      • 2.57
      • 2.56
      • 2.55
      • 2.54
      • 2.53
      • 2.52
      • 2.51
      • 2.50
      • 2.49
      • 2.48
      • 2.47
      • 2.46
      • 2.45
      • 2.44
      • 2.43
      • 2.42
      • 2.41
      • 2.40
      • 2.39
      • 2.38
      • 2.37
      • 2.36
      • 2.35
      • 2.34
      • 2.33
      • 2.32
      • 2.31
      • 2.30
      • 2.29
      • 2.28
      • 2.27
      • 2.26
      • 2.25
      • 2.24
      • 2.23
      • 2.22
      • 2.21
      • 2.20
      • 2.19
  • LICENSE TYPES
  • FOR OPERATORS
    • Login
    • Workspace
    • Accept client
    • Client interaction
      • WebChat
      • Client tab
      • Videocall
      • Share
      • Templates
      • Browser
      • End Session
      • Hero Cards
      • E-mail
      • Facebook Messenger
      • Apple Messages for Business
      • WhatsApp
      • VKontakte
      • IP Telephony
      • Telephone campaigns
    • Profile
  • FOR ADMINISTRATORS
    • Company management
      • Licences
      • Users
      • External contacts
      • Performance
      • Operator metrics
      • Dashboards
    • Tenant management
      • Contact directory
      • Sessions
      • All e-mails
      • Operators
      • Campaigns
        • Telephone campaign
          • Campaign Contacts
          • Missed Calls
        • WhatsApp campaign
          • Campaign Contacts
      • Settings
        • Groups
          • By operator utilization
          • To whole group (deprecated)
        • External groups
        • Routing
        • Rules
        • WebChat
        • Forms
          • Forms
          • Hero Cards
        • Chatbots
          • API chatbot
          • Microsoft Bot Framework chatbot
        • WhatsApp
          • Registration process
          • Adding a new phone number
          • Eligible Phone Numbers
          • Pricing
          • Template Messages
            • Conversations
          • Whatsapp ecosystem comparison
          • Data security and GDPR
          • Add WhatsApp widget to website
        • Apple Messages for Business
          • Add Apple widget to website
          • Data security and GDPR
        • Facebook Messenger
          • Add Facebook Messenger widget to website
        • VKontakte
        • E-mails
        • IP Telephony
        • Files
        • Templates
        • Routing visualization
        • Application
          • General
        • Blacklist
        • GDPR
  • FOR IT SPECIALISTS
    • Supported widget methods
    • Add WebChat button to website
    • Add Apple widget to website
    • Customization
      • Customized forms
        • Entry forms
          • Basic entry forms
          • Tenant selection forms
        • Feedback form
          • Basic feedback forms
          • Feedback forms with emojis
          • Feedback form with stars
        • Offline forms
      • Parameters
      • Customized Pop-up
      • Customized functions
      • Customized microsite
    • Public API
      • Authentication
      • Swagger
      • Public API FAQ
      • Webhooks
      • Webhooks FAQ
    • WIDGET API
    • Co-browsing
    • Mobile SDK
      • Android
      • iOS
    • Chatbot connection
      • Microsoft Bot Framework
      • API chatbot
        • API chatbot connection
        • Chatbot API-specific activities and events
      • Supported activities and events
      • Tips and Tutorials
    • Realtime statistics
      • Connection to influx database
      • Existing metrics
      • Examples
      • Grafana
    • Connect Office 365 mailbox
    • Connect Gmail mailbox
    • Software architecture
      • Data encryption
    • Telephony
    • Facebook
    • Files
    • WebChat
    • Cookies
    • Desktop Application
  • SECURITY
  • SYSTEM REQUIREMENTS
    • Minimum HW requirements for operators
    • Minimum SW requirements for operators
    • Supported browsers
    • Audio/Video
    • Supported languages
    • Desktop application
    • Minimum server requirements
    • Mobile application
  • HELPDESK
    • Bug Reporting
    • Manuals
      • Delete browser cookies
      • Delete Local and Session Storage
      • Clear cache memory
      • Add timestamps to logs in the browser console
      • Disconnecting inactive tabs in Google Chrome
    • FAQ
    • Keyboard shortcuts
    • Glossary
Powered by GitBook
On this page
  • Setting the configuration widget startup commands.
  • Inserting a customized feature into a website

Was this helpful?

  1. FOR IT SPECIALISTS
  2. Customization

Customized functions

PreviousCustomized Pop-upNextCustomized microsite

Last updated 2 years ago

Was this helpful?

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:

  1. configuration of startup commands in the application administration

  2. inserting a customized feature into the website code

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

Setting the configuration widget startup commands.

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 .

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.

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>

And by using customized parameters ( 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.

here
here
here