การทำ facebook messenger chatbot ติดหน้าเว็บแบบไม่ต้อง code
หน้าตาก็จะประมาณนี้
<!-- Load Facebook SDK for JavaScript -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '123456778900,
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
};
(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.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<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#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution="setup_tool"
page_id="876543210"
theme_color="#0084ff">
</div>
</body>
</html>
เมื่อเข้าหน้าเว็บ ก็จะมีรูปไอคอน messenger ที่ด้านล่างขวามือ
เมื่อคลิ๊กที่รูปไอคอน messenger ก็จะแสดงหน้า messenger chatbot
วิธีการทำ
ขั้นตอนที่ 1 ทำ Chatbot รอไว้
เราจะต้องสร้างตัว chatbot บน messenger ก่อน โดยใช้เครื่องมือที่แสนจะง่ายดายด้วย Hbot Platform เข้าใช้งานได้ที่ https://sid.hbot.io/
วิธีการใช้งานสามารถอ่านได้ที่ https://medium.com/hbot/สร้างแชทบอทคูล-ๆ-ใคร-ๆ-ก็ทำได้-ตอนที่-1-b32806021eae น้องเค้าเขียนไว้ดีมาก
หลังจากเราได้สร้าง chatbot บน facebook messenger เรียบร้อยแล้ว ก็มาดูขั้นตอนต่อไป
ขั้นตอนที่ 2 ตั้งค่าที่ page ของ chatbot
เข้าไปที่ page ที่เราสร้าง chatbot
ด้านขวามือ เลือก about แล้วเลื่อนไปดูด้านล่าง copy ค่าที่เขียนว่า page id
ต่อไปให้คลิ๊กเลือก setting ที่ด้านขวา แล้วเลือก messenger form ด้านซ้าย เผื่อกำหนด white list domain พูดให้ง่ายก็คือ ให้ใส่ชื่อ เว็บไซด์ที่เราจะเอา chatbot ไปแปะ
คลิ๊ก setting ด้านบนแล้วเลือก messenger plaform
จากนั้นตรง whilte-listed domains ให้ใส่ชื่อเว็บไซด์ที่เราจะไปแปะ โดยที่ผมทดลองคือ จะต้องเป็น https:// และมีชื่อ จะเป็นหมายเลขไอพีไม่ได้
**** ขั้นตอนนี้ที่สำคัญคือเราจะเอา Page id ไปใช้
ขั้นตอนที่ 3 กำหนดค่าที่ facebook
เข้าไปที่ https://developers.facebook.com/ เลือก create new app แล้วใส่ข้อมูลตามตัวอย่าง
ข้อมูลที่ผมกรอกไป
1.ชื่อที่แสดง
2.contact email
3.Privacy Policy URL ผมใส่ชื่อเว็บไซด์เดียวกับที่ทำ whilte-listed domain
4. Terms of Service URL ผมใส่ชื่อเว็บไซด์เดียวกับที่ทำ whilte-listed domain
5. ใส่รูปลงไป
*** ส่วนที่สำคัญที่สุดของขั้นตอนนี้คือ เราจะได้ APP ID ที่อยู่ข้างบนนำไปใช้
ขั้นตอนที่ 4
นำ code นี้ไปแปะระหว่าง <body></body> จากตัวอย่างจะได้แบบนี้
<html>
<body>
<!-- Load Facebook SDK for JavaScript -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '123456778900,
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
};
(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.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<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#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution="setup_tool"
page_id="876543210"
theme_color="#0084ff">
</div>
</body>
</html>
ให้เราเปลี่ยนตัวเลขสีเหลืองในภาพ เป็นของเราครับ
app_id ได้จากขั้นตอนที่ 3
page_id ได้จากขั้นตอนที่ 2
และแล้ว เราก็จะได้แบบนี้
จบแล้วครับ ง่ายไหมครับ ................
เยี่ยมเลย
ตอบลบนำเอามาติดใน blogger ได้ไหมครับ https://www.dek-ramshop.online ขายอุปกรณ์มือถือ
ตอบลบ