Qiscus Web SDK Version 2.6.0 is Now Live. Here’s What’s New!

We’ve recently launched our latest web SDK version. Version 2.6.0 brings a refreshed UI compared to its’ predecessor. In this post we’ll highlight changes brought by this version.

A new UI style

We’ve revamped the styling for the widget to have a slicker look. Here’s what it’s look like compared to its’ predecessor (version 2.5.11).

The left side of the figure is version 2.5.11 compared to version 2.6.0. Version 2.6.0 also brings additional javascript method to easily customize UI elements such as colors and background.

Here’s the minimal code snippet needed to attach Qiscus Web SDK widget to your page.

You can just copy and paste the code snippet, and it’ll just work.

Easy Style Customization

Version 2.6.0 brings you ability to customize its’ UI appearance through the use of javascript config. This version also bring a new global object called QiscusUI to manage the UI in addition to previous version’s QiscusSDK global object. Here’s the configs that you can override.

To override the config call QiscusUI.setCustomColors() method. You can refer to this gist (see line 30) on how to achieve result in the next figure.

Correctly executed the code will result as in the figure below.

Custom Template Support

This version also brings support to creating your own custom template for a custom type comment. Qiscus have many types of comment, the default type is ‘text’. You can create your own type, refer to this documentation on REST API. To demonstrate this feature, we’ll create a post with type of custom. We’ll create a simple user card. Normally, it’ll be accomplished using REST API, but this is only a short introduction. So, we’ll use a shortcut by using this method QiscusSDK.core.sendComment(roomId, commentMessage, uniqueId, type, payload, extras). Refer to this gist below, copy and paste it to your terminal console to post a custom type message with a type of user-card.

After you pasted the code into your terminal, you’ll get a new comment with the content of no template provided. It’s because we haven’t provided the template yet. To provide the template, go to your Qiscus Web SDK initiation line and add templateFunction method. Refer to this gist.

When you’ve finished providing the code in the gist. You now have a custom styled comment.

New File Upload progress bar

In the previous version file uploading didn’t exactly tell us the progress of the uploading process. In 2.6.0 we add a new upload indicator so that we can tell how long we have to wait for the file to be finished uploading by seeing the progress percentage.

Separate UI and Business Logic Core File

Ok, this one is a little bit too technical and not so useful for client who only want to place simple chat widget into their web apps. But, for web developer who want more control over their app this kind of separation is helpful for them. By separating the core javascript file and the UI file, now users can create their own UI. Default Qiscus SDK Web Widget is built on top of VueJs. In case, you want to build another UI built on top let’s say `React JS`. You can create a new UI project which import the separated core file. You can refer to our repo https://github.com/qiscus/qiscus-ui-vue as a base example on how to achieve it.

Core Javascript Repo: https://github.com/qiscus/qiscus-sdk-web-core

Latest 2.6.0 Repo: https://github.com/qiscus/qiscus-ui-vue

See you in the next version. Feel free to open issues on our github page if you find any bug.


Leave a Comment

Show Buttons
Hide Buttons