zopim – PlusMagi's Blog By Pitt Phunsanit

zopim: Options Mobile Vertical Offset

เพราะว่างานที่ทำในส่วนของ 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

zopim: ระบบ chat กับ user

zopim เป็น service ที่ช่วยจัดการระบบ chat กับ user ให้โดยที่เราไม่ต้องเขียนระบบใหม่เอง (ใช้ฟรีได้แต่มีข้อจำกัดดูได้จาก pricing)

การติดตั้ง

สมัครก่อนในหน้า Let’s get started
เปิดอีเมล์ที่เค้าส่งมา แลัวไปที่ dashboard > Settings > Widget
คลิกที่ Appearance ปรับรูปร่างหน้าตา chatbox ให้เหมาะกับเว็บเรา เสร็จแล้วลองเลือก option อื่นๆ ใน Forms, Settings และ Widget Security โดยมันจะเปลี่ยน chat box ให้เราเห็นแทบจะทันทีเลย

การติดตั้งในเว็บไซต์

WordPress หรือ Shopify

ไปที่หัวข้อ 2. Plugins จะมีลิงค์ให้คลิกดาวน์โหลดปลั๊กอินเอาไปติดตั้งได้เลย

ระบบที่เขียนเองและอื่นๆ

ไปที่หัวข้อ 1.Embed the Zendesk Chat Widget copy code เอาไปใช้ได้เลยอย่าง

<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
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/?xxxxxxxxxxxxxxxxxxxxxxxx code ลับ พิชญ์ พันธุ์สนิท xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->

PlusMagi's Blog By Pitt Phunsanit

Tag Archive zopim

zopim: Options Mobile Vertical Offset

zopim: ระบบ chat กับ user