6. diel - Webový chat Tawk.to
V minulej lekcii, Facebook prihlasovanie v PHP , sme sa naučili prihlasovanie cez Facebook v PHP.
V tejto lekcii si ukážeme, ako vytvoriť jednoduchú online zákaznícku podporu vo forme chatu. Chat na webových stránkach býva čím ďalej tým viac častejšie. Chat si programovať nebudeme, to by nám zabralo veľa práce a času. Môžeme tak komunikovať napríklad so svojimi zákazníkmi, keď práve potrebujú našej radu napríklad iz mobilného zariadenia, zatiaľ čo si prezerajú náš e-shop a ušetrí čas a financie. Využijeme online službu tawk.to, ktorá je zadarmo a jej použitie a implementácia jednoduchá.
Nesporná výhoda tejto služby je, že je zadarmo (pokiaľ nepotrebujeme napríklad odstrániť zmienku, že chat pochádza z Tawk.to), funguje veľmi dobre a za minimálnu námahu nám poskytne veľký potenciál, nech do e-shopov alebo akýchkoľvek iných stránok, kde by sme radi boli bližšie zákazníkom či užívateľom. Služba Tawk.to uľahčuje a urýchľuje komunikáciu a myslím, že tu nebude veľa z vás, čo ešte nevyužili túto alebo podobnú službu.
Registrácia
Po registrácii zaberie nastavenie len pár minút a hotový chat je pripravený na použitie.
Ako prvý navštívime adresu tawk.to. Uprostred
stránky a tiež v pravom hornom rohu máme zelené tlačidlo
SIGN UP FREE, na ktoré klikneme. Zadáme meno, email a heslo a
registráciu potvrdíme. Ďalej nastavíme jazyk, ja zvolím češtinu. V druhom
kroku zadáme názov a URL adresu našej stránky a tiež názov widgetu. Názov
widgetu je ľubovoľný, môžeme ho pomenovať ako názov stránky. V treťom
kroku môžeme pozvať svojich zamestnancov, ktorí budú mať prístup k
natavenie chatu a k správam. Admin má všetky práva a
Agent môže iba odpovedať na správy. Ak nemáme zamestnanca,
tento krok môžeme preskočiť. Dá sa k nemu samozrejme vrátiť neskôr.
Posledný krok je samotná inštalácia widget. Môžeme použiť skript, ktoré
vložíme na všetky stránky, kde chceme mať zobrazený chat. Ak používame
napríklad redakčný systém Wordpress, Drupal, Joomla
a i., Môžeme si stiahnuť plugin, ktorý nám vloží skript na stránky.
Tento skript si teda môžeme skopírovať do schránky, vrátime sa k nemu o
niečo neskôr.
Vytvorenie nového chatu
Po kliknutí na "Hotovo" sa nám otvorí webové rozhranie, cez ktoré môžeme spravovať naše chaty. Môžeme kliknúť na Take Tour a pozrieť sa na ich pripraveného sprievodcu. Sprievodca môžeme odkliknúť malým textom "No thanks, I'LL take it from here".
Rozhranie vyzerá takto:
Najprv klikneme vľavo dole na obrázok ozubeného kolesa (Administrátor). Potom budeme mať ďalšie ozubené koliesko uprostred hore rozhranie. Tu máme náš chat, ktorý sme na začiatku vytvorili. Ak by sme chceli ďalšie chat, napríklad na druhý web, klikneme na Pridať vlastnosť a vyplníme zase povinné pole.
Nastavenia chatu
Ak klikneme z ponuky ozubeného kolesa na vytvorený konkrétny chat, môžeme tu nájsť nastavenia chatu, ako napríklad farba chatu, časová zóna, jazyk a alebo nastaviť automatické zapínanie alebo vypínanie chatu podľa času. Je tu veľa ďalšieho nastavenia, treba môžeme chat určiť len pre mobilné zariadenia. Pre nás bude dôležitá implementácia na stránky, čiže kód vpravo hore si skopírujeme.
Nižšie vidíme záložku Nastavenie členov, tu si môžeme pridať kolegu, sekretárku alebo kohokoľvek, kto potom môže komunikovať prostredníctvom tohto chatu (už spomínaného Agenta). V záložke Chat widget pri okienku Obsah widgetu po stlačení tlačidla Edit si môžeme nastaviť nadpis, uvítaciu správu a podobne. Nebudem sa o nastavení príliš rozpisovať, pretože rozhranie je pomerne dosť intuitívne a kto sa preklikne záložkami, určite za chvíľu nastaví svoj chat podľa svojich predstáv. Odlišné nastavenia si môžete pozrieť tu, na týchto stránkach ITnetwork vľavo dole, ktoré tiež využívajú služby Tawk.to.
Vloženie chatu na web
Konečne sa dostávame k implementácii. Pre prehľadnosť uvediem len základné rozloženie webovej stránky, postup bude vždy rovnaký:
<!DOCTYPE html> <html lang="cs-cz"> <head> <meta charset="utf-8" /> <title>Chat</title> </head> <body> <h1>Obsah webových stránek</h1> </body> </html>
Skopírovaný kód vložíme do hlavičky <head>:
<!DOCTYPE html> <html lang="cs-cz"> <head> <meta charset="utf-8" /> <title>Chat</title> <!--Start of Tawk.to Script--> <script type="text/javascript"> var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); (function(){ var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0]; s1.async=true; s1.src='https://embed.tawk.to/6152716b74897c7d8147330d/2dgl872t2'; s1.charset='UTF-8'; s1.setAttribute('crossorigin','*'); s0.parentNode.insertBefore(s1,s0); })(); </script> <!--End of Tawk.to Script--> </head> <body> <h1>Obsah webových stránek</h1> </body> </html>
Teraz máme chat vložený na našom webe a môžeme ho po načítaní stránky vidieť:
Po začatí novej konverzácie si môžeme vyskúšať, že začne vyzváňať naše rozhrania a objaví sa nová prichádzajúce správa, na ktorú možno ihneď odpovedať:
Tento chat funguje aj keď nemáme webové stránky nahrané na hostingu a prístupné pre ostatných, takže si môžete vyskúšať svoj chat aj pri tvorení vášho webu na localhost. Treba však vytvoriť server na localhost pomocou XAMPP, WAMP pod. Samotné otvorenie HTML súboru nestačí.
Samozrejme je nutné, aby vygenerovaný kód bol súčasťou každej stránky, na ktoré chcete mať chat zobrazený. Ak teda máte statický web s napríklad šiestimi podstránkami a na všetkých chcete mať dostupný chat, je nutné ich pridať do kódu každej stránky.
V budúcej lekcii, Platobná brána GoPay - Predstavenie a registrácia , sa budeme venovať základom platobnej brány GoPay a prejdeme proces obchodnej časti implementácie brány.
