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
  • HTML
  • CSS Styling
  • JavaScript kód
  • Nahrání formuláře na libovolný hosting
  • Vložení odkazu do administrace aplikace mluvii

Was this helpful?

  1. PRO IT SPECIALISTY
  2. Customizace
  3. Vlastní formuláře
  4. Vlastní vstupní formuláře

S volbou oddělení

PreviousZákladní vstupní formulářNextVlastní výstupní formuláře

Last updated 2 years ago

Was this helpful?

K vytvoření vlastního vstupního formuláře s volbou oddělení budete postupovat obdobně jako u základního formuláře:

Vytvoříte HTML dokument, přidáte CSS styly a pomocí JavaScript metod zajistíte posílání dat z formuláře a přiřazení klienta do fronty. Následně nahrajete vytvořený formulář na libovolný hosting podporující protokol HTTPS a přidáte odkaz na formulář do administračního rozhraní.

Opět doporučujeme vytvářet vstupní formulář pomocí webové aplikace codepen.io kvůli jednoduchosti a přehlednosti. Začít můžete kliknutím na . Editor kódu, který používáme je propojený s a s malou library , kvůli těžkostem se scrollováním iframe na systémech iOS.

Jak bude formulář vypadat

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

HTML

Oproti základnímu formuláři se tento formulář skládá ze dvou slidů - klasický formulář s údaji a výběr oddělení. Slidy jsou vytvořeny pomocí library .

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

Většina CSS je již zajištěna pomocí Bootstrapu a Swipperu.

JavaScript kód

Informace o zvoleném oddělení je posílaná spolu s dalšími údaji z formuláře ve funkci volané při submitu formuláře jako custom proměnná "department".

Úplné možnosti API formuláře naleznete v obecném návodu na tvorbu výstupního formuláře.

Nahrání formuláře na libovolný hosting

Pokud jste pro tvorbu formuláře využili codepen.io, nejdříve klikněte na tlačítko Save, poté exportujte v .zip formátu.

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.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://unpkg.com/simplebar@3.1.0/dist/simplebar.css" />
  <style>
    .scroll-container {
      max-height: 107vh;
      height: 100%;
      width: 1px !important;
      min-width: 100% !important;
      max-width: 100% !important;
    }
    .scroll {
      max-width: 100% !important;
    }
    .swiper-container {
      height: 100%;
    }

    .swiper-slide {
      display: flex;
      padding: 1rem 1rem 2rem 1rem;
    }

    .card {
      width: 100%;
      overflow: auto;
      border-radius: 1rem;
      box-shadow: 0 0 1rem -0.5rem rgba(24, 28, 32, 0.5);
    }

    .form-control, .btn {
      border-radius: 0.5rem;
    }

    .curp {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll" data-simplebar>
      <div class="swiper-container">
          <div class="swiper-wrapper">
            
            <!-- First slide start -->
            <div class="swiper-slide swiper-no-swiping">
              <div class="card">
                <div class="card-body">
                  <form id="main_form" class="w-100">
                    <div class="form-group">
                      <label for="name" class="mb-1">Jméno</label>
                      <input type="text" class="form-control" id="name" placeholder="Jméno">
                    </div>
                    <div class="form-group">
                      <label for="email" class="mb-1">E-mail</label>
                      <input type="email" class="form-control" id="email" placeholder="E-mail">
                    </div>
                    <div class="form-group">
                      <label for="phone" class="mb-1">Telefon</label>
                      <input type="text" class="form-control" id="phone" placeholder="Telefon">
                    </div>
                  </form>
                  <div class="text-center">
                    <button type="submit" form="main_form" class="btn btn-primary mt-3">
                      Pokračovat
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- First slide end -->
            
            <!-- Second slide start -->
            <div class="swiper-slide swiper-no-swiping">
              <div class="card">
                <div class="card-body">	
                  <h5 class="mb-0 text-center">
                    Vyberte prosím oddělení, se kterým se chcete spojit
                  </h5>
                  <form id="department_form" class="w-100 my-5 mx-auto" style="max-width: 170px;">
                    <div class="custom-control custom-radio">
                      <input 
                         checked
                         id="radio_1"
                        type="radio"
                         name="department"
                        value="sales_representative"
                         class="custom-control-input"
                       />
                      <label class="custom-control-label curp" for="radio_1">
                        Obchodní zástupce
                      </label>
                    </div>
                    <div class="custom-control custom-radio">
                      <input 
                         id="radio_2"
                        type="radio"
                         name="department"
                        value="technical_support"
                         class="custom-control-input"
                       />
                      <label class="custom-control-label curp" for="radio_2">
                        Technická podpora
                      </label>
                    </div>
                    <div class="custom-control custom-radio">
                      <input 
                         id="radio_3"
                        type="radio"
                         name="department"
                        value="financial_department"
                         class="custom-control-input"
                       />
                      <label class="custom-control-label curp" for="radio_3">
                        Finanční oddělení
                      </label>
                    </div>
                  </form>
                  <div class="text-center">
                    <button type="button" class="btn btn-link btn-back mt-0 d-inline-block">
                      Zpět
                    </button>
                    <button type="submit" form="department_form" class="btn btn-primary mt-0 d-inline-block">
                      Pokračovat
                    </button>
                  </div>
                  <!-- Second slide end -->
                  
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-pagination swiper-no-swiping"></div>
        </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
  <script src="https://unpkg.com/simplebar@3.1.0/dist/simplebar.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true
      },
    });

    $('.btn-back').click(function(e) {
      swiper.slidePrev();
    })

    $('#main_form').submit(function(e) {
      e.preventDefault();
      swiper.slideNext();
    })

    $('#department_form').submit(function(e) {
      e.preventDefault();

      var name = $('#name').val();
      var email = $('#email').val();
      var phone = $('#phone').val();
      var department = $('input[name="department"]:checked').val()
      
      window.parent.postMessage({
        type: "SET_NAME",
        name: name
      }, "*");
      window.parent.postMessage({
        type: "SET_EMAIL",
        email: email
      }, "*");
      window.parent.postMessage({
        type: "SET_PHONE",
        phone: phone
      }, "*");
      window.parent.postMessage({
        type: "ADD_CUSTOM_DATA",
        name: "department",
        value: department
      }, "*");
      window.parent.postMessage({
        type: "ENQUEUE"
      }, "*");
    })
  </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 jste získali odkaz na náš formulář, který vložíte do administračního rozhraní.

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

tento odkaz
bootstrap frameworkem
simplebar
https://mluvii.github.io/customization/entry_form_departments.html
Swipper
zde