What's New in Qiscus Multichannel Widget Version 3

Qiscus has just launched multichannel widget version 3. In this update, there is an improvement in the way rendering widgets where previously there was a possibility that CSS from the widget had a conflict with CSS on the client's web.

In this version, there are no significant changes on the API side. If you want to upgrade you only need to change the qismo-v2.js URL to qismo-v3.js.

As for the initiation of this version of the widget are as follows:

<script>
  // this variable is optional, use it only if you want to modify all of the functionality here
  const options = {
    options: {
       // If you want to add extra data when initiating, default to null
       extras: JSON.stringify({ key: value }),
       // will show up as additional information inside multichannel dashboard, default to null
       // will also show up as login form input field if `visible: true`
       // have three types of `text`,`textarea`, and `select`, see below for example
       extra_fields: JSON.stringify([
         {label:'Question',name:'question',placeholder:'Type your question',type:'textarea',visible: true},
         {label:'Company Name',name:'company',placeholder:'Type your company name',type:'text',visible:true},
         {
           label: 'Departments', name: 'departments', placeholder:'Select Departments', type: 'select', 
           options: [{label:'Human Resource', value: 'human_resource'}, {label:'Finance', value: 'finance'}],
           visible: true,
         }
       ]), 
       widgetCustomCSS: `.qcw-header, .qismo-login-form__header { background: #4a69bd !important; }`,
       loginFormCustomCSS: `.qismo-login-form__header { background: #eb2f06 !important; }`,
       room_badge: `image_url`, // if you want to change the room badge
    },
    onLoginSuccess(data) {},
    onLoginError(data) {},
    onRoomChanged(data) {},
    onNewMessages(data) {},
    onTyping(data) {},
  };
  document.addEventListener('DOMContentLoaded', function() {
    var s,t; s = document.createElement('script'); s.type = 'text/javascript';
    s.src = 'https://s3-ap-southeast-1.amazonaws.com/qiscus-sdk/public/qismo/qismo-v3.js'; s.async = true;
    s.onload = s.onreadystatechange = function() {
      new Qismo("your-app-id", options); 
    }
    t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t);
  });
</script>