LINE Login เชื่อมต่อ LINE LIFF app และ LINE Messaging APIs (กรณีเปิดใช้งาน Messaging APIs แล้ว)

การตั้งค่าการเชื่อม LINE Login กับระบบบัตรสมาชิกสะสมแต้ม Pointspot ไปที่ LINE Official Account เพื่อเพิ่มเรื่องการสมัครสมาชิก และการแจ้งเตือนต่าง ๆ ไปทาง LINE Official Account  (กรณีมี LINE Developer Account และเปิดใช้งาน Messaging APIs อยู่แล้ว) มีวิธีการ 3 ขั้นตอนดังนี้

การตั้งค่าการเชื่อม LINE Login กับระบบบัตรสมาชิกสะสมแต้ม Pointspot ไปที่ LINE Official Account เพื่อเพิ่มเรื่องการสมัครสมาชิก และการแจ้งเตือนต่าง ๆ ไปทาง LINE Official Account  มีวิธีการ 3 ขั้นตอนดังนี้

1. ลงทะเบียน LINE Login ที่  LINE Developer Account และคัดลอกข้อมูล Liff ID จากระบบเพื่อนำไปใช้ตั้งค่าที่ Pointspot

การเปิดใช้งาน LINE Login จะต้องทำการเชื่อมต่อ LINE Official Account กับ  Pointspot จำเป็นจะต้องลงทะเบียนและเปิดใช้งานเพิ่มเติมที่ LINE Developer Account (บัญชีผู้พัฒนาของ LINE สำหรับเปิดใช้งานฟังก์ชันขั้นสูงซึ่งเป็นประโยชน์กับธุรกิจ เช่น LINE Login เป็นต้น) โดยหากท่านมีการลงทะเบียน LINE Developer Account ไว้แล้ว หรือไม่แน่ใจว่าได้ลงทะเบียนไว้หรือยังสามารถทำการตรวจสอบ และตั้งค่าได้ดังนี้

     1.1 ทำการเข้าสู่ระบบ LINE Official Account โดยไปที่ manager.line.biz จากนั้นคลิกที่เมนู ตั้งค่า >> Messaging API หากมีข้อมูล "แชนแนล ID" ดังรูปหมายเลข 3 แสดงว่าท่านเคยลงทะเบียน LINE Developer Account ไว้แล้ว ไม่ต้องทำการลงทะเบียนใหม่ ให้คลิกไปที่ "ตั้งค่าเพิ่มเติมได้ที่ LINE Developers"

     1.2 จากนั้นเข้าสู่ระบบที่ LINE Developer Account คลิกที่ Console ดังรูป

     1.2 เลือก Providers ที่ต้องการเชื่อมต่อ LINE Login กับ Pointspot โดยหากท่านมี Providers ต้องเลือกใช้งานให้ถูกต้องเท่านั้นถึงจะสามารถตั้งค่าเพิ่มเติมได้ จากนั้นระบบจะแสดง Messaging API ที่เคยสร้างไว้

     1.3 ให้คลิกเลือก Create a new channel เพื่อทำการสร้าง LINE Login

     1.4 จากนั้นที่หน้า "Create a  channel" ระบบจะแสดงข้อมูลให้ตั้งค่า ดังนี้

          - Channel type เป็นประเภทการ Create ให้เลือกเป็น LINE Login (ระบบจะเลือกให้อัตโนมัติ)
          - Provider เป็นชื่อ Provider ของธุรกิจที่ท่านต้องการเชื่อมต่อ  (ระบบจะเลือกให้อัตโนมัติ)
          - Region เป็นภูมิภาคที่จะใช้งานระบบ LINE ให้เลือกเป็น Thailand

          - Channel Icon เป็นรูป Icon ที่จะแสดงเฉพาะฝั่ง Admin ใน LINE (ไม่บังคับใส่)
          - Channel Name คือชื่อของ Channel  ที่จะใช้งาน แนะนำใส่เป็นชื่อธุรกิจ (บังคับต้องกรอก)

          - Channel description คือรายละเอียดของธุรกิจที่ให้บริการ (บังคับต้องกรอก)
          - App types คือประเภทการใช้งาน App เนื่องจาก Pointspot เป็นการใช้งานผ่านเว็บเบราว์เซอร์ ในหัวข้อนี้ให้เลือกเป็น "Web app"
          - Email address ระบบจะดึงอีเมลที่ท่านลงทะเบียนมาให้อัตโนมัติ

          - Privancy policy URL สามารถใส่ลิงก์นโยบายความเป็นส่วนตัวได้ แต่หากไม่มีตำแหน่งนี้ไม่ต้องระบุ
         - Terms of use URL สามารถใส่ลิงก์ข้อกำหนดการใช้บริการได้ แต่หากไม่มีตำแหน่งนี้ไม่ต้องระบุ

         - เรียบร้อยแล้วให้คลิกยอมรับยอมรับเงื่อนไขการใช้งาน และคลิกที่ปุ่ม Create ดังรูป

     1.8 เมื่อคลิก Create เรียบร้อยแล้ว ระบบจะแสดงข้อมูล "Channel ID" สำหรับ LINE Login เพื่อใช้สำหรับการสร้าง LINE LIFF ซึ่งจะแนะนำในหัวข้อถัดไป

2. เมื่อท่านทำการลงทะเบียน LINE Login ที่ LINE Developers เรียบร้อยแล้ว ให้ทำการสร้าง LINE LIFF app เพื่อใช้สำหรับการตั้งค่าการเชื่อมต่อไปที่ Pointspot ดังนี้

     2.1 ให้คลิกที่แทบ LIFF ดังรูป

     2.2 จากนั้นคลิกที่ปุ่ม "Add"

     2.3 ทำการตั้งค่าพื้นฐาน ดังนี้

          - LIFF app name แนะนำใส่ชื่อธุรกิจ
          - Size คือขนาดของการแสดงผล LINE LIFF เมื่อคลิกลิงก์จาก Rich Menu เพื่อเข้าถึง Pointspot 

ตัวอย่างการแสดงผล Size ทั้ง 3 รูปแบบ ดังรูปด้านล่าง

          - Enpoint URL คือ URL ของระบบ PointSpot ที่จะนำมาเชื่อมกับ LIFF app โดยสามารถคัดลอก Enpoint URL ได้ที่ระบบบริหารจัดการ Pointspot

          โดยไปที่ระบบบริหารจัดการ Pointspot ที่เมนู ตั้งค่า >> ไลน์ล็อกอิน และเลื่อน Tagle เปิดใช้งานดังรูป

         จากนั้นระบบจะแสดงข้อมูลการเชื่อมต่อระบบ Pointspot กับ ไลน์ล็อกอิน( LINE Login) ดังนี้

              หมายเลข 1 หน้าจอหลัก คือช่องที่แสดง URL ที่จะต้องทำการคัดลอกเพื่อไปเชื่อมต่อกับ ไลน์ LIFF
              หมายเลข 2 เชื่อมต่อระบบ PointSpot กับไลน์ LIFF app คือช่องที่ใช้สำหรับใส่ LIFF ID ในการเชื่อมต่อ

        โดยในหัวข้อนี้ให้ท่านทำการคัดลอด URL หน้าจอหลักดังหมายเลข 1 เพื่อไปดำเนินการต่อที่หัวข้อ Enpoint URL ใน  LINE Developer Account 

          - Scpoes คือขอบเขตที่เราจะนำข้อมูลมาใช้งาน ให้เลือกเป็น profile เพื่อดึงข้อมูลมาใช้ในการสมัครสมาชิกร่วมกับ Pointspot

          - Bot link feature แนะนำให้เลือกเป็น On (Aggressive) วิธีนี้จะทำให้เมื่อผู้ใช้เปิด LIFF app นี้ครั้งแรก จะแสดงหน้าจอ consent และเมื่อกด Allow ก็จะแสดงหน้าจอ Add Friend ก่อนเสมอ 

     2.4 เมื่อใส่ข้อมูลเรียบร้อยแล้ว คลิกที่ปุ่ม Add เพื่อทำการสร้าง LIFF ID

     2.5 เรียบร้อยแล้ว ระบบจะแสดง LIFF ID ให้ท่านทำการคัดลอก เพื่อนำไปเชื่อมต่อที่ระบบ PointSpot

     2.6 ทำการคัดลอก LIFF ID จากนั้นไปที่หน้าบริหารจัดการ Pointspot ที่เมนู ตั้งค่า >> ไลน์ล็อกอิน(LINE Login) และวาง LIFF ID ที่หัวข้อ เชื่อมต่อ Pointspot กับไลน์ LIFF app และกดปุ่มบันทึก ดังรูป 

     2.7 เรียบร้อยแล้วระบบจะแสดงข้อมูล ลิงก์ที่สามารถนำไปใช้งานได้ โดยจะต้องนำไปใช้งานควบคู่กับริชเมนูของ LINE Official Account ซึ่งจะอธิบายวิธีในหัวข้อถัดไป

          2.8 จากนั้นก่อนเริ่มใช้งาน ที่หน้า LINE LIFF app ให้ทำการคลิกที่ Developing เพื่อเปลี่ยนสถานะเป็น Publish ดังรูป

3. การใช้งาน Pointspot ผ่าน  LINE Liff App

โดยสามารถนำลิงก์ไปใช้งานได้ 2 รูปแบบ คือ

3.1 ใช้งานร่วมกับริชเมนูของ LINE Official Account

          1. เมื่อท่านทำการสร้าง LINE Login และ LINE LIFF ที่ LINE Developers เรียบร้อยแล้ว ขั้นตอนต่อไปคือ จะต้องนำลิงก์ที่ได้จากการเชื่อมต่อ (ดังรูปข้อ 2.7) ไปใช้งานควบคู่กับริชเมนูเพื่อให้ลูกค้าสามารถเข้าถึงได้ โดยมีทั้งหมด 4 URL ซึ่งจะนำไปใช้งานทั้งหมด หรือเลือกเฉพาะบางลิงก์ที่ต้องการได้ ดังนี้

               - หน้าจอหลัก เมื่อสมาชิกคลิกเข้าไปที่ URL นี้ ระบบจะแสดงผลหน้าจอหลักของธุรกิจใน PointSpot
               - หน้าจอบัตรสมาชิก เมื่อสมาชิกคลิกเข้าไปที่ URL นี้ ระบบจะแสดงผลหน้าบัตรสมาชิกที่ถืออยู่ (ข้อแนะนำ หากธุรกิจไม่ได้เปิดใช้งานเมนู "บัตรสมาชิก" URL นี้ ไม่ต้องนำไปใช้งาน)
               - หน้าจอคูปองของฉัน เมื่อสมาชิกคลิกเข้าไปที่ URL นี้ ระบบจะแสดงคูปองที่ลูกค้าเคยได้รับ หรือกดแลกรางวัลไว้แต่ยังไม่ได้นำไปใช้งานอัตโนมัติ 

               - หน้าจอรางวัล  เมื่อสมาชิกคลิกเข้าไปที่ URL นี้ ระบบจะแสดงผลรายละเอียดของรางวัลต่าง ๆ ว่ามีอะไรบ้าง และสามารถกดแลกได้ทันทีหากพอยท์สะสมเพียงพอ

               - แลกรับพอยท์ เมื่อสมาชิกคลิกเข้าไปที่ URL นี้ ระบบจะให้สมาชิกกดอัปโหลดใบเสร็จเพื่อแลกรับพอยท์เอง โดยที่ไม่ต้องมาติดต่อแอดมินเพื่อรับพอยท์ 

          2. เนื่องจากการใช้งานริชเมนู ที่ LINE Official Account จะต้องใช้รูปภาพประกอบกับการคลิกลิงก์ ซึ่งหลาย ๆ ธุรกิจอาจจะทีมทำรูปภาพอยู่แล้วก็สามารถใช้รูปของท่านเองได้เลย แต่ธุรกิจไหนไม่มีทีมงานดูแลเรื่องนี้ท่านสามารถตั้งค่า และดาวน์โหลดที่ระบบ Pointspot ไปใช้งานได้ทันที ดังนี้

               ที่เมนู ตั้งค่า >> ไลน์ล็อกอิน ให้คลิกเลือก "ริชเมนู" จากนั้นระบบจะให้ท่านตั้งค่ารูปภาพที่จะนำไปใช้งาน 3 ข้อ ดังรูป
                         หมายเลข 1 ขนาดภาพ คือขนาดรูปภาพที่จะนำไปใช้งาน  สามารถเลือกได้ทั้งหมด 4 ขนาด และมีขนาดละ 4 รูปภาพ ได้แก่ บัตรสมาชิก, สะสมแต้ม, คูปอง และแลกของรางวัล
                         หมายเลข 2 ภาษา คือภาษาที่แสดงในรูปภาพ สามารถเลือกได้ 2 ภาษา คือ ภาษาไทย และภาษาอังกฤษ
                         หมายเลข 3 สีตัวอักษรและไอคอน คือสีข้อความที่แสดงบนไอคอนรูปภาพ สามารถเลือกได้สองโทนสีคือ เข้มและอ่อน
                         หมายเลข 4 คือรูปภาพที่จะนำไปใช้งานร่วมกับริชเมนู มีให้เลือกทั้งหมด 4 ขนาด

          3. ท่านสามารถเลือกขนาดรูปภาพได้ทั้งหมด 4  ขนาด โดยรูปภาพแต่ละแบบจะใกล้เคียงกับรูปที่สามารถใช้งานได้ที่ริชเมนูของไลน์ ดังนี้
                 3.1 ขนาดภาพ 800 x 809 
                 3.2 ขนาดภาพ 1200 x 809 
                 3.3 ขนาดภาพ 1200 x 1618
                 3.4 ขนาดภาพ 2400 x 809

            4 จากนั้นทำการเลือกภาษาของข้อความที่จะแสดงในรูปภาพได้ 2 ภาษา ดังนี้
                 4.1 ภาษาไทย หากท่านเลือกเป็นภาษาไทย ระบบจะแสดงข้อความในรูปภาพเป็นภาษาไทย คือ บัตรสมาชิก, สะสมแต้ม, คูปอง และแลกของรางวัล
                 4.2 ภาษาอังกฤษ หากท่านเลือกเป็นภาษาอังกฤษ ระบบจะแสดงข้อความในรูปภาพเป็นภาษาอังกฤษ คือ Member Card, Points, Coupons และ Redeem

          5. เลือกสีตัวอักษรและไอคอน ของข้อความที่จะแสดงในรูปภาพได้ 2 โทนสี ดังนี้
                5.1 สีเข้ม ระบบจะแสดงข้อความเป็นโทนสีเข้ม 
                5.2  สีอ่อน ระบบจะแสดงข้อความเป็นโทนสีขาว

           6. ทำการตั้งค่ารูปภาพขนาดที่ต้องการ, เลือกภาษา และโทนสีข้อความที่จะแสดงในริชเมนู เรียบร้อยแล้วคลิกที่ปุ่ม "ดาวน์โหลด" เพื่อนำไปใช้งาน

          7. จากนั้นทำการสร้างริชเมนู โดยเข้าสู่ระบบ LINE Official Account Manager ไปที่เมนู หน้าหลัก >> การจัดการห้องแชท >> ริชเมนู จากนั้นคลิกที่ปุ่ม "สร้างใหม่"

          8. จากนั้นทำการตั้งชื่อ และช่วงที่แสดงริชเมนู

          9. ทำการคลิก "เลือกเทมเพลต" ที่จะใช้แสดงริชเมนู

          10. สามารถเลือกเทมเพลตตามต้องการ ตามที่ท่านดีไซต์การใช้ริชเมนูไว้ ตามตัวอย่างข้อเลือกเป็นแบบ 3 คอลัมน์ ดังรูป เรียบร้อยแล้วคลิกที่ปุ่ม เลือก

             11. จากนั้นคลิกที่ "สร้างรูป" เพื่อทำการอัปโหลดรูปริชเมนู

          12. ทำการอัปโหลดรูปที่เตรียมไว้ให้ จากนั้นสามารถทำการปรับแต่งเพิ่มเติมโดยใช้เครืองมือได้ เช่น ใส่สีหรือรูปพื้นหลังให้เหมาะกับธุรกิจมากขึ้น 

             เรียบร้อยแล้วคลิกปุ่ม ใช้ และยืนยันอีกครั้ง ดังรูป

         13. จากนั้นทำการตั้งค่า แอ็กชัน ฝั่งขวามือ ดังนี้
               - ประเภท ให้เลือกเป็น "ลิงก์" โดยทำการคัดลอกลิงก์มาจากระบบบริการจัดการ Pointspot ที่เมนู ตั้งค่า >> ไลน์ล็อกอิน ดังรูป 3.1

               - วางลิงก์ที่คัดลอกมา จากนั้นที่ ป้ายแอ็กชัน แนะนำใส่เป็นคำอธิบายลิงก์ เช่น สมัครสมาชิกสะสมแต้ม

          14. ทำการตั้งค่าแอ็กชัน ให้ครบตามจำนวนคอลัมน์ที่ท่านกำหนดไว้ เรียบร้อยแล้วให้คลิกที่ปุ่ม บันทึก 

               15. เพียงเท่านี้การตั้งค่าการเชื่อม  LINE Official Account กับระบบ PointSpot ก็เรียบร้อยแล้ว 

เมื่อมีสมาชิกสมัครเข้ามาผ่าน LINE Login ผู้ดูแลระบบสามารถดูข้อมูลเพิ่มเติมได้ที่เมนู สมาชิก >> ข้อมูลสมาชิก โดยจะมีไอคอน LINE กำกับที่ตำแหน่งโปรไฟล์ของสมาชิก ดังรูป

   การตั้งค่า LINE Notify (Messaging API)

หลังจากที่ทำการตั้งการเชื่อมต่อ LINE Login แล้ว ในขั้นตอนต่อไปจะเป็นการตั้งค่า Messaging APIs เพิ่มเติม โดยการตั้งค่านี้จะเป็นการแจ้งเตือนข้อความต่าง ๆ จากระบบ Pointspot ได้แก่ การส่งพอยท์, การดึงพอยท์, การส่งคูปองต่าง ๆ, การส่งบัตรกำนัล , การออกบัตรสมาชิก รวมถึงการบรอดแคสต์ข้อความ ผ่านทาง LINE Official Account  

ซึ่งจากเดิมระบบจะส่งการแจ้งเตือนไปทาง SMS แต่หากธุรกิจไหนที่มีการเชื่อมต่อ LINE Login และสมาชิกทำการ Login ผ่าน LINE เรียบร้อยแล้ว เมื่อทำการตั้งค่า LINE Notify ระบบจะส่งการแจ้งเตือนไปยัง LINE Official Account อัตโนมัติ โดยมีขั้นตอนดังนี้

1. เข้าสู่ระบบ LINE Official Account Manager จากนั้นไปที่เมนู "ตั้งค่า"  >> "Messaging API" ดังรูป 

2. จากนั้นคลิกที่ Console

3. เลือก Providers ด้านซ้ายมือให้ถูกต้อง กรณีที่ท่านมีการสร้าง LINE Developers ไว้หลาย Account จากนั้นคลิกเลือก  Messaging API ดังรูป

4. ไปที่หัวข้อ  Messaging APIs

5. เลื่อนลงมาด้านล่างที่หัวข้อ Channel access token และทำการคลิกปุ่มคัดลอกดังหมายเลข 2 เพื่อนำ tokenไปใช้ตั้งค่าที่ระบบ Pointspot 

6. เมื่อคัดลอก  "Channel access token" เรียบร้อยแล้ว ให้ท่านไปที่หน้าบริหารจัดการ Pointspot ที่เมนู ตั้งค่า >> LINE ล็อกอิน >> เชื่อมต่อกับ LINE Messaging และคลิกเปิดใช้งาน ดังรูป

7. ที่หัวข้อ "LINE Messaging โทเคน" ให้วาง  "Channel access token" ที่คัดลอกมา เรียบร้อยแล้วคลิกที่ปุ่ม "บันทึก" เพียงเท่านี้ ท่านก็จะสามารถเริ่มใช้งาน LINE Noti เพิ่มเติมได้

8. หลังจากตั้งค่าเรียบร้อยแล้ว เมื่อท่านมีการส่งพอยท์ หรือคูปองต่าง ๆ ไปยังสมาชิกที่ Login ผ่าน LINE สมาชิกก็จะได้รับการแจ้งเตือนผ่าน LINE Official Account ดังรูป

รูปตัวอย่างการส่งพอยท์

รูปตัวอย่างการแจ้งการรับพอยท์ผ่าน LINE

รูปตัวอย่างการแจ้งการรับคูปองผ่าน LINE

รูปตัวอย่างการแจ้งการรับบัตรสมาชิกผ่าน LINE

ข้อควรรู้เพิ่มเติมเกี่ยวกับ LINE Login & LINE Messaging API

1. ธุรกิจตั้งค่า LINE Login & LINE Notify เรียบร้อยแล้ว เมื่อสมาชิกทำการ Login เข้าใช้งานระบบ Pointspot ผ่าน LINE Official Account  เมื่อธุรกิจหรือร้านค้ามีการส่งพอยท์, ดึงพอยท์, ส่งคูปองต่าง ๆ, ส่งบัตรกำนัล , ออกบัตรสมาชิก รวมถึงการบรอดแคสต์ข้อความ ระบบจะส่งการแจ้งเตือนไปยัง LINE ให้อัตโนมัติ

2. ข้อกำหนดของ LINE : เมื่อสมาชิกได้รับข้อความแจ้งเตือนทาง LINE ข้อความที่ส่งจะถูกคิดโควต้าข้อความรายเดือนของ LINE Official Account (โดยเฉลี่ยราคาข้อความแจ้งเตือนทาง LINE จะราคาถูกกว่าการแจ้งเตือนทาง sms)

3. ผู้ที่จะสามารถดำเนินการตั้งค่า LINE developers และ LINE manager ใน LINE OA ได้ จะต้องมีสิทธิ์ระดับ Admin เท่านั้น

กลับไปยังหน้ารวมการตั้ง LINE Login