How to Customize Position of Qiscus Widget?
You can follow this steps:
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>The default styles looks like this:
After our extra CSS style it’ll turn out like this:
