How Do I Customize Qiscus Widget to Add Fields According to The Information Needed?

The Qiscus Widget login form can only contain the customer's name and email / phone number. If you need other information from the customer, then you should ask the customer directly. For example, you want the customer to be able to fill in the division to which the consultation will take place and also what questions will be asked. You can customize the Qiscus Widget to add other fields according to your needs. Here are the steps you can take:

1. Copy the code snippet on the page Qiscus Widget Integration, then paste the script in the body tag,

2. Add the extrasField field to the qismoConfig variable to suit your needs. Example:

   <script>
         qismoConfig = {
           extrasFields: [
             {
               label: 'Departments', // Field Label
               name: 'departments', // Field name
               placeholder:'Select Departments', // Field Placeholder
               type: 'select', // Type of Field
               options: [{label:'Human Resource', value: 'human_resource'}, {label:'Finance', value: 'finance'}],
               visible: true, // If set to false then the field is hidden on the login form */
             },
             {
               label: 'Pertanyaan',
               name: 'question',
               placeholder: 'Tanyakan pertanyaan anda disini',
               type: 'textarea',
               visible: true,
             },
             {
               label: 'User Type',
               name: 'user_type',
               value: 'VIP', // Acquired from database, so no field needed
               visible: false,
             },
           ],
         }
   </script>

3. Add style according to your needs. Additional form styles are not provided from Multichannel, but you can add the style yourself as needed. Example:

   <style>
    form.qismo-login-form__body.extras-form .qismo-input {
    margin-bottom: 5px;
    }
    .qismo-input textarea {
    border: 0;
    padding: 10px;
    width: 100%;
    box-shadow: 0 3px 17px rgba(0,0,0,.05);
    }
    .qcw-cs-wrapper .qcw-cs-box-form h3 { font-size: 18px; }
    .qismo-login-form__header { padding: 30px; }
   </style>

4. The following is an example of the complete Qiscus Widget code from the customization above:

   <style>
    form.qismo-login-form__body.extras-form .qismo-input {
    margin-bottom: 5px;
    }
    .qismo-input textarea {
    border: 0;
    padding: 10px;
    width: 100%;
    box-shadow: 0 3px 17px rgba(0,0,0,.05);
    }
    .qcw-cs-wrapper .qcw-cs-box-form h3 { font-size: 18px; }
    .qismo-login-form__header { padding: 30px; }
   </style> 
   
   <script>
    qismoConfig = {
    extrasFields: [
    {
    label: 'Departments', 
    name: 'departments', 
    placeholder:'Select Departments',
    type: 'select', 
    options: [{label:'Human Resource', value: 'human_resource'}, {label:'Finance', value: 'finance'}],
    visible: true, 
    },
    {
    label: 'Pertanyaan',
    name: 'question',
    placeholder: 'Tanyakan pertanyaan anda disini',
    type: 'textarea',
    visible: true,
    },
    {
    label: 'User Type',
    name: 'user_type',
    value: 'VIP', 
    visible: false,
    },
    ],
    }
    document.addEventListener('DOMContentLoaded', function() {
    var s,t; s = document.createElement('script'); s.type = 'text/javascript';
    s.src = 'https://qismo-stag.qiscus.com/js/qismo-v2.js'; s.async = true;
    s.onload = s.onreadystatechange = function() { new Qismo("your-app-id"); }
    t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t);
    });
   </script>

   

5. If the customer submits the login form, you can see other information from the additional fields on the Multichannel Dashboard Inbox page section Chat & Customer Info - Additional Info.