Vlastní mikrostránky slouží jako samostatné vstupní brány pro klienty do aplikace mluvii, svou funkčností jde v podstatě o velké widgety. Postup tvorby vyžaduje nastavit WebChat widget, vytvořit HTML dokument, přidat CSS styly, přidat Javascript a uložit stránku na libovolný hosting podporující protokol HTTPS.
Pro svou jednoduchost, tak jako v jiných návodech, budeme používat codepen.io. Začít můžete zde.
Nastavení konfiguračního balíčku
V administraci aplikace v sekci WebChat si vytvoříte nový / upravíte stávající WebChat widget. WebChat tlačítko nastavíte na "žádné tlačítko" - tím se vám tlačítko nebude zobrazovat, nicméně všechny funkcionality s tlačítkem spojené vám budou k dispozici. Nastavení chatovacího okna je libovolné.
Postup tvorby
V tomto návodu si můžete vytvořit mikrostránku pro Callback/Pozvánku, příp. chat a AV hovor, která bude umět připojit uživatele do aplikace mluvii, budou umět zobrazit stav tlačítka a pracovat s parametry hovorů (přednastavenými i vlastními parametry). Konečná podoba bude následující (Live verze zde):
Vytvoření HTML souboru
HTML dokument je následující. Použité obrázky jsou uloženy na github stránkách, kde celou mikrostránku nakonec uložíte.
Přidání CSS stylů
Přidání Javascriptu
Javascriptem přivedete vaší mikrostránku k životu. Nejdříve vložíte kód vašeho konfiguračního balíčku.
Jako první začněte s indikací stavu balíčku, tedy to, zdali jsou operátoři přiřazení k danému WebChat widgetu online, zaneprázdnění nebo offline. A to touto funkcí:
owidget.setStatusUpdateCallback()
Tato funkce bere jako parametr callback funkci, která bude volána pokaždé, kdy ze serveru přijdou informace o stavu operátorů. Tento callback bere parametr code, tedy číslo 0 v případě, že operátoři jsou offline, 1 - v případě, že jsou online a 2 - v případě zaneprázdnění.
Kód funkce $owidgetOnLoad bude zatím vypadat takto:
Dalším krokem je zprovoznění tlačítka pro vstup do aplikace mluvii. Nejprve se podívejme na variantu pro Callback/Pozvánku.
Na stránce máte input pro zadání čísla pozvánky nebo telefonního čísla a tlačítko pro vstup do aplikace. Na tomto tlačítku budete naslouchat klepnutí, jakmile se tak stane, otevřeme velkou místnost aplikace mluvii, pokud nejsou všichni operátoři 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);}
Nyní přidáte validaci inputu regulárním výrazem, aby bylo možné na server posílat pouze šesti a devítimístná čísla a uživateli zobrazíte i zprávu o tomto stavu:
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); }}
Případ pro callback musíte ještě poupravit a použít funkce:
Tím máte základní funkčnost vaší mikrostránky zajištěnou.
Chat, videohovor
Pokud byste chtěli zákazníkům místo Callback/Pozvánky poskytovat služby chatu nebo AV hovoru, stačí k tomu ve vašem případě vyměnit funkci pro inicializaci Callbacku/Pozvánky za funkce pro inicializaci chatu, nebo AV hovoru. Můžete také odstranit input pro číslo pozvánky /telefonní číslo, jelikož tyto funkce daný parametr nepotřebují - s tím odstraníte i vaše testování vloženého čísla.
Inicializace chatu:
owidget.openChat();
Inicializace AV hovoru:
owidget.openApp("av");
„Event listener“ na tlačítku začít hovor by tedy v případě AV hovoru vypadal takto:
Spolu s tel. číslem nebo číslem pozvánky můžete operátorům odeslat vlastní proměnné. Na mikrostránce jsme k tomuto účelu vytvořili input, který, bude-li vyplněn, pošle na server proměnnou (parametr hovoru). Kód vložíte před testy regulárními výrazy:
Na mikrostránce můžete počítat i s dalšími libovolnými interakcemi, např. v podobě přihlášení /odhlášení uživatele. Za listenerem pro tlačítko „Začít hovor“ bychom vytvořili další listnery pro Login a Logout tlačítka, u kterých je předpoklad, že web má vlastní logiku autentizace uživatelů. V momentě zdařilé autentizace /odhlášení využijte funkcí mluvii:
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();});
Funkce owidget.removeCustomData si bere jako parametr název proměnné, kterou chcete smazat. Funkce owidget.clearCustomData() smaže všechny proměnné.
Javascript vaší mikrostránky nakonec vypadá následovně:
Publikace mikrostránky
Pokud jste při tvorbě vlastního Pop-upu využili codepen.io, je nyní potřeba Pop-up exportovat. Klikněte na tlačítko „Save“, poté exportujte v „.zip“ formátu:
Vytvořený pop-up můžete uložit buď jako podstránku vašeho webu, nebo využít jakýkoliv webhosting, např. Github stránky.
Pokud jste využili textového editoru, výsledná stránka bude vypadat následovně:
