Lekce 6 - Webový chat Tawk.to
V minulé lekci, Twitter přihlašování v PHP, jsme se naučili přihlašování přes Twitter v PHP.
V této lekci si ukážeme, jak vytvořit jednoduchou online zákaznickou podporu ve formě chatu. Chat na webových stránkách bývá čím dál tím víc častější. Chat si programovat nebudeme, to by nám zabralo mnoho práce a času. Můžeme tak komunikovat například se svými zákazníky, když zrovna potřebují naší radu třeba i z mobilního zařízení, zatímco si prohlížejí náš e-shop a ušetří čas a finance. Využijeme online službu tawk.to, která je zdarma a její použití a implementace jednoduchá.
Nesporná výhoda této služby je, že je zdarma (pokud nepotřebujeme například odstranit zmínku, že chat pochází z Tawk.to), funguje velice dobře a za minimální námahu nám poskytne velký potenciál, ať do e-shopů nebo jakýchkoli jiných stránek, kde bychom rádi byli blíže zákazníkům či uživatelům. Služba Tawk.to usnadňuje a urychluje komunikaci a myslím, že tu nebude mnoho z vás, co ještě nevyužili tuto nebo podobnou službu.
Registrace
Po registraci zabere nastavení pouze pár minut a hotový chat je připraven k použití.
Jako první navštívíme adresu tawk.to. Uprostřed
stránky a také v pravém horním rohu máme zelené tlačítko
SIGN UP FREE, na které klikneme. Zadáme jméno, email a heslo a
registraci potvrdíme. Dále nastavíme jazyk, já zvolím češtinu. V druhém
kroku zadáme název a URL adresu naší stránky a také název widgetu. Název
widgetu je libovolný, můžeme ho pojmenovat jako název stránky. V třetím
kroku můžeme pozvat své zaměstnance, kteří budou mít přístup k
natavení chatu a ke zprávám. Admin má všechny práva a
Agent může pouze odpovídat na zprávy. Pokud nemáme
zaměstnance, tento krok můžeme přeskočit. Dá se k němu samozřejmě
vrátit později. Poslední krok je samotná instalace Widgetu. Můžeme
použít skript, které vložíme na všechny stránky, kde chceme mít
zobrazený chat. Pokud používáme například redakční systém Wordpress, Drupal, Joomla aj., můžeme si stáhnout
plugin, který nám vloží skript na stránky. Tento skript si tedy můžeme
zkopírovat do schránky, vrátíme se k němu o něco později.
Vytvoření nového chatu
Po kliknutí na "Hotovo" se nám otevře webové rozhraní, přes které můžeme spravovat naše chaty. Můžeme kliknout na Take Tour a podívat se na jejich připraveného průvodce. Průvodce můžeme odkliknout malým textem "No thanks, I’ll take it from here".
Rozhraní vypadá takto:
Nejprve klikneme vlevo dole na obrázek ozubeného kola (Administrátor). Poté budeme mít další ozubené kolečko uprostřed nahoře rozhraní. Zde máme náš chat, který jsme na začátku vytvořili. Pokud bychom chtěli další chat, třeba na druhý web, klikneme na Přidat vlastnost a vyplníme zase povinné pole.
Nastavení chatu
Pokud klikneme z nabídky ozubeného kola na vytvořený konkrétní chat, můžeme zde najít nastavení chatu, jako například barva chatu, časová zóna, jazyk a nebo nastavit automatické zapínání či vypínání chatu dle času. Je tu spousta dalšího nastavení, třeba můžeme chat určit jen pro mobilní zařízení. Pro nás bude důležitá implementace na stránky, čili kód vpravo nahoře si zkopírujeme.
Níže vidíme záložku Nastavení členů, zde si můžeme přidat kolegu, sekretářku nebo kohokoli, kdo pak může komunikovat prostřednictvím tohoto chatu (již zmíněného Agenta). V záložce Chat widget u okénka Obsah widgetu po stisknutí tlačítka Edit si můžeme nastavit nadpis, uvítací zprávu a podobně. Nebudu se o nastavení příliš rozepisovat, protože rozhraní je poměrně dost intuitivní a kdo se prokliká záložkami, určitě za chvíli nastaví svůj chat dle svých představ. Odlišné nastavení si můžete prohlédnout zde, na těchto stránkách ITnetwork vlevo dole, které také využívají služeb Tawk.to.
Vložení chatu na web
Konečně se dostáváme k implementaci. Pro přehlednost uvedu pouze základní rozložení webové stránky, postup bude vždy stejný:
<!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>
Zkopí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>
Nyní máme chat vložen na našem webu a můžeme ho po načtení stránky vidět:
Po zahájení nové konverzace si můžeme vyzkoušet, že začne vyzvánět naše rozhraní a objeví se nová příchozí zpráva, na kterou lze ihned odpovědět:
Tento chat funguje i když nemáme webové stránky nahrané na hostingu a přístupné pro ostatní, takže si můžete vyzkoušet svůj chat i při tvoření vašeho webu na localhostu. Je třeba však vytvořit server na localhostu pomocí XAMPP, WAMP apod. Pouhé otevření HTML souboru nestačí.
Samozřejmě je nutné, aby vygenerovaný kód byl součástí každé stránky, na které chcete mít chat zobrazen. Pokud tedy máte statický web s například šesti podstránkami a na všech chcete mít dostupný chat, je nutné je přidat do kódu každé stránky.
V příští lekci, Odesílání emailů pomocí knihovny PHPMailer v PHP, se naučíme pracovat s knihovnou PHPMailer, která slouží pro odesílání emailů v PHP.
