DEV Community: desertlion

Qiscus Chat Widget: Use a Custom Trigger Button

desertlion — Tue, 11 Feb 2020 04:19:05 +0000

Qiscus Widget already give you a trigger button like shown below:

But if you ever have a case where you need to use your own button, you could do that by following this procedure:

We need to hide the original qiscus button

<style>
.qcw-trigger-btn { display: none !important; }
</style>

We need to have the replacement button trigger the click event for the original hidden button.

<script>
document.getElementById('my-button-id')
   .addEventListener('click', function() {
      document.querySelector('.qcw-trigger-btn').click();
});
</script>

If you need a working example, refer to this codesandbox.

Extend Qiscus Multichannel Widget Functionality with Custom Callbacks

desertlion — Sun, 09 Feb 2020 18:16:48 +0000

In the previous part of the series, we have learned how to modify the display of our widget by using CSS. In this tutorial, I'll show you how you can extend the functionality of the widget by using custom callbacks.

By using custom callbacks, you can add more functionality for example if you want to log the user state to your own analytics server when the user has successfully logged in, or successfully opened a chat session.

For a detailed explanation, please check this interactive screencast

Basically, you just need to pass a parameter called Callbacks as a 2nd parameter to the Qismo object. Refer to the screencast above for a working example.

Remove Widget's Call to Action Button Label for Mobile view

desertlion — Sun, 09 Feb 2020 16:57:46 +0000

In this 3rd part, we'll remove the label of our widget's call to action button to save more screen space. A mobile device has a narrow screen width and the label make the screen looked cramped.

There's an option to remove it from the widget builder page of the [Qiscus ][https://www.qiscus.com] Multichannel Integration Page. But It'll affect both web and mobile view.

If we only want to remove the label on mobile view, we can do it with the help of CSS Media Query as described in this interactive screencast.

Or if you're in a hurry just copy and paste this code snippet:

<style>
@media (max-width:600px) {
   .qcw-cs-trigger-button div, .qcw-trigger-btn div {
      display: none;
   }
}
</style>

The following is an example if the widget is accessed from the browser

And if the widget is accessed from a mobile browser, the label is hidden

Customizing Qiscus Multichannel Customer Service Chat Widget Position

desertlion — Sun, 09 Feb 2020 16:17:16 +0000

In this part 2 of the series. We'll try to move the position of Qiscus Widget instead of using the default position. It's actually easy to do since we only need to add our own custom CSS for it.

You can customize the widget position by following this steps:

Installed the widget on your page
Add this extra CSS lines inside the <head>...</head> section of your page

//ADD CSS STYLE TO MODIFY POSITION
<style>
.qismo-extra {
 left: 42px;
 right: auto;
}
.qcw-cs-container, .qcw-container {
 left: 42px;
 right: auto;
 align-items: flex-start;
}
.qcw-cs-wrapper, .qcw-chat-wrapper {
  left: 42px;
  right: auto;
}
.start-new-chat-container {
 left: 42px;
 right: auto;
}
</style>

The default styles looks like this:
After we add our extra CSS it'll turn out like this:

If you're interested in a more detailed explanation, you can check this interactive screencast

Implementing Multichannel Customer Service Chat Widget

desertlion — Sun, 09 Feb 2020 16:10:33 +0000

Hi everyone, in this web series I'll guide you to easily implement a simple Multichannel Customer Service Chat widget powered by Qiscus and also modified it to suit our requirements.

In this first part, before I can show you how you can implement the widget, you need to follow these steps first.

Register for Multichannel Chat at Qiscus.
Sign in to your Multichannel dashboard then navigate to the Integration page.
Make sure the Qiscus Widget channel is toggled on
Open your web page's HTML that you want to have a chat widget installed on your favorite editor then copy and paste the code snippet on the page. It'll be something like this

<script>
    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-v2.js'; s.async = true;
        s.onload = s.onreadystatechange = function() { new Qismo("your-own-app-id"); }
        t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t);
    });
</script>

That's it, now you a have a working multichannel cs chat widget.

For more detailed explanation you can check this documentation