วิธีติดตั้ง Facebook messenger บนเว็บไซต์ของเรา

ในสมัยนี้ไม่ว่าจะมองไปทางไหนก็จะเจอแต่ Live Chat บนเว็บไซต์แทบจะทุกที่ซึ่งอันนี้จะช่วยให้ลูกค้าติดต่อคุยงานสอบถามได้สะดวกมากขึ้น เผื่อไว้เป็นอีกช่องทางนึงในการให้ลูกค้าติดต่อกับเรา

สำหรับใครที่ต้องการมี Live Chat บนเว็บไซต์แบบ เกร๋ๆ นั้นเราสามารถใช้ chat ของ Facebook มาติดตั้งเพื่อให้ลูกค้าสามารถคุยติดต่อกับเพจของเราได้ทันทีบน เว็บไซต์ของเรา

ติดตั้งง่ายๆเพียงไม่กี่ขั้นตอน

ให้เราทำการสมัคร Facebook Developer Account ของเราซะก่อน

ให้เราไปเพิ่ม Whitelisted Domains ใน page ของเราเพื่ออนุญาตให้ เว็บไซต์ของเราเชื่อมต่อกับ page facebook ได้

ไปที่ การตั้งค่า > แพลตฟอร์ม Messenger > Whitelisted Domains

และทำการเพิ่มชื่อ โดเมนเว็บไซต์ของเราลงไป

 

วิธีหา Page ID ของเรา ไปที่หน้าหลักของเพจ แล้วเลือกเมนู เกี่ยวกับ เลื่อนลงมาข้างล่างสุดจะเจอ Page ID

หรือ เข้าไปค้นหา Page ID บน เว็บไซต์นี้ก็ได้เช่นกัน findmyfbid.com

ต่อไปเป็นส่วนของการนำ code ไปติดตั้งบนเว็บไซต์ของเรา

ให้นำ code ด้านล่างนี้ไปใส่ใน เว็บไซต์ของเรา ตรงส่วน Tag Body ที่ทาง facebook แนะนำให้ติดตั้ง

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
	page_id="890130504449776"
	logged_in_greeting="สวัสดีครับ"
	logged_out_greeting="เข้าสู่ระบบ Facebook เพื่อพูดคุยกับเรา">
</div>

อธิบาย code ด้านบนที่เราต้องทำการแก้ไขก่อนนำไปติดตั้งบน เว็บไซต์

1. page_id = ตรงนี้ให้นำส่วนของ Page ID มาใส่ วิธีหาอยู่ด้านบนสามารถ เข้าไปดูบนเพจตัวเองได้เลย

2. logged_in_greeting = ข้อความต้อนรับสำหรับ ผู้ที่เข้ามาในเว็บไซต์ของเราที่มีการ login Facebook เรียบร้อยแล้ว

3. logged_out_greeting = ข้อความสำหรับ บอกผู้ที่เข้ามาในเว็บไซต์ของเรา ที่ยังไม่ได้ทำการ login Facebook ทำให้ยังไม่สามารถ chat กับเราได้