เพราะว่างานที่ทำในส่วนของ mobile จะมี bar แสดงเพิ่มขึ้นมาด้านล่างต่างจาก desktop แต่เจ้า zopim มันจะอยู่ล่างสุดเหมือนกัน ทำให้ซ้อนกันดูไม่สวยและใช้งานได้ยากลำบาก จึงตั้งใจที่จะย้าย zopim ขึ้นไปอีก ที่สำคัญคือ จะเป็นตัวอย่างให้เรา config options ให้กับ zopim ที่มันใช้วิธีต่างจากเจ้าอื่นๆมาก
ถ้าต้องการให้ zopim ขึ้นมาจากล่างสุดในแนวตั้งสามารถใช้คำสั่ง
$zopim.livechat.button.setOffsetVerticalMobile( ความสูง );
ตัวอย่าง code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>zopim: Mobile Vertical Offet</title>
<link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style>
#footerMobile {
background: #c00000;
bottom: 0;
height: 200px;
position: fixed;
width: 100%;
}
</style>
</head>
<body>
<div class="visible-sm visible-xs" id="footerMobile">
<h1>You're probably not using a phone.</h1>
</div>
<script>
<!--Start of Zendesk Chat Script-->
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?4fGXBEtxEXbPQBeWWwFwSqG8wmMQ6pAT";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
<!--End of Zendesk Chat Script-->
<!--Start of Zendesk Chat Script Custom Options -->
$zopim(function() {
$zopim.livechat.button.setOffsetVerticalMobile(60);
});
<!--End of Zendesk Chat Script Custom Options-->
</script>
</body>
</html>
อ่านเพิ่มเติม$zopim.livechat.button