Vlastní vstup Pop-up

Jedná se o malou webovou stránku, která se následně zobrazí místo výchozího pop-upu. K tomu je potřeba vytvořit HTML dokument, přidat CSS styly, přidat Javascript, nahrát Pop-up na libovolný webový hosting podporující protokol HTTPS nebo na vaší webovou stránku a následně přidat odkaz na Pop-up v administraci aplikace mluvii.

Pro jednoduchost a přehlednost doporučujeme vytvářet vlastní Pop-up pomocí webové aplikace codepen.io.

Pro získání konkrétní představy si rozebereme vytvoření vlastního jednoduchého Pop-upu. Konečná podoba Pop-upu bude vypadat takto:

Jak postupovat

HTML dokument

Vytvoříte jednoduchý HTML dokument. Pop-up může obsahovat libovolné množství HTML elementů - obrázky, texty, inputy, tlačítka apod.

Upozorňujeme, že codepen.io nepodporuje ve free verzi vkládání obrázků, je nutné je uložit na vlastním uložišti. My jsme použili Github stránky, jelikož s nimi budeme v tomto návodu pracovat později.

CSS Styly

Máte-li vytvořenou strukturu Pop-up pomocí HTML, můžete vložit CSS styly.

Javascript

Chcete-li mít Pop-up interaktivní a dynamický, využijte Javascript. Aplikace mluvii nabízí několik funkcí, které vám s vaším záměrem mohou pomoci.

Zavření Pop-upu, otevření chatu

Pro zavření Pop-upu slouží funkce:

window.parent.postMessage({type:"HIDE_MLUVII_CHAT"},"*");

Pro otevření chatovacího okna funkce:

window.parent.postMessage({type:"OPEN_MLUVII_CHAT"},"*");

V Pop-upu je vytvořený křížek pro zavření pop-upu. Ke zprovoznění křížku budete v Pop-upu naslouchat jeho kliknutí:

const cross = document.getElementById('Close');
cross.addEventListener('click', function() {
  window.parent.postMessage({type:"HIDE_MLUVII_CHAT"},"*");
});

Získání přednastavených parametrů

Pomocí funkce:

window.parent.postMessage({type:"GET_MLUVII_CUSTOM_PARAMS"},"*");

Do vašeho Pop-upu můžete zavolat všechny custom parametry, které jsou s klientem do doby zavolání funkce spojeny. V základním nastavení se jedná o přednastavené parametry „jazyk tlačítka“, „URL“ a „název stránky“, kde se daný klient nachází a „jméno daného tlačítka“.

Uvedená funkce se spojí se serverem aplikace mluvii a pošle zpět event, který obsahuje daný parametr. Tomuto eventu musíme naslouchat, a to ještě předtím, než tuto funkci zavoláme:

window.addEventListener('message', function(msg) {
 if(msg.data.type === 'SET_MLUVII_CUSTOM_PARAMS') {
  // Zde bude návazný kód, který se provede při obdržení parametrů.
 }
});

Parametr "msg" callback funkce obsahuje všechna data z parametrů.

Změna zobrazení Pop-upu na základě parametrů

Do naší callback funkce můžeme následně vložit kód, kterým změníme to, co se v Pop-upu zobrazuje.

Prvním příkladem budiž parametr oo1_widget_lang, tedy jazyk tlačítka. Pokud je jazyk tlačítka čeština, zobrazí se český popis. Pokud jiný jazyk, zobrazí se anglicky:

const message = document.getElementById('Message');
if(msg.data.params.oo1_widget_lang === 'cs') {
   message.innerText = 'Chcete se dozvědět více o našem produktu?';
} else {
   message.innerText = 'Do you want to know more about our product?';
}

(Je však možné použít rozdílné Pop-upy i pro jazyky čeština, angličtina a ruština.)

Druhým příkladem budiž parametr oo1_ref_url, neboli URL stránky, odkud zákazník na stránku s naším tlačítkem přišel. Můžete si představit webovou stránku, která má podstránky index.html - hlavní stránka a support.html - technická podpora. Na základě toho, kde se klient nachází, zobrazíte text vašeho Pop-upu:

if(msg.data.params.oo1_ref_url === 'https://patricke004.github.io/customCTA/index.html') {
   // Zde nemusíme provádět nic, necháme původní textaci příp. přeloženou do angličtiny
} else if (msg.data.params.oo1_ref_url === 'https://patricke004.github.io/customCTA/support.html') {
   message.innerText = 'Naši technici jsou Vám nyní k dispozici!';
}

Pro názornost si založte jednoduché webové stránky s index.html a support.html podstránkami na Github pages. Do indexu přidejte jednoduchý link na support stránku a vložte kód vašeho WebChat widgetu.

Vidíte, že při přechodu na support stránku se text Pop-upu mění.

Obdobně můžete využít i parametr oo1_widget. Máte-li na různých podstránkách webu různé WebChat widgety, můžete i tak využít stejný Pop-up a jen jej upravit na základě jména daného balíčku.

Změna zobrazení Pop-upu na základě vlastních parametrů

Aplikace mluvii umožňuje pro Pop-up získat nejen přednastavené parametry, ale i vlastní parametry. Ty je nejdříve nutné nastavit v administraci v sekci Aplikace.

Abyste mohli parametry použít, musí je nejdříve aplikace přijmout. Lze je poslat např. v rámci WebChat widgetu, ve vstupním formuláři, ale i pomocí vlastní webové stránky. Zde je ukázka, jak to provést z webové stránky (např. po přihlášení uživatele, při kliknutí na dané tlačítko apod.).

K zasílání vlastních parametrů na server z webové stránky slouží tato funkce, která je následovaná funkcí pro získání dat ze serveru, jež emituje event typu message, který již nasloucháme v našem Pop-upu:

$owidget.addCustomData(
   'navod_clientName', 'Jan Novak'
);
postMessage({type:"GET_MLUVII_CUSTOM_PARAMS"},"*");

$owidget je objekt reprezentující váš WebChat widget a který je dostupný v rámci vašeho webu (více viz Konfigurace vlastního widgetu).

Tento kód vložíte za kód vašeho WebChat widgetu na vašem webu. Tímto v našem Pop-upu získáte přístup k vlastnímu parametru navod_clientName.

V reálném světě tuto možnost využijete např. při přihlášení zákazníka na vašem webu. Jednoduše si to můžete napodobit přidáním tlačítka „login“ na váš web a funkcí, která bude volána v momentě, kdy na tlačítko uživatel klikne.

const loginButton = document.getElementById('Login');

loginButton.addEventListener('click', function() {
 // zde by měla být logika autentizace uživatele, jakmile se tak stane, zavoláte funkci:
 $owidget.addCustomData(
   'navod_clientName', 'Jan Novak'
 );
 postMessage({type:"GET_MLUVII_CUSTOM_PARAMS"},"*");
});

Následně upravíte váš Pop-up, aby se v něm zobrazovalo jméno uživatele. Uživateli můžete na základě jeho přihlášení zobrazit např. speciální nabídku pro stávající klienty, osobní konzultaci apod. Do callback funkce 'message' event listeneru přidáte:

if(msg.data.params.navod_clientName) {
   message.innerText = 'Uživatel: ' + msg.data.params.navod_clientName + '\n Máme pro Vás speciální nabídku!';
}

Dostáváte tak konečný výsledek, tedy Pop-up, které se dynamicky mění dle jazyka tlačítka, podstránky webu a přihlášení uživatele.

Uložení Pop-upu na hosting

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. Zvolený hosting musí podporovat přístup přes protokol HTTPS.