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.
Last updated
Was this helpful?