How to Customize Position of Qiscus Widget?

  • Updated

You can follow this steps:

  1. Copy the widget code in the Code Snippet, then paste it on your website.

Add this extra CSS lines inside the <head>...</head> section of your website

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

<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-app-id"); }
t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t);
});
</script>
  1. The default styles looks like this:
    Screen_Shot_2019-08-29_at_4.04.47_PM.png
  2. After our extra CSS style it’ll turn out like this:
    Screen_Shot_2019-08-29_at_4.04.29_PM.png

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.