Petch Kruapanich
readmoreth
Published in
2 min readApr 2, 2018

--

เชื่อม Facebook Messenger เข้ากับเว็บไซต์ ทำเองก็ได้ง่ายนิดเดียว

นอกจากการมีเว็บไซต์ที่สวยงามแล้ว อีกสิ่งหนึ่งที่เว็บไซต์ทุกอันควรมี ก็คือช่องทางการติดต่อจากลูกค้าของเรา ซึ่งวิธีที่ง่ายที่สุดคงเป็นการแปะ Link Facebook, Line หรือไม่ก็หา Live chat solution มาติดตั้งในเว็บไซต์

ซึ่งในปัจจุบัน Live chat solution ก็มีเยอะมาก ถ้าเป็นเจ้าที่ค่อนข้างคุ้นเคย และเห็นกันเยอะหน่อยก็คงเป็น Intercom.io ,Chat.io ,Kommunicate.io โดยแต่ละเจ้าก็จะมาพร้อมกับ Feature ที่หลากหลาย ในราคาเริ่มต้นตั้งแต่หลักร้อย จนถึงหลักหมื่น ขึ้นอยู่กับ features ที่เราต้องการ และสำหรับคนที่เบี้ยน้อยหอยน้อยหน่อย ก็อาจจะลองไปใช้ของฟรีแบบ tawk.to ก็ถือว่าเป็นตัวเลือกที่น่าสนใจ ซึ่งแต่ละตัวก็จะมีข้อดี ข้อเสีย แตกต่างกันไป ขึ้นอยู่กับความต้องการในการใช้งาน และงบที่เราโอเคกับมัน

แต่วันนี้ Facebook ก็ได้ทำตัวเป็นพ่อพระมาโปรด (หลังจากประกาศลด Reach จนสะเทือนวงการไป) โดยการออก Customer Chat Plugin (ตอนนี้เป็น beta อยู่) ที่สามารถนำไปติดตั้งบนเว็บไซต์ของตัวเองได้ เรียกได้ว่าเป็นอีกทางเลือกนึง สำหรับคนที่ต้องการ Live chat solution ที่ใช้ง่ายทั้งในมุมของ user และมุมของ dev โดยไม่ต้องเสียเงินซักบาท

โดยสิ่งที่เราจะมาลองทำกันในวันนี้ก็คือ การติดตั้ง Facebook Messenger Box เข้ามาในเว็บไซต์ของเรา ซึ่งวิธีการนี้จะช่วยให้ user สามารถพูดคุยกับเราผ่านทางหน้าเว็บไซต์ได้เลย โดยไม่ถูกดีดให้เปิดหน้าใหม่ แล้วไปคุยกันผ่านทาง Facebook Messenger website เหมือนการทำ Facebook Messenger Button หรือ Facebook Messenger Link แบบสมัยก่อน

สิ่งที่ต้องทำมีอะไรบ้าง

  1. หา Facebook Page ID ให้เจอ
  2. ทำ White list domain
  3. แปะ Code snippet Chat Plugin

Facebook Page ID อยู่ที่ไหน เอามายังไง

Facebook Page ID สามารถหาได้ โดยไปที่ tab About ใน Facebook Page และเลื่อนลงมาล่างๆ จะมี Page ID อยู่ตามรูป

จัดการ Whitelist Domain

การทำ Whitelist Domain ให้ไปที่ tab Settings และเลือกที่ Messenger Platform จากนั้นให้ระบุ Whitelisted Domains โดยต้องระบุ domain ทั้งหมดที่ user สามารถเข้ามาถึงได้ ทั้ง http และ https

แปะ Code Chat Plugin

สำหรับใครที่เคยเล่น Customer Chat Plugin ก่อนหน้านี้ เราต้องเขียน Code เองทั้งหมด ซึ่งกินพลังงานมาก แต่ตอนนี้ Facebook ได้ทำ Wizard ออกมาช่วยเราแล้วจ้า โดยไปที่ Messenger Platform และกดปุ่ม Setup ที่ Customer Chat Plugin เราก็จะเจอกับ Wizard สำหรับตั้งค่า Chat box แบบง่ายๆละ

ซึ่ง Wizard ที่ Facebook ทำมาก็อนุญาตให้เราตั้งค่าคำทักทาย เปลี่ยน theme สี ระยะเวลาที่เราจะตอบกลับ (response time) user จะได้พอรู้ว่าเราจะตอบทันที หรืออาจจะต้องรอหน่อย ซึ่งเมื่อตั้งค่าทุกอย่างตามที่ต้องการแล้ว เราก็จะได้ code snippet ออกมาชุดนึง ซึ่งก็ copy ไปแปะได้เลย และก่อนกด Finish ก็อย่าลืมติ๊กที่ I’ve added the code to the website ไปด้วย

จากนั้นให้ Deploy Web ขึ้นไปบน server และลองเข้าไปใช้งานดูนะ เราก็จะพบกับปุ่ม Chat ตามที่เราตั้งค่ามาแล้ว เย้!!

สรุป

หากเรามองในแง่ของ Feature แล้ว Customer Chat Plugin ที่ Facebook ทำมาอาจจะสู้หลายๆเจ้าไม่ได้ เพราะอาจจะไม่ตอบโจทย์ใน Features ล้ำๆหลายๆอย่าง เช่นการโอนเคส การ Capture หน้าจอจากการพูดคุย เป็นต้น แต่สิ่งที่เราคิดว่ามันเจ๋งมากก็คือ Customer Chat Plugin มันคือ Facebook Messenger Platform นั้นหมายความว่า ถ้า Facebook Messenger ทำอะไรได้ Live Chat Solution ของเราก็สามารถทำได้ ดังนั้นคงไม่ใช่เรื่องแปลกอะไร ที่ต่อไปเราจะเห็น Chat bot ในเว็บไซต์ต่างๆมากขึ้น

--

--

Petch Kruapanich
readmoreth

Full time Developer, Part time writer, Vinyl lover