LogoLogo
Mluvii webLoginAPIDEMO
Česky
Česky
  • O APLIKACI
  • NOVINKY
    • 2.125
    • 2.124
    • 2.123
  • Archiv
    • 2.122
    • 2.121
    • 2.120
    • 2.119
    • 2.118
    • 2.117
    • 2.116
    • 2.115
    • 2.114
    • 2.113
    • 2.112
    • 2.111
    • 2.110
    • 2.109
    • 2.108
    • 2.107
    • 2.106
    • 2.105
    • 2.104
    • 2.103
    • 2.102
    • 2.101
    • 2.100
    • 2.99
    • 2.98
    • 2.97
    • 2.96
    • 2.95
    • 2.94
    • 2.93
    • 2.92
    • 2.91
    • 2.90
    • 2.89
    • 2.88
    • 2.87
    • 2.86
    • 2.85
    • 2.84
    • 2.83
    • 2.82
    • 2.81
    • 2.80
    • 2.79
    • 2.78
    • 2.77
    • 2.76
    • 2.75
    • 2.72
    • 2.71
    • 2.70
    • 2.68
    • 2.67
    • 2.66
    • 2.65
    • 2.64
    • 2.63
    • 2.61
    • 2.60
    • 2.59
    • 2.58
    • 2.57
    • 2.56
    • 2.55
    • 2.54
    • 2.53
    • 2.52
    • 2.51
    • 2.50
    • 2.49
    • 2.48
    • 2.47
    • 2.46
    • 2.45
    • 2.44
    • 2.43
    • 2.42
    • 2.41
    • 2.40
    • 2.39
    • 2.38
    • 2.37
    • 2.36
    • 2.35
    • 2.34
    • 2.33
    • 2.32
    • 2.31
    • 2.30
    • 2.29
    • 2.28
    • 2.27
    • 2.26
    • 2.25
    • 2.24
    • 2.23
    • 2.22
    • 2.21
    • 2.20
    • 2.19
    • 2.18
    • 2.17
    • 2.16
    • 2.15
    • 2.14
    • 2.13
    • 2.12
    • 2.11
    • 2.10
    • 2.9
    • 2.8
    • 2.7
    • 2.6
    • 2.5
    • 2.4
    • 2.3
    • 2.2
    • 2.1
    • 2.0
  • TYPY LICENCÍ
  • PRO OPERÁTORY
    • Přihlášení
    • Pracovní plocha
    • Přijetí klienta
    • Práce s klientem
      • WebChat
      • Karta klienta
      • Videohovor
      • Sdílení
      • Šablony
      • Prohlížeč
      • Ukončení sezení
      • Hero Cards
      • E-mail
      • Facebook Messenger
      • Apple Messages for Business
      • WhatsApp
      • VKontakte
      • IP Telefonie
      • Telefonní kampaně
    • Profil
  • PRO ADMINISTRÁTORY
    • Správa společnosti
      • Licence
      • Uživatelé
      • Externí kontakty
      • Výkonnost
      • Metriky operátorů
      • Dashboards
    • Správa tenantu
      • Adresář kontaktů
      • Sezení
      • Všechny e-maily
      • Operátoři
      • Kampaně
        • Telefonní kampaň
          • Kontakty v kampani
          • Zmeškané hovory
        • WhatsApp kampaň
          • Kontakty v kampani
      • Nastavení
        • Skupiny
          • Postupně podle operátora
          • Na celou skupinu (depricated)
        • Externí skupiny
        • Routingová pravidla
        • Pravidla
        • WebChat
        • Formuláře
          • Formuláře
          • Hero Cards
        • Chatboti
          • API chatbot
          • Microsoft Bot Framework chatbot
        • WhatsApp
          • Registrační proces
          • Povolená telefonní čísla
          • Zpoplatnění WhatsAppu
          • Template Messages
            • Konverzace
          • Whatsapp srovnání
          • Bezpečnost dat a GDPR
          • Přidání odkazu na webové stránky
        • Apple Messages for Business
          • Přidání odkazu na webové stránky
          • Bezpečnost a GDPR
        • Facebook
          • Přidání odkazu na webové stránky
        • VKontakte
        • E-maily
        • IP Telefonie
        • Soubory
        • Šablony
        • Vizualizace routingu
        • Aplikace
          • Všeobecné
        • Blacklist
        • GDPR
  • PRO IT SPECIALISTY
    • Podporované metody na widgetu
    • Vložení tlačítka mluvii
    • Vložení Apple tlačítka na web
    • Customizace
      • Vlastní formuláře
        • Vlastní vstupní formuláře
          • Základní vstupní formulář
          • S volbou oddělení
        • Vlastní výstupní formuláře
          • Základní výstupní formulář
          • Hodnocení pomocí smajlíků
          • Hodnocení pomocí hvězdiček
        • Offline formuláře
      • Parametry
      • Vlastní vstup Pop-up
      • Vlastní funkce WebChat balíčku
      • Konfigurace vlastní mikrostránky
    • PUBLIC API
      • Autentizace
      • Swagger
      • Public API FAQ
      • Webhooky
      • FAQ pro Webhooky
    • WIDGET API
    • Co-browsing
    • Mobilní SDK
      • Android Library
      • iOS Framework
    • Napojení chatbotů
      • Microsoft Bot Framework
      • API chatbot
        • API pro integraci chatbota
        • Události specifické pro Chatbot API
      • Podporované aktivity
      • Návody
    • Realtime statistiky
      • Připojení do influx databáze
      • Existující metriky
      • Ukázkové kódy
      • Grafana
    • Připojení Office 365 schránky
    • Připojení Gmail schránky
    • Softwarová architektura
      • Šifrování
    • Telefonie
    • Facebook
    • Soubory
    • WebChat
    • Cookies
    • Desktopová aplikace
  • BEZPEČNOST DAT A GDPR
  • SYSTÉMOVÉ POŽADAVKY
    • Minimální HW požadavky pro operátory
    • Minimální SW požadavky pro operátory
    • Podpora prohlížečů
    • Audio/Video
    • Podporované jazykové lokalizace
    • Desktopová aplikace
    • Minimální požadavky na server
    • Mobilní aplikace
  • HELPDESK
    • Hlášení chyb
    • Návody
      • Smazání cookies v prohlížeči
      • Smazání obsahu Local a Session Storage
      • Smazání cache paměti prohlížeče
      • Přidání času u logů v konzoli prohlížeče
      • Odpojování neaktivních záložek na pozadí v Google Chrome
    • Často kladené otázky
    • Klávesové zkratky
    • Slovníček pojmů
Powered by GitBook
On this page
  • Jak bude formulář vypadat
  • Jak začít
  • HTML
  • JavaScript kód
  • Nahrát vytvořený formulář na libovolný hosting
  • Poslední krok

Was this helpful?

  1. PRO IT SPECIALISTY
  2. Customizace
  3. Vlastní formuláře
  4. Vlastní výstupní formuláře

Základní výstupní formulář

PreviousVlastní výstupní formulářeNextHodnocení pomocí smajlíků

Last updated 2 years ago

Was this helpful?

K vytvoření vlastního výstupního formuláře musíte splnit několik kroků:

Vytvoříte HTML dokument, který bude obsahovat potřebná pole. Přidáte CSS styly. Pomocí „JavaScript method“ zajistíte posílání dat z formuláře. Nahrajete vytvořený formulář na libovolný hosting podporující protokol HTTPS a přidáte odkaz na formulář do administračního rozhraní.

Doporučujeme vytvářet výstupní formulář pomocí webové aplikace codepen.io kvůli jednoduchosti a přehlednosti.

Zadání
Vytvořit vlastní výstupní formulář, který obsahuje text zpětné vazby a umožňuje odeslat přepis konverzace na email.

Jak bude formulář vypadat

Jak začít

Začít můžete kliknutím .

HTML

JavaScript kód

Dostupné API

Jak poslat feedback?

window.parent.postMessage({
    type: "FEEDBACK_ACTION",
    email: "example@email.cz",
    stars: null, // Nebo od 1 do 5
    content: ""
}, "*");

Poslání vlastního parametru

window.parent.postMessage({
  type: 'ADD_CUSTOM_DATA',
  name: 'custom_field_name', // Název pole z call paramu
  value: 'any' // string a max 2048
}, '*');

JavaScript kód našeho příkladu

Nahrát vytvořený formulář na libovolný hosting

V našem případě nejdříve klikněte na tlačítko Save, poté exportujte v .zip formátu (viz návod níže).

V případě, že využijete jiný nástroj než codepen.io, bude kód formuláře vypadat takto.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>mluvii-custom-feedback</title>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
    <style type="text/css">
      html, body {
        width: 100%;
        height: 100%;
        background-color: transparent;
      }
      .vertical-align-middle {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
      }
      .my-form {
        width: 100%;
        max-height: 100%;
        overflow: auto;
        padding: 1rem;
      }
      .form-control, .btn {
        border-radius: 8px;
      }
      .btn[type="submit"] {
        background-color: #39A2EF; /* Barva talčítka */
        color: white; /* Barva textu tlačítka */
      }
    </style>
  </head>

  <body>
    <div class="vertical-align-middle">
      <form id="my_form" class="my-form">
        <div class="form-group">
          <label for="content">Vaše zpětná vazba</label>
          <textarea class="form-control" id="content" rows="3"></textarea>
        </div>
        <div class="form-check form-check-inline">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" id="send_to_email">
            Odeslat přepis chatu na e-mail
          </label>
        </div>
        <div class="form-group">
          <input type="email" class="form-control email" id="email" placeholder="E-mail" disabled>
        </div>
        <button type="submit" class="btn btn-info btn-block">Odeslat</button>
      </form>
    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.8/popper.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
    <script type="text/javascript">
      var checkbox = document.getElementById('send_to_email');
      var form = document.getElementById('my_form');

      checkbox.onchange = function (e) {
        document.getElementById('email').disabled = !e.target.checked;
      };

      form.onsubmit = function (e) {
        e.preventDefault();

        var content = document.getElementById('content').value;
        var email = document.getElementById('email').value;
        var checked = document.getElementById('send_to_email').checked;

        window.parent.postMessage({
          type: "FEEDBACK_ACTION",
          email: checked ? email : null,
          stars: null,
          content: content
        }, "*");
      };
    </script>
  </body>
</html>

Poslední krok

Vytvořili jsme výstupní formulář pomocí codepen.io. Ten jsme následně exportovali na náš počítač. Exportované složky jsme nahráli do GitHub repositáře a poté zapnuli GitHub stránky. Tím pádem máme odkaz na náš formulář, který dáme do administračního rozhraní.

Máme připravený formulář, nyní je potřeba nahrát formulář na internet, abychom na něho mohli odkazovat z administračního rozhraní. V našem případě využijeme GitHub stránky. Bližší informace naleznete .

na tento odkaz
zde