คุณสามารถใช้ Google Messages กับ RCS และ Google Wallet เพื่อออกแบบขั้นตอนการเช็คอินที่ราบรื่น โดยผู้ใช้จะเช็คอิน รับบัตรขึ้นเครื่อง และเพิ่มบัตรลงใน Google Wallet โดยตรงจากแอป Messages เมื่ออยู่ใน Wallet แล้ว บัตรจะอัปเดตโดยอัตโนมัติหากรายละเอียดเที่ยวบินมีการเปลี่ยนแปลง ผู้ใช้สามารถเข้าถึงบัตรขึ้นเครื่องที่อัปเดตล่าสุดได้อย่างรวดเร็วในโทรศัพท์
เอกสารนี้อธิบายขั้นตอนทางเทคนิคในการใช้บัตร boarding pass กับขั้นตอนใน Google Wallet นอกจากนี้ยังมีตัวอย่างการสนทนาพร้อมเคล็ดลับการออกแบบเพื่อประสบการณ์การเช็คอินที่ราบรื่นและมีประสิทธิภาพด้วย RBM
การติดตั้งใช้งานทางเทคนิค
หากต้องการใช้ขั้นตอน boarding pass กับ Google Wallet คุณจะต้องทำงานร่วมกับ Google Wallet API และ RBM API
ข้อกำหนดเบื้องต้น
หากต้องการเริ่มต้นใช้งาน Google Wallet API ให้ทำตามขั้นตอนที่จำเป็นต่อไปนี้
- ลงชื่อสมัครใช้บัญชีผู้ออก Wallet เพื่อให้คุณสร้างและเผยแพร่บัตรสำหรับ Google Wallet ได้
- สร้างโปรเจ็กต์ Google Cloud (GCP) หากยังไม่มี
- เปิดใช้ Google Wallet API
- สร้างบัญชีบริการและคีย์เพื่อให้เรียกใช้ Google Wallet API ได้
- ให้สิทธิ์บัญชีบริการใน Google Pay และ Wallet Console
- ใช้เทมเพลตบัตรขึ้นเครื่องเพื่อสร้างชั้นชั้นการขึ้นเครื่องใหม่
Google Wallet API
หากต้องการสร้างบัตร boarding pass และสร้าง URL เพิ่มลงใน Google Wallet สำหรับ RBM ให้ทำตามขั้นตอนเหล่านี้
- ดำเนินการตรวจสอบสิทธิ์และการให้สิทธิ์ที่จำเป็น
- สร้างออบเจ็กต์ Passes
- รับ JSON Web Token (JWT) ที่ลงนามแล้ว ความยาวสูงสุดของ JWT ที่เข้ารหัสคือ 2,048 อักขระ
- ใช้ JWT เพื่อสร้าง URL เพิ่มลงใน Google Wallet
RBM API
หากต้องการส่งคำแนะนำ "เพิ่มลงใน Google Wallet" จาก RBM ให้ส่งการดำเนินการ Open URL ในเพย์โหลดข้อความ ให้ทำดังนี้
- สำหรับ
textให้ป้อน "เพิ่มลงใน Google Wallet" - ป้อน URL เพิ่มลงใน Google Wallet ในส่วน
url
ไอคอน Google Wallet จะแสดงในป้ายกำกับคำแนะนำโดยอัตโนมัติ
การออกแบบการสนทนา
ตัวอย่างนี้ใช้พลังเฉพาะของการสนทนาเพื่อแนะนำผู้ใช้ผ่านขั้นตอนการเช็คอินที่สมบูรณ์ ตัวอย่างนี้แสดงให้เห็นวิธีใช้การสนทนาที่เป็นธรรมชาติและฟีเจอร์ที่สมบูรณ์ เช่น คำแนะนำแบบแตะครั้งเดียวและการ์ดที่สมบูรณ์ เพื่อช่วยให้ผู้ใช้บรรลุเป้าหมายได้ ในกรณีนี้ เป้าหมายของผู้ใช้คือ (1) ปรับแต่งประสบการณ์การเดินทางบนเครื่องบิน (2) รับบอร์ดดิ้งพาส และ (3) เพิ่มลงใน Google Wallet เพื่อเข้าถึงอย่างรวดเร็วที่สนามบิน
ต่อไปนี้เป็นภาพรวมของการสนทนา ตามด้วยเคล็ดลับการออกแบบและ รายละเอียดทีละขั้นตอนของโฟลว์ หากต้องการใช้การออกแบบที่คล้ายกันสำหรับตัวแทน ให้ดูตัวอย่างโค้ดโดยทำตามขั้นตอน
คำแนะนำในการออกแบบ
โปรดคำนึงถึงหลักการต่อไปนี้เมื่อออกแบบขั้นตอนการเช็คอิน
- ข้อความแรกเป็นข้อความที่สำคัญที่สุด ระบุวัตถุประสงค์ของการสนทนาคร่าวๆ เพื่อให้ผู้ใช้มีเหตุผลที่จะมีส่วนร่วม
- แต่ละข้อความควรให้ข้อมูลเพียงเล็กน้อยและแจ้งให้ผู้ใช้ตอบกลับ การตอบกลับที่แนะนำและการดำเนินการที่แนะนำจะช่วยผู้ใช้ดำเนินการขั้นตอนถัดไป
- ตัวแทนควรตอบสนองต่อลูกค้า ไม่ใช่ตอบแบบหุ่นยนต์ ใช้ภาษาที่สะท้อนถึงโทนเสียงของแบรนด์ ตัวแทนแบรนด์ในอุดมคติจะแชทกับลูกค้าอย่างไร
- ผู้คนชอบที่จะรู้สึกพิเศษ คุณสามารถปรับเปลี่ยนประสบการณ์การเช็คอินในแบบของคุณโดยแนะนำที่นั่งหรืออาหารตามประวัติเที่ยวบินของผู้ใช้
- Rich Card และภาพสไลด์ทำให้การสนทนามีความหลากหลายมากขึ้น ใช้เพื่อแชร์รูปภาพและรายละเอียดที่จะช่วยให้ผู้ใช้เลือกตัวเลือกต่างๆ ได้
- การสนทนาที่ดีจะจบลงด้วยดี โปรดยืนยันรายละเอียดการเช็คอินของผู้ใช้ก่อนส่งบัตรขึ้นเครื่อง แสดงความเป็นมนุษย์ด้วยการกล่าวคำอำลาอย่างเป็นกันเอง
ขั้นตอนการเช็คอิน
ตัวแทนแจ้งให้ผู้ใช้ทราบว่าเปิดการเช็คอินสำหรับเที่ยวบินแล้ว
ตัวอย่างโค้ด
const suggestions = [ { reply: { text: '⚡ Check in', postbackData: 'checkIn', }, }, { reply: { text: '⏰ Remind me later', postbackData: 'remindMe', }, }, { reply: { text: '✈️ View my flight details', postbackData: 'flightDetails', }, }, { reply: { text: '🔀 Change my flight', postbackData: 'flightChange', }, }, ]; const params = { messageText: 'Check-in for your flight', messageDescription: '👏 Happy morning, Jo! Check-in is now open for your flight from London to Mumbai on ' + getFlightTime() + ' at 2:00PM. What would you like to do? ', msisdn: phoneNumber, suggestions: suggestions, imageUrl: getImageUrl('fly.png'), height: 'MEDIUM', }; rbmApiHelper.sendRichCard(params);
ผู้ใช้แตะการตอบกลับที่แนะนำเพื่อเช็คอิน
ตัวแทนจะกำหนดความคาดหวังเกี่ยวกับกระบวนการเช็คอิน
ตัวอย่างโค้ด
const params = { messageText: "OK, great. It's just 3 simple steps to check in. Here's the first step to get you onboard:", msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function (response, err) { self.sendPolicyImage(msisdn); });
ตัวแทนขอให้ผู้ใช้ยอมรับนโยบายด้านความปลอดภัย
ตัวอย่างโค้ด
const suggestions = [ { reply: { text: 'Yes, I agree', postbackData: 'policy_agree', }, }, { reply: { text: "No, I don't agree", postbackData: 'policy_nack', }, }, ]; const params = { messageText: 'Baggage safety policy', messageDescription: 'To help us ensure a safe flight, please review our safety policy and let us know you agree', msisdn: msisdn, suggestions: suggestions, imageUrl: getImageUrl('policyImage.png'), height: 'MEDIUM', orientation: 'HORIZONTAL', thumbnailImageAlignment: 'LEFT', }; rbmApiHelper.sendRichCard(params);
ผู้ใช้แตะคำตอบที่แนะนำเพื่อยอมรับ
ตัวแทนกล่าวขอบคุณผู้ใช้และแนะนำขั้นตอนถัดไป
ตัวอย่างโค้ด
const params = { messageText: "Thank you - A safe passenger is a happy passenger! Here's the next step:", msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function (response, err) { self.sendPlan(msisdn); });
ตัวแทนแจ้งให้ผู้ใช้เลือกที่นั่ง
ตัวอย่างโค้ด
const suggestions = [ { reply: { text: 'View the seat map', postbackData: 'view_seat_map', }, }, ]; const outerSuggestions = [ { reply: { text: '17A', postbackData: 'seat_17A', }, }, { reply: { text: '17C', postbackData: 'seat_17C', }, }, { reply: { text: '18A', postbackData: 'seat_18A', }, }, { reply: { text: 'Show me more', postbackData: 'more', }, }, ]; const params = { messageText: 'Choose your seat', messageDescription: "It's time to sit back and get comfy! 💺 We've recommended some seats based on your last flight. Choose the one you want, or let us know your preferred seat by typing the number.", msisdn: msisdn, imageUrl: getImageUrl('seatMap.png'), height: 'TALL', orientation: 'VERTICAL', outerSuggestions: outerSuggestions }; rbmApiHelper.sendRichCard(params);
ผู้ใช้แตะการตอบกลับที่แนะนำสำหรับที่นั่งที่เลือก
ตัวแทนยืนยันตัวเลือกของผู้ใช้
ตัวอย่างโค้ด
this.seatmap[msisdn] = seat; const params = { messageText: `Seat ${seat}, you got it`, msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function(res) { self.sendFoodOptions(msisdn); });
ตัวแทนขอให้ผู้ใช้เลือกอาหารบนเที่ยวบิน
ตัวอย่างโค้ด
const params = { messageText: `Now let's talk food 😋 You can pre-order your in-flight meal. Would you be happy with a vegetarian entree or a chicken entree?`, msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function(res) { self.sendFoodDetails(msisdn); });
ตัวแทนจะแสดงตัวเลือกอาหาร
ตัวอย่างโค้ด
const cardContents = [ { title: 'Panzanella salad (v)', description: 'Ingredients: bread, lettuce, onions, tomatoes, olive oil', suggestions: [ { reply: { text: 'Choose vegetarian', postbackData: 'veggie', }, }, ], media: { height: 'MEDIUM', contentInfo: { fileUrl: getImageUrl('salad.jpg'), }, }, }, { title: 'Grilled chicken with greens', description: 'Ingredients: chicken, potatoes, peppers, olive oil', suggestions: [ { reply: { text: 'Choose chicken', postbackData: 'chicken', }, }, ], media: { height: 'MEDIUM', contentInfo: { fileUrl: getImageUrl('chicken.png'), }, }, }, ]; const params = { msisdn: msisdn, cardContents: cardContents, }; rbmApiHelper.sendCarouselCard(params);
ผู้ใช้แตะการตอบกลับที่แนะนำสำหรับอาหารที่ต้องการ
ตัวแทนจะยืนยันตัวเลือกของผู้ใช้
ตัวอย่างโค้ด
const params = { messageText: `Vegetarian it is 💚`, msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function (response, err) { self.sendAskConfirmation(msisdn); });
ตัวแทนสรุปรายละเอียดการเช็คอิน
ตัวอย่างโค้ด
let seat = this.seatmap[msisdn]; const suggestions = [ { reply: { text: "Yes, I'm happy with that", postbackData: 'happy', }, }, { reply: { text: 'Change my seat', postbackData: 'change_seat', }, }, { reply: { text: 'Change my meal', postbackData: 'change_meal', }, }, ]; const params = { messageText: "Here's what we've noted down: You've opted for seat " + seat + " and a vegetarian meal. Please confirm your choices.", msisdn: msisdn, suggestions: suggestions }; rbmApiHelper.sendMessage(params);
ผู้ใช้แตะการตอบกลับที่แนะนำเพื่อยืนยันรายละเอียดการเช็คอิน
ตัวแทนประกาศว่าเช็คอินเสร็จสมบูรณ์
ตัวอย่างโค้ด
const params = { messageText: "Hooray! You're now checked in for your flight ☑️ Here's your boarding pass. We're so happy to host you soon!", msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function (response, err) { self.sendWalletPass(msisdn); });
ตัวแทนจะส่งบอร์ดดิ้งพาสของผู้ใช้
ตัวอย่างโค้ด
this.walletHelper.createFlightPassUrl(this.seatmap[msisdn]).then((url) => { let suggestions = [ { action: { text: 'Add to Google Wallet', postbackData: 'addToWallet', openUrlAction: { url: url }, }, }, ]; const params = { messageText: 'HS123 LHR to BOM\nPassenger: Jo Flow', messageDescription: "We'll keep you up to date! You'll get a notification if your flight details change.", msisdn: msisdn, suggestions: suggestions, imageUrl: getImageUrl('boardingPass.png'), height: 'TALL', orientation: 'HORIZONTAL', thumbnailImageAlignment: 'LEFT', }; rbmApiHelper.sendRichCard(params); });
ในริชการ์ดแนวนอนนี้ ภาพเป็นบัตรขึ้นเครื่องที่ใช้งานได้จริงซึ่งสายการบินเป็นผู้จัดหา ภาพควรแสดงข้อมูลที่จำเป็นทั้งหมดสำหรับการขึ้นเครื่อง รวมถึงบาร์โค้ดที่สแกนได้ ผู้ใช้สามารถแตะรูปภาพเพื่อดูและสแกนบัตร boarding pass จากแอปรับส่งข้อความของ Google
คําแนะนําเพิ่มลงใน Google Wallet จะปรากฏบนการ์ดริชมีเดีย คําแนะนํานี้จะทริกเกอร์การดําเนินการเปิด URL ซึ่งจะเปิดแอป Google Wallet เพื่อให้ผู้ใช้เพิ่มบัตรขึ้นเครื่องลงใน Wallet ได้ (หากแอปไม่ได้อยู่ในอุปกรณ์ของผู้ใช้ ระบบจะแจ้งให้ติดตั้งแอป) เมื่อเพิ่มบัตรลงใน Google Wallet แล้ว ผู้ใช้จะได้รับการช่วยเตือนเที่ยวบินและการอัปเดตสถานะโดยอัตโนมัติหากรายละเอียดเที่ยวบินมีการเปลี่ยนแปลง
และผู้ใช้ที่ไม่ได้เพิ่มบัตรลงใน Google Wallet ก็ควรอัปเดตข้อมูลอยู่เสมอ ส่งข้อความถึงผู้ใช้เกี่ยวกับการเปลี่ยนแปลงข้อมูลการขึ้นเครื่องที่แสดงในการ์ดริชมีเดีย
ผู้ใช้แตะการดําเนินการที่แนะนําเพื่อเพิ่มบัตรลงใน Google Wallet
แอป Google Wallet จะเปิดขึ้น ผู้ใช้แตะปุ่มเพื่อเพิ่มบัตรลงใน Wallet
ผู้ใช้แตะปุ่มเพื่อดูบัตร
บอร์ดดิ้งพาสที่มีคิวอาร์โค้ดจะแสดงขึ้น
