Vlastní vstup CTA

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 CTA na libovolný webový hosting podporující protokol HTTPS nebo na vaší webovou stránku a následně přidat odkaz na CTA v administraci aplikace mluvii.

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

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

Jak postupovat

HTML dokument

Vytvoříte jednoduchý HTML dokument. CTA 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 CTA pomocí HTML, můžete vložit CSS styly.

Javascript

Chcete-li mít CTA 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í CTA, otevření chatu

Pro zavření CTA slouží funkce:

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

Pro otevření chatovacího okna funkce:

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

V CTA je vytvořený křížek pro zavření pop-upu. Ke zprovoznění křížku budete v CTA 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 CTA můžete zavolat všechny custom parametry, které jsou se zákazníkem 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í CTA 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 CTA 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é CTA 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 CTA:

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 konfiguračního balíčku.

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

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

Změna zobrazení CTA na základě vlastních parametrů

Aplikace mluvii umožňuje pro CTA 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 konfiguračního balíčku, 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 CTA:

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

$owidget je objekt reprezentující váš konfigurační balíček 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 konfiguračního balíčku na vašem webu. Tímto v našem CTA 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 vaše CTA, 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 CTA, které se dynamicky mění dle jazyka tlačítka, podstránky webu a přihlášení uživatele.

Uložení CTA na hosting

Pokud jste při tvorbě vlastního CTA využili codepen.io, je nyní potřeba CTA exportovat. Klikněte na tlačítko „Save“, poté exportujte v „.zip“ formátu:

Vytvořené CTA 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.

Vložení CTA do konfiguračního balíčku

V Nastavení -> Balíček -> CTA u balíčku v záložce „Tlačítko chat“ u pokročilého nastavení možnost „Stránka“ v prvku iframe u pole „Typ upozornění“ a do polí pod ním vložte URL adresu vašeho CTA a požadované rozměry.

results matching ""

    No results matching ""