# 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:

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

Pro otevření chatovacího okna funkce:

```js
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í:

```js
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:

```js
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:

```js
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:

```js
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:

```js
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ů**

{% hint style="success" %}
*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***](/pro-administratory/sprava-tenantu/nastaveni/aplikace.md)***.***
{% endhint %}

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:

```js
$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.

```js
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:

```js
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**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mluvii.com/pro-it-specialisty/customizace/vlastni-vstup-pop-up.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.