Customized microsites serve as separate gateways for clients in the mluvii application, its functionality is essentially big widgets. The creation process requires setting up a configuration widget, creating an HTML document, adding CSS styles, adding Javascript, and saving the page to any hosting that supports HTTPS protocol.
For its simplicity, as in other instructions, we will use codepen.io. You can start here.
Set up a WebChat widget
You create a new/modify an existing configuration widget in the application administration in the Configuration widgets section. You set up the widget button for “any button” - this will not show the button, however all the functionality with the button connected will be available to you. The chat window setting is optional.
The creation process
In these instructions you can create a microsite for Callback/Invitation, or chat and AV calls that will be able to connect users to the mluvii application, able to view the status of the button and work with call parameters (both preset and customized variables). The final version will be the following (Live version here):
Create an HTML file
The HTML document is as follows. Used images are stored on github pages, where you will save the entire microsite.
Add CSS styles
Adding JavaScript
Javascript will bring your microsite to life. First enter the code of your configuration widget.
Begin first with the status of the widget, whether or not the operators are assigned to that widget online, busy or offline. And with this feature:
owidget.setStatusUpdateCallback()
As a callback parameter a feature is taken that will be called each time the operator status information arrives from the server. This callback takes thecodeparameter, i.e. number 0 if the operators are offline, 1 - if they are online and 2 - if busy.
The $ owidgetOnLoad function code will still look like this:
The next step is to launch the button to enter the button mluvii application. Let us first look at the Callback/Invitation option.
On the page, you have an input to enter an invitation number or a phone number and a button to enter the application. With this button, you will hear a click, as soon as it happens, we will open a large space in the mluvii application, unless all the operators are offline:
constwidgetButton=document.getElementById('WidgetInput-button');constwidgetInput=document.getElementById('WidgetInput-input');widgetButton.addEventListener('click',function() {if(!widgetOnline) return; // tuto proměnnou deklarujeme a nastavujeme výše.owidget.openApp('callshow',widgetInput.value);}
You now add regular expression validation input so that only six and nine-digit numbers can be sent to the server, and the user will see a message about this status:
consthints=document.getElementById('Hints');constregNumberLength6=newRegExp('^\\d{6}$');constregNumberLength9=newRegExp('^\\d{9}$');widgetButton.addEventListener('click',function() {if(!widgetOnline) return; // tuto proměnnou deklarujete a nastavujete výše.// V případě, že input neprošel jedním z našich testů, zobrazíte nápověduif(!regNumberLength6.test(widgetInput.value) ||!regNumberLength9.test(widgetInput.value)) {hints.classList.remove('isHidden'); }// Pokud je číslo šestimístné, zahájíte Pozvánku v novém okněif(regNumberLength6.test(widgetInput.value)) {owidget.openApp('callshow',widgetInput.value) }// Pokud je číslo devítimístné, zahájíte callback v novém okněif(regNumberLength9.test(widgetInput.value)) {owidget.openApp('callback',widgetInput.value); }}
For callback you must still readjust and use the features:
To make sure that the prompter disappears as soon as a user enters a six or nine-digit number into the input, create an “event listener” for this case:
This secures the basic functionality of your microsite.
Chat, video chat
If you would like to provide customers with Callback/Invitations to provide chat or AV call services, just replace your Callback/Invitations feature for chat initialization or AV calls in your case. You can also delete the input for the invite number/phone number as these features do not need a parameter - you will also eliminate your testing of the embedded number.
Chat initialization:
owidget.openChat();
Initiate an AV call:
owidget.openApp("av");
The “event listener” on the call button would look like this in the case of an AV call:
Along with a phone number or invitation number, you can send customized parameters by your operators. We created an input for this purpose on the microsite, which, if filled in, sends a variable (parameter) to the server. Enter the code before the tests with regular expressions:
You can also count on any other interactions, such as the log in/out of the user on the microsite. For the listener for the “Start Call” button, we would create additional listeners for the Login and Logout buttons, where the assumption is that the website has its own logic of user authentication. Use mluvii features at the moment of successful authentication/logout:
constlogin=document.getElementById('login');constlogout=document.getElementById('logout');login.addEventListener('click',function() { // Logika autentizace zde, výsledek autentizace je přiřazené id uživatele, v callbacku autentizace bychom přidali naší funkci:
constfoundUserId='as3d21sad351as-as1d';owidget.addCustomData('navod_clientId', foundUserId);});logout.addEventListener('click',function() {// Logika odhlášení zde, v callbacku odhlášení pak použijeme funkce:owidget.removeCustomData('navod_clientId'); // owidget.clearCustomData();});
The owidget.removeCustomData feature takes the name of the variable you want to delete as the parameter. The owidget.clearCustomData () feature deletes all variables.
The Javascript of your microsite eventually looks like this:
Microsite publishing
If you are using codepen.io when creating your own CTA, it is now necessary to export the CTA. Click the “Save” button, then export it in “.zip” format
You can save CTA’s created as a subpage of your website or use any web hosting such as Github pages.
If you used the text editor, the resulting page will look like this:
