เพราะว่างานที่ทำในส่วนของ mobile จะมี bar แสดงเพิ่มขึ้นมาด้านล่างต่างจาก desktop แต่เจ้า zopim มันจะอยู่ล่างสุดเหมือนกัน ทำให้ซ้อนกันดูไม่สวยและใช้งานได้ยากลำบาก จึงตั้งใจที่จะย้าย zopim ขึ้นไปอีก ที่สำคัญคือ จะเป็นตัวอย่างให้เรา config options ให้กับ zopim ที่มันใช้วิธีต่างจากเจ้าอื่นๆมาก
ถ้าต้องการให้ zopim ขึ้นมาจากล่างสุดในแนวตั้งสามารถใช้คำสั่ง
1 | $zopim.livechat.button.setOffsetVerticalMobile( ความสูง ); |
ตัวอย่าง code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!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