เพราะว่างานที่ทำในส่วนของ mobile จะมี bar แสดงเพิ่มขึ้นมาด้านล่างต่างจาก desktop แต่เจ้า zopim มันจะอยู่ล่างสุดเหมือนกัน ทำให้ซ้อนกันดูไม่สวยและใช้งานได้ยากลำบาก จึงตั้งใจที่จะย้าย zopim ขึ้นไปอีก ที่สำคัญคือ จะเป็นตัวอย่างให้เรา config options ให้กับ zopim ที่มันใช้วิธีต่างจากเจ้าอื่นๆมาก
ถ้าต้องการให้ zopim ขึ้นมาจากล่างสุดในแนวตั้งสามารถใช้คำสั่ง[code language=”javascript” title=”zopim:options”]$zopim.livechat.button.setOffsetVerticalMobile( ความสูง );[/code]
ตัวอย่าง code[code language=”html” title=”zopim.setOffsetVerticalMobile.html”]<!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>[/code]
อ่านเพิ่มเติม$zopim.livechat.button