LogoLogo
Mluvii webLoginAPIDEMO
English
English
  • ABOUT
  • UPDATES MLUVII
    • 2.125
    • 2.124
    • 2.123
    • Archive
      • 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
  • LICENSE TYPES
  • FOR OPERATORS
    • Login
    • Workspace
    • Accept client
    • Client interaction
      • WebChat
      • Client tab
      • Videocall
      • Share
      • Templates
      • Browser
      • End Session
      • Hero Cards
      • E-mail
      • Facebook Messenger
      • Apple Messages for Business
      • WhatsApp
      • VKontakte
      • IP Telephony
      • Telephone campaigns
    • Profile
  • FOR ADMINISTRATORS
    • Company management
      • Licences
      • Users
      • External contacts
      • Performance
      • Operator metrics
      • Dashboards
    • Tenant management
      • Contact directory
      • Sessions
      • All e-mails
      • Operators
      • Campaigns
        • Telephone campaign
          • Campaign Contacts
          • Missed Calls
        • WhatsApp campaign
          • Campaign Contacts
      • Settings
        • Groups
          • By operator utilization
          • To whole group (deprecated)
        • External groups
        • Routing
        • Rules
        • WebChat
        • Forms
          • Forms
          • Hero Cards
        • Chatbots
          • API chatbot
          • Microsoft Bot Framework chatbot
        • WhatsApp
          • Registration process
          • Adding a new phone number
          • Eligible Phone Numbers
          • Pricing
          • Template Messages
            • Conversations
          • Whatsapp ecosystem comparison
          • Data security and GDPR
          • Add WhatsApp widget to website
        • Apple Messages for Business
          • Add Apple widget to website
          • Data security and GDPR
        • Facebook Messenger
          • Add Facebook Messenger widget to website
        • VKontakte
        • E-mails
        • IP Telephony
        • Files
        • Templates
        • Routing visualization
        • Application
          • General
        • Blacklist
        • GDPR
  • FOR IT SPECIALISTS
    • Supported widget methods
    • Add WebChat button to website
    • Add Apple widget to website
    • Customization
      • Customized forms
        • Entry forms
          • Basic entry forms
          • Tenant selection forms
        • Feedback form
          • Basic feedback forms
          • Feedback forms with emojis
          • Feedback form with stars
        • Offline forms
      • Parameters
      • Customized Pop-up
      • Customized functions
      • Customized microsite
    • Public API
      • Authentication
      • Swagger
      • Public API FAQ
      • Webhooks
      • Webhooks FAQ
    • WIDGET API
    • Co-browsing
    • Mobile SDK
      • Android
      • iOS
    • Chatbot connection
      • Microsoft Bot Framework
      • API chatbot
        • API chatbot connection
        • Chatbot API-specific activities and events
      • Supported activities and events
      • Tips and Tutorials
    • Realtime statistics
      • Connection to influx database
      • Existing metrics
      • Examples
      • Grafana
    • Connect Office 365 mailbox
    • Connect Gmail mailbox
    • Software architecture
      • Data encryption
    • Telephony
    • Facebook
    • Files
    • WebChat
    • Cookies
    • Desktop Application
  • SECURITY
  • SYSTEM REQUIREMENTS
    • Minimum HW requirements for operators
    • Minimum SW requirements for operators
    • Supported browsers
    • Audio/Video
    • Supported languages
    • Desktop application
    • Minimum server requirements
    • Mobile application
  • HELPDESK
    • Bug Reporting
    • Manuals
      • Delete browser cookies
      • Delete Local and Session Storage
      • Clear cache memory
      • Add timestamps to logs in the browser console
      • Disconnecting inactive tabs in Google Chrome
    • FAQ
    • Keyboard shortcuts
    • Glossary
Powered by GitBook
On this page
  • How the form looks
  • HTML
  • CSS Styling
  • JavaScript code
  • Uploading the form to any hosting
  • Inserting a link to the mluvii application administration

Was this helpful?

  1. FOR IT SPECIALISTS
  2. Customization
  3. Customized forms
  4. Entry forms

Tenant selection forms

PreviousBasic entry formsNextFeedback form

Last updated 2 years ago

Was this helpful?

To create a customized entry form with the choice of the division, you will proceed as in the case of the basic form:

Create an HTML document, add CSS styles, and use JavaScript to ensure that you send data from the form and assign the client to the queue. Then you upload the created form to any hosting that supports the HTTPS protocol and add a link to the form in the administration interface.

Again, we recommend creating an entry form using the codepen.io web application for simplicity and clarity. You can start by clicking on . The code editor we use is linked to the as a small library, due to the difficulties with iframe scrolling on iOS.

How the form looks

Direct link to insert this form into the administration of the mluvii application:

HTML

Compared to the basic form, this form consists of two slides - a classic form with data and selection of the department. Slides are created using the library.

The first two div tags (and css and javascript linked to them) serve to display your own scrollbars for better user experience on mobile devices.

CSS Styling

Most CSS is already secured with Bootstrap and Swipper.

JavaScript code

The information about the selected department is sent along with other data from the form in the feature called custom variable “department” on the submission of the form.

For full API form capabilities, see the general instructions on creating an feedback form.

Uploading the form to any hosting

If you used codepen.io to create the form, first click the Save button, then export to .zip format.

If you use a tool other than codepen.io, the form code will look like this:

<!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>

Inserting a link to the mluvii application administration

You created an entry form using codepen.io. You have exported it to your computer. You have uploaded exported folders to the GitHub repository and then switched on the GitHub website. This brings you a link to our form, which you insert into the administration interface.

You have a form prepared, now you need to upload the form to the Internet so we can refer to it from the administration interface. In our case, we will use the GitHub site. You can find more information .

this link
bootstrap framework
simplebar
https://mluvii.github.io/customization/entry_form_departments.html
Swipper
here