DEV Community 👩‍💻👨‍💻

desertlion
desertlion

Posted on

Customizing Qiscus Multichannel Customer Service Chat Widget Position

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: default widget style
  • After we add our extra CSS it'll turn out like this: Modified widget position

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

Top comments (0)

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.