Press enter to see results or esc to cancel.

How to Implement Customer Service Chat for Website with Qiscus SDK

Customer service is irrefutably important in business especially when you merge communication technology, such as a website, into your business. There are many reasons why we have to provide the best form of customer service, one of them being the need to gain trust of customers. Good customer service also at the same time has its role in identifying the brand of your business while also being a tool for conflict management. cs chat.

Customer service comes in several forms and one of them is chat services. Having realized that chat services are prominently necessary for business matters, Qiscus, as a communications service provider, has chat service as one of its products. Nonetheless,  to implement chat on your website with Qiscus SDK is not difficult. The following is a step-by-step CS chat implementation which you can embed onto your website:

1. APP ID

Firstly, we must have APP ID that you can obtain from our dashboard. If you already have APP ID, skip this step and go ahead to the next step. APP ID is needed so that we can get connected with Qiscus-SDK.

2. Qiscus-SDK Chat Implementation (cs chat)

The next thing is to apply Qiscus-SDK chat.

a. Visit https://www.qiscus.com/documentation/web/getting-started#create-chat-room

b. Insert tag <div id=”qiscus-widget”></div> inside the tag <body> in your website, as follows:

<body>
  <div id="qiscus-widget"></div>
</body>

Note: properties id=”qiscus-widget” in the tag div cannot be changed. If you change it to another name, Qiscus SDK chat will not appear.

c. Add css file in the <head> tag in your website as follows:

<head>
  <title>Qiscus SDK Sample</title>
  <link rel="stylesheet" type="text/css" href="https://qiscus-sdk.s3-ap-southeast-1.amazonaws.com/web/v2.5.9/qiscus-sdk.2.5.9.css">
</head>

d. Add js file in the tag <body> bottom before the closing tag </body> in your website:

<body>
  <div id="qiscus-widget"></div>
  <script 
src="https://qiscus-sdk.s3-ap-southeast-1.amazonaws.com/web/v2.5.9/qiscus-sdk.2.5.9.js"></script>
</body>

e. Afterwards, create main.js file and insert script as follows:

QiscusSDK.core.init({
      AppId: 'dragongo',
      options: {
          loginSuccessCallback: function () {
            // Do something after successfully login
      }
    }
});
QiscusSDK.core.setUser('userId', 'userKey', 'Qiscus Demo', 'http://some-url.com/avatar.png')
QiscusSDK.render();

Attach the main.js file inside the tag <body> in your website:

<body>
      <div id="qiscus-widget"></div>
      <script 
src="//s3-ap-southeast-1.amazonaws.com/qiscus-sdk/web/v2.5.10/qiscus-sdk.2.5.10.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>

Up until this step, you should have successfully made a chat with Qiscus SDK. Save the file and reload your browser.
The next step to do is how you can use your APP ID and make an administrator in Customer Service chat.

Also read: “Create Realtime Webapp using Vuejs and Firebase

3. APP ID as Core URL hat

In order to make Qiscus SDK chat in sync with APP ID, there are some settings necessary. Open your main js.file and change AppID: ‘dragongo’ in the core unit with your AppID, for example:

QiscusSDK.core.init({
        AppId: 'qiscuscs-5xm3wgs5fc1p',
        options:{
            avatar: false
        }
});

4. Make Customer Service Administrator with SetUser

To operate normally, we need an administrator. Here, an administrator is someone who communicates directly with clients who visit the website. To create an administrator, you can simply sign the user up through Qiscus SDK, look at the main.js file, in code line QiscusSDK.core.setUser(‘userId’, ‘userKey’, ‘Qiscus Demo’, ‘http://some-url.com/avatar.png’), change ‘userKey’ with your own user key. For example, in this case, I will fill it with ‘p455word’, and change ‘Qiscus Demo’ with your administrator’ name, for example: ‘Admin’. Here is the example of making a chat administrator:

QiscusSDK.core.setUser(`‘[email protected]om`, ` p455word`, `Admin`, ` 
https://robohash.org/buhaji/bgset_bg2/3.14160?set=set4`)

After you are done, reload your browser.
Important note: Please remember to save your user administrator because it will be used again.

5. Activate CS Administrator Using chatTarget

To activate user admin that has been registered before, you should add target chat code, open main.js file, and insert in the option, as demonstrated below:

QiscusSDK.core.init({
  AppId: 'qiscuscs-5xm3wgs5fc1p',
  options: {
    loginSuccessCallback: function (userData) {
      QiscusSDK.core.UI.chatTarget('[email protected]')
    }
  }
})

6. Add User Randomly

It is not necessary to do this if you have saved the user in a database. However, if you want to use Qiscus SDK chat on one of the pages in your website, where it will be difficult to track your website visitors, the solution is to make users randomly so that they can communicate with the administrator. This is an example of how to make a user randomly.

var randomID = null;
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
randomID += possible.charAt(Math.floor(Math.random() * possible.length));
var randomKey = Date.now();
var userData = {
  user_id : randomID + '@guestqiscus.com',
  user_key : randomKey,
  user_name : 'Guest - ' + randomKey
}

From what we see above, it can be seen that userId will have value with email format, whereas userKey will have value random key taken from timestamp. After that, set user with the date resulted from generate:

QiscusSDK.core.setUser(userData.user_id, userData.user_key, 
userData.user_name)

Note: We do not set the avatar simply because it is optional.

7. Login User Using localStorage

If you have successfully made user randomly, this will be impacting on too many users signed up and make it less effective. In addition, if a user reloads the browser, the chat history between the administrator and user will vanish because the user has a new account. To prevent that, we should save data user in the localStorage browser client. See the example below:

localStorage.setItem('data', JSON.stringify(userData));

To call data from localStorage, follow this below:

JSON.parse(localStorage.getItem('data'))

8. Inactivate Auto Open Chat

At anytime that you do not want chats to keep appearing after your webpage has been reloaded, deactivate auto open chat using this checking:

jQuery(function(){
  jQuery('body').on('click','.qcw-trigger-btn', function(){
      if(!qiscus.selected) QiscusSDK.core.UI.chatTarget('[email protected]');
  })
})

The illustration below is the complete code of CS chat implementation to website with Qiscus SDK:
Main.js

// initial chats
var userID = null
var userKey = null
var userName = null
var ls = JSON.parse(localStorage.getItem('data'));
if (ls !== null) {
  userID = ls.user_id
  userKey = ls.user_key
  userName = ls.user_name
} else {
  var randomID = null;
  var possible = 
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  for (var i = 0; i < 5; i++)
  randomID += possible.charAt(Math.floor(Math.random() * 
possible.length));
  var randomKey = Date.now();
  var userData = {
    user_id : randomID + '@guestqiscus.com',
    user_key : randomKey,
    user_name : 'Guest - ' + randomKey
  }
  localStorage.setItem('data', JSON.stringify(userData));
  userID = userData.user_id
  userKey = userData.user_key
  userName = userData.user_name
}
 
QiscusSDK.core.init({
    AppId: 'qiscuscs-5xm3wgs5fc1p',
    options:{
        avatar: false
    }
});
QiscusSDK.core.setUser(userID, userKey, userName)
QiscusSDK.render()
jQuery(function(){
    jQuery('body').on('click','.qcw-trigger-btn', function(){
        if(!qiscus.selected) 
QiscusSDK.core.UI.chatTarget('[email protected]');
    })
})

That’s it. Your CS chat service is now ready to go! If you are part of a business and want to improve your customer service system, we would be glad to to help. Just drop a note here for more details or you can read our white paper and see what we can offer for you.

Comments

Leave a Comment

Subscribe Your Email

Receive the latest news, insight, and tutorials in the chat and messaging technology.


Show Buttons
Hide Buttons