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

Was this helpful?

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

Hodnocení pomocí smajlíků

PreviousZákladní výstupní formulářNextHodnocení pomocí hvězdiček

Last updated 2 years ago

Was this helpful?

K vytvoření tohoto výstupního formuláře musíte splnit několik kroků, obdobně jako u tvorby základního výstupního formuláře:

Vytvořit HTML dokument, přidat CSS styly a pomocí „JavaScript metod“ zajistit funkčnost ratingu a posílání dat z formuláře. Následně je nutné formulář nahrát na libovolný hosting podporující protokol HTTPS a přidat odkaz na formulář do administračního rozhraní aplikace Mluvii.

Doporučujeme vytvářet výstupní formulář pomocí webové aplikace codepen.io kvůli jednoduchosti a přehlednosti. Začít můžete kliknutím , kde je již přednastaven ui framework s malou library , kvůli těžkostem se scrollováním iframe na systémech iOS. Na konci tohoto návodu můžete nalézt kompletní kód výstupního formuláře.

Jak bude formulář vypadat

Přímý odkaz pro vložení formuláře do administrace aplikace Mluvii:

HTML

HTML kód obsahuje elementy svg obrazců smajlíků a ostatní input elementy.

První dva div tagy (a na ně napojené css a javascript) slouží k zobrazení vlastních scrollbarů pro lepší user experience na mobilních zařízeních.

CSS Styling

JavaScript kód

Javascript kód formuláře zajištuje animace smajlíků a odeslání dat z formuláře do aplikace Mluvii. Úplné možnosti API formuláře naleznete v obecném návodu na tvorbu výstupního formuláře.

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

V případě, že jste formulář vytvořili přes službu codepen.io, nejdříve klikněte na tlačítko Save, poté exportujte v .zip formátu (viz návod níže).

Tím 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 .

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://unpkg.com/simplebar@3.1.0/dist/simplebar.css" />
  <style>
    .rating-stars {
      display: flex;
      justify-content: center;
    }

    svg {
      padding: 4px;
    }

    .star-path, svg {
      transition: all 0.15s;
    }

    svg:hover {
      transform: scale(1.15);
    }

    svg:hover > .star-path {
      fill: #ffbf00 !important;
    }

    .inner-container {
      background-color: #fff;
    }

    input[type="email"], input[type="submit"], textarea, .inner-container {
      border-radius: 0.5rem !important;
    }

    input[type="email"], textarea {
      border: 2px solid rgb(214, 218, 222) !important;
      box-shadow: none !important;
    }

    input[type="email"]:focus, textarea:focus {
      border: 2px solid #6eb6bc !important;
    }

    input[type="submit"] {
      background-color: #6eb6bc;
      box-sizing: border-box;
      border: none;
      box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4) !important;
      transition: all 0.15s;
    }

    input[type="submit"]:hover, input[type="submit"]:focus {
      background-color: #6eb6bc !important;
      box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4) !important;
    }

    input[type="submit"]:active {
      transform: translateY(2px);
      box-shadow: none !important;
    }

    #email_checkbox {
      line-height: 1.6;
    }

    #email_checkbox:before, #email_checkbox:after {
      height: 1.2rem;
      width: 1.2rem;
      left: -26px;
      box-shadow: none !important;
    }

    .custom-checkbox {
      padding-left: 26px;
    }

    .custom-control-input:checked ~ .custom-control-label::before {
      background-color: #6eb6bc !important;
    }

    .custom-control-input:active ~ .custom-control-label::before {
      background-color: #9ecee2 !important;
    }

    .curp {
      cursor: pointer;
    }
    .scroll-container {
      max-height: 107vh;
      width: 1px !important;
      min-width: 100% !important;
      max-width: 100% !important;
    }
    .scroll {
      max-width: 100% !important;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll" data-simplebar>
      <form id="my_form" class="m-3 d-flex flex-column justify-content-center">
          <p class="text-center mt-3 mb-3 font-weight-bold">Jak jste s námi byli spokojeni?</p>
          <div class="inner-container p-3">
            <div class="rating-stars mb-1">
              <label class="icon">
                <svg class="curp" width="38px" height="38px" viewBox="0 0 512 512" xml:space="preserve">
                  <polygon class="star-path" fill="#e5e5e5" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
                    259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 
                    29.274,197.007 188.165,173.919 "/>
                </svg>
                <input 
                  value="1"
                  type="radio" 
                  id="rating_1"
                  name="rating" 
                  class="d-none" 
                  onclick="onRatingClick(this)"
                />
              </label>
                  <label>
                <svg class="curp" width="38px" height="38px" viewBox="0 0 512 512" xml:space="preserve">
                  <polygon class="star-path" fill="#e5e5e5" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
                    259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 
                    29.274,197.007 188.165,173.919 "/>
                </svg>
                <input 
                  value="2"
                  type="radio" 
                  id="rating_2"
                  name="rating" 
                  class="d-none" 
                  onclick="onRatingClick(this)"
                />
              </label>
                  <label>
                <svg class="curp" width="38px" height="38px" viewBox="0 0 512 512" xml:space="preserve">
                  <polygon class="star-path" fill="#e5e5e5" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
                    259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 
                    29.274,197.007 188.165,173.919 "/>
                </svg>
                <input 
                  value="3"
                  type="radio" 
                  id="rating_3"
                  name="rating" 
                  class="d-none" 
                  onclick="onRatingClick(this)"
                />
              </label>
                  <label>
                <svg class="curp" width="38px" height="38px" viewBox="0 0 512 512" xml:space="preserve">
                  <polygon class="star-path" fill="#e5e5e5" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
                    259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 
                    29.274,197.007 188.165,173.919 "/>
                </svg>
                <input 
                  value="4"
                  type="radio" 
                  id="rating_4"
                  name="rating" 
                  class="d-none" 
                  onclick="onRatingClick(this)"
                />
              </label>
                  <label>
                <svg class="curp" width="38px" height="38px" viewBox="0 0 512 512" xml:space="preserve">
                  <polygon class="star-path" fill="#e5e5e5" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
                    259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 
                    29.274,197.007 188.165,173.919 "/>
                </svg>
                <input 
                  value="5"
                  type="radio" 
                  id="rating_5"
                  name="rating" 
                  class="d-none" 
                  onclick="onRatingClick(this)"
                />
              </label>
            </div>
        
            <textarea 
              rows="4"
              id="feedback" 
              name="feedback"
              class="form-control feedback"
              placeholder="Vaše zpětná vazba"
            ></textarea>
        
            <div class="custom-control custom-checkbox mt-3 mb-2">
              <input type="checkbox" class="custom-control-input" id="send_to_email">
              <label id="email_checkbox" class="custom-control-label curp" for="send_to_email">
                Chci poslat přepis konverzace
              </label>
            </div>
        
            <div class="form-group">
              <input 
                disabled
                required
                id="email" 
                type="email" 
                placeholder="E-mailová adresa" 
                class="form-control email" 
              />
            </div>
          </div>
          
          <div class="form-group d-flex py-3 m-0">
            <input 
              id="submit"
              type="submit" 
              value="Ok"
              class="btn btn-primary mt-3 mx-auto px-5" 
            />
          </div>
        </form>
    </div>
  </div>
  
  <script src="https://unpkg.com/simplebar@3.1.0/dist/simplebar.js"></script>
  <script>
    var selectedStarColor = '#FFD700';
    var emptyStarColor = '#e5e5e5';

    var form = document.getElementById('my_form');
    // var stars = [...document.querySelectorAll('svg')];
    var stars = Array.prototype.slice.call(document.querySelectorAll('svg'));
    var starRating = null;

    stars.forEach(function(star) {
      star.addEventListener('mouseenter', fillStars);
      star.addEventListener('mouseleave', resetStars);
    });

    function setFilledStars(endIndex) {
      stars.forEach(function(star, index) {
        if (index < endIndex) {
          star.childNodes[1].style.setProperty('fill', selectedStarColor);
        }
        else if (index >= endIndex) {
          star.childNodes[1].style.setProperty('fill', emptyStarColor);
        }
      })
    }

    function fillStars(e) {
      setFilledStars(stars.indexOf(e.target));
    }

    function resetStars(e) {
      return starRating ? setFilledStars(starRating) : setFilledStars(0);
    }

    function onRatingClick(target) {
      starRating = target.value;
    }

    var checkbox = document.getElementById('send_to_email');

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

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

      var email = document.getElementById('email').value;
      var feedback = document.getElementById('feedback').value;
      var checked = document.getElementById('send_to_email').checked;
      
      window.parent.postMessage({
        type: "FEEDBACK_ACTION",
        email: checked ? email : null,
        stars: starRating,
        content: feedback
      }, "*");
    };
  </script>
</body>
</html>

Vložení odkazu do administrace aplikace Mluvii

Vytvořili jste vstupní formulář pomocí codepen.io. Ten jste exportovali na Váš počítač. Exportované složky jste nahráli do GitHub repozitáře a poté zapnuli GitHub stránky. Tím pádem máte odkaz na náš formulář, který vložíte do administračního rozhraní.

na tento odkaz
Bootstrap
simplebar
https://mluvii.github.io/customization/feedback_smiles.html
zde