# Hero Cards

Pod názvem Hero Cards se skrývají interaktivní formuláře, které nabízejí nové způsoby propojení zákaznické péče a prodeje stejně jako pokročilou práci se strukturovanými daty a pokročilý reporting. 

{% hint style="warning" %}
*Hero Cards jsou jednou z prémiových funkcí mluvii, a v administraci je tak najdete jen v případě, že licence vaší společnosti tuto funkci zahrnují.*
{% endhint %}

Do editoru Hero Cards se dostanete přes ***Nastavení -> Formuláře***. Nastavení formulářů mohou provádět uživatelé s minimálním oprávněním **Správce Tenantu**.

{% hint style="info" %}
*Podpora jednotivých komponent napříč komunikačními kanály není jednotná. Editor Hero Cards v aplikaci vám neumožní použít nepodporovanou komponentu.*
{% endhint %}

<table><thead><tr><th width="213">Komponenta</th><th width="106" align="center">WebChat</th><th width="258" align="center">Apple Messages for Business</th><th width="148">WhatsApp</th></tr></thead><tbody><tr><td><a href="#aag"><strong>Text</strong></a></td><td align="center">✔</td><td align="center">x</td><td>x</td></tr><tr><td><a href="#aah"><strong>Obrázek</strong></a></td><td align="center">✔</td><td align="center">x</td><td>x</td></tr><tr><td><a href="#aai"><strong>Video</strong></a></td><td align="center">✔</td><td align="center">x</td><td>x</td></tr><tr><td><a href="#aaj"><strong>Pole</strong></a></td><td align="center">✔</td><td align="center">x</td><td>x</td></tr><tr><td><a href="#aak"><strong>Seznam</strong></a></td><td align="center">✔</td><td align="center">x</td><td>x</td></tr><tr><td><a href="#aal"><strong>Potvrzovací tlačítka</strong></a></td><td align="center">✔</td><td align="center">x</td><td>x</td></tr><tr><td><a href="#aam"><strong>Autentizační tlačítka</strong></a></td><td align="center">✔</td><td align="center">x</td><td>x</td></tr><tr><td><a href="#aan"><strong>Výběr času</strong></a></td><td align="center">✔</td><td align="center">✔</td><td>x</td></tr><tr><td><a href="#aao-1"><strong>Katalog</strong></a></td><td align="center">✔</td><td align="center">✔</td><td>x</td></tr><tr><td><a href="#aap"><strong>Rychlá odpověď</strong></a></td><td align="center">✔</td><td align="center">✔</td><td>x</td></tr><tr><td><strong>Žádost o platbu</strong></td><td align="center">x</td><td align="center">✔</td><td>x</td></tr></tbody></table>

{% hint style="warning" %}
*Na Hero Cards můžete narazit i v případě komunikačního kanálu WhatsApp. **Hero Card typu WhatsApp (tzv. Template Message)  na rozdíl od ostatních Hero Cards lze v editoru formulářů editovat pouze omezeně (nahrání obrázku či videa). Až na tyto výjimky jsou obsah a podoba je definovány mimo platformu mluvii.** Více informací naleznete* [*zde*](https://docs.mluvii.com/pro-administratory/sprava-tenantu/whatsapp/template-messages#template-messages)*.*
{% endhint %}

{% hint style="success" %}
*Pokud vytváříte **Hero Card pro*** [***Apple kanál***](https://docs.mluvii.com/pro-administratory/sprava-tenantu/nastaveni/apple-messages-for-business)*, doporučujeme v rámci komponent **list picker** a **time picker** použít velikost obrázku  (180 x 180 pixelů).*
{% endhint %}

## **Jak vytvořit novou Hero Card**

* Pro vytvoření nové Hero Card klikněte na tlačítko ***Přidat***.&#x20;
* Nejprve zvolte název formuláře (v tomto případě Hero Card).&#x20;
* Dále **vyberte typ** (Hero Card) a zvolte kanál, pro který bude Hero karta používána (WebChat nebo Apple).&#x20;
* Následně můžete zvolit, v poli ***Vytvořeno z,*** již existující Hero Card.&#x20;
* Poslední věcí, kterou je třeba zvolit, při vytváření nové Hero Card je její umístění v adresáři *(v případě, kdy nezvolíte umístění v adresáři, bude formulář přidán do výchozí složky - Všechny formuláře.)*.&#x20;
* Na závěr klikněte na tlačítko **Vytvořit**.

{% hint style="success" %}
*Jazyk Hero Cards se řídí podle jazyku, který má klient nastaven v prohlížeči (případně na zařízení). Kromě základního jazyka (např. čeština), doporučujeme nastavit ještě cizí jazyk, nejlépe angličtinu (defaultní hodnota).*
{% endhint %}

{% hint style="success" %}
*Nabídka Hero Card v operátorském rozhraní se zobrazí dle jazyka klientova prohlížeče. Jazyk Hero Card ale může operátor kdykoli přepnout. Více informací najdete v sekci* [*Hero Cards pro operátory*](https://docs.mluvii.com/pro-operatory/prace-s-klientem/hero-cards)*.*
{% endhint %}

## **Editace Hero Cards**

Nejprve se podíváme do *Editoru* Hero Cards. Klikněte na tlačítko *Přidat* a vyberte jedno z nabízených typů polí, ze kterých můžete Hero Cards skládat.&#x20;

{% hint style="info" %}
***Hero Card pro zařízení Apple (kanál Apple Messages for Business) může obsahovat vždy pouze jednu komponentu.***
{% endhint %}

## **Komponenty Hero Card:**

### **Text** <a href="#aag" id="aag"></a>

Klasické textové pole podporující rich text formát. Můžete měnit jeho velikost, styl a řádkování písma nebo přidávat odrážky a hyperlinky.

### **Obrázek** <a href="#aah" id="aah"></a>

Pokud se rozhodnete pro použití obrázku, je potřeba jej nejdříve nahrát v rámci souborů. Pro výběr obrázku klikněte do prostoru se symbolem obrázku a v otevřeném okně vyberte konkrétní soubor. Můžete také vyplnit URL, díky kterému poslouží obrázek k přesměrování klienta např. na váš web.

### **Video** <a href="#aai" id="aai"></a>

Podobně jako u obrázku stejným způsobem přidáte také video, které jste předtím nahráli do [souborů tenantu](https://docs.mluvii.com/pro-administratory/sprava-tenantu/nastaveni/soubory).

### **Pole** <a href="#aaj" id="aaj"></a>

Nejprve pojmenujte typ pole klikem na ikonu tužky. Poté si zvolíte jednu z pěti funkcí, které může pole mít:

* **Textový řádek** - řádek pro vložení kratšího textu, například jména a příjmení.
* **Textové pole** - pole pro vkládání a editování delšího textu. Kliknutím na Náhled si můžete ihned prohlédnout změny, které ve formuláři děláte. Například můžete upravit velikost textového pole posunutím pravého spodního rohu.
* **E-mail** - pole pro vložení e-mailové adresy kontroluje formu adresy.
* **Číslo** - pole, které povoluje pouze psaní číslovek.
* **Telefon** - pole pro vložení telefonního čísla. Kontroluje standardní formát telefonního čísla.

V pravém rohu ***Pole*** nakonec přiřadíte parametr. Vybrat si můžete z přednastavených parametrů, nebo přidat vlastní.

{% hint style="success" %}
*Pole můžete také označit jako Povinné. Pokud se klientovi ve formuláři zobrazí povinné pole, nemůže potvrdit odeslání formuláře bez jeho vyplnění. Až budete s úpravami hotovi, nezapomeňte si změny **Uložit**.*
{% endhint %}

### **Seznam** <a href="#aak" id="aak"></a>

Další možností je vložení ***Seznamu*****.** Seznam nejprve pojmenujte a přiřaďte mu **parametr**. Můžete si vybrat ze dvou typů seznamů; ***radio button nebo rozbalovací seznam***. Možnosti do seznamu přidáváte kliknutím na tlačítko ***+***. V náhledu pak můžete kontrolovat své úpravy ještě před uložením formuláře. Výběr hodnoty ze Seznamu lze, stejně jako Pole, udělat povinným.

### **Potvrzovací tlačítka** <a href="#aal" id="aal"></a>

***Potvrzovací tlačítka*** se vždy zobrazují na konci Hero Card. Vloží se automaticky v případě, že v editoru Hero Card použijete komponentu **Pole** nebo **Seznam**.&#x20;

{% hint style="info" %}
*Pokud jste do Hero Card vložili jen **Textové pole**, potvrzovací tlačítka se automaticky nepřidají, ale můžete je vložit manuálně. **Tlačítka slouží k záznamu potvrzení, nebo odmítnutí informací či nabídky v Hero Card.***
{% endhint %}

### **Autentizační tlačítka** <a href="#aam" id="aam"></a>

Tuto komponentu můžete použít jako alternativní možnost, jak identifikovat klienta pomocí Facebook či Google účtu. Použití komponenty můžete vynutit výběrem checkboxu **"povinné pole"**.

### **Výběr času** <a href="#aan" id="aan"></a>

Komponenta **Výběr času** umožňuje klientovi vybrat jeden z nabízených časů/dat (např. pro účel sjednání schůzky). Tyto časy do konkrétní Hero Card doplňuje vždy operátor před odesláním Hero Card. Nezapomeňte na výběr parametru, který poslouží pro uložení možnosti vybrané klientem.

### **Katalog** <a href="#aao" id="aao"></a>

Díky funkce katalogu můžete dát klientovi vybrat například mezi dvěma (či více) produkty. Klient si pak jednoduše kliknutím na jeden produkt vybere produkt a následně výběr potvrdí.

### **Rychlá odpověď** <a href="#aap" id="aap"></a>

Tuto komponentu můžete použít v případech, kdy chcete aby vám klient vybral a potvrdil jednu z možností. Jak v případech použití u WebChatu, tak i u Hero Cards pro Apple zařízení můžete klientovi dát na výběr až z 5 možností.

{% hint style="success" %}
*Identifikační Hero Card je vhodné použít jako alternativu k povinnému vstupnímu formuláři. Nemusíte mít nutně nastavený povinný vstupní formulář a namísto něj využijete identifikační Hero Card ve správný moment, kdy potřebujete od klienta získat identifikační údaje.*
{% endhint %}

{% hint style="danger" %}
*Pokud používáte i komunikační kanál WhatsApp, můžete se setkat s Hero Cards nazvanými Template Message. Pokud se rozhodnete Hero Card smazat, připravte se na to, že ji smažete nejen v mluvii, ale i v klientském portálu společnosti 360 Dialog.*
{% endhint %}