คุณสามารถใช้ Messages โดย Google ร่วมกับ RCS และ Google Wallet เพื่อออกแบบขั้นตอนการเช็คอินที่ราบรื่น โดยผู้ใช้จะเช็คอิน ได้รับบอร์ดดิ้งพาส และเพิ่มใน Google Wallet โดยตรงจากแอป Messages เมื่ออยู่ใน Wallet แล้ว บัตรจะอัปเดตโดยอัตโนมัติหากรายละเอียดเที่ยวบินเปลี่ยนแปลง ผู้ใช้เข้าถึงบอร์ดดิ้งพาส ที่รวดเร็วได้โดยตรงในโทรศัพท์
เอกสารนี้จะอธิบายขั้นตอนทางเทคนิคเพื่อนําบอร์ดดิ้งพาสมาใช้กับขั้นตอนของ Google Wallet และยังมีตัวอย่างการสนทนาที่มีเคล็ดลับในการออกแบบเพื่อ ประสบการณ์การเช็คอินที่ราบรื่นและดีเยี่ยมกับ RBM
การติดตั้งใช้งานทางเทคนิค
คุณจะใช้บอร์ดดิ้งพาสกับขั้นตอนการดําเนินการของ Google Wallet ได้โดยใช้ Google Wallet API และ RBM API
สิ่งที่ต้องดำเนินการก่อน
ในการเริ่มต้นใช้งาน Google Wallet API ให้ทําตามขั้นตอนที่จําเป็นต่อไปนี้
- ลงชื่อสมัครใช้บัญชีผู้ออกบัตร Wallet เพื่อให้สร้างและเผยแพร่บัตรผ่านสําหรับ Google Wallet ได้
- สร้างโปรเจ็กต์ Google Cloud Platform (GCP) หากยังไม่มี
- เปิดใช้ Google Wallet API
- สร้างบัญชีบริการและคีย์เพื่อให้คุณเรียกใช้ Google Wallet API ได้
- ให้สิทธิ์บัญชีบริการในคอนโซล Google Pay และ Wallet
- ใช้เทมเพลตบอร์ดดิ้งพาสเพื่อสร้างชั้นเรียนบอร์ดดิ้งพาสใหม่
API สําหรับ Google Wallet
หากต้องการสร้างบอร์ดดิ้งพาสและสร้าง URL เพิ่มลงใน Google Wallet สําหรับ RBM ให้ทําตามขั้นตอนเหล่านี้
- ดําเนินการตรวจสอบสิทธิ์และการให้สิทธิ์ที่จําเป็น
- สร้างออบเจ็กต์บัตร
- รับโทเค็นเว็บ JSON ที่ลงชื่อ (JWT) ความยาวสูงสุดของ JWT ที่เข้ารหัส คือ 2,048 อักขระ
- ใช้ JWT เพื่อสร้าง URL เพิ่มลงใน Google Wallet
API ของ RBM
หากต้องการส่งคําแนะนํา "เพิ่มลงใน Google Wallet" จาก RBM ให้ส่งการดําเนินการกับ URL ที่เปิดอยู่ ในเพย์โหลดข้อความ ให้ดําเนินการดังนี้
- สําหรับ
textให้ป้อน "เพิ่มลงใน Google Wallet" - สําหรับ
urlให้ป้อน URL เพิ่มลงใน Google Wallet
ไอคอน Google Wallet จะปรากฏบนป้ายกํากับคําแนะนําโดยอัตโนมัติ
การออกแบบการสนทนา
ตัวอย่างนี้ใช้ความสามารถของการสนทนาที่เป็นเอกลักษณ์เพื่อนําทางผู้ใช้ผ่านขั้นตอนการเช็คอินที่สมบูรณ์ โดยสาธิตวิธีการใช้กล่องโต้ตอบตามธรรมชาติและฟีเจอร์ต่างๆ เช่น คําแนะนําแบบแตะครั้งเดียวและการ์ดสื่อสมบูรณ์ เพื่อช่วยให้ผู้ใช้บรรลุเป้าหมาย
ด้านล่างเป็นภาพรวมของการสนทนา ตามด้วยเคล็ดลับการออกแบบ และรายละเอียดขั้นตอนการทํางาน ในการใช้รูปแบบที่คล้ายคลึงกันกับ Agent ของคุณ ให้ดูตัวอย่างโค้ดที่อยู่ด้านล่างขั้นตอน
คําแนะนําในการออกแบบ
คํานึงถึงหลักการเหล่านี้เมื่อคุณออกแบบขั้นตอนการเช็คอินของคุณ:
- ข้อความแรกของคุณสําคัญที่สุด ระบุวัตถุประสงค์ของการสนทนาสั้นๆ เพื่อให้ผู้ใช้มีเหตุผลที่จะมีส่วนร่วม
- ข้อความแต่ละข้อความควรมีข้อมูลส่วนย่อยเล็กๆ และแจ้งให้ผู้ใช้ตอบกลับ การตอบกลับที่แนะนําและการดําเนินการที่แนะนําช่วยให้คุณดําเนินการขั้นตอนถัดไปได้อย่างง่ายดาย
- ตัวแทนต้องตอบสนอง ไม่ใช่หุ่นยนต์ ใช้ภาษาที่แสดงถึงน้ําเสียงของแบรนด์ ตัวแทนของแบรนด์ของคุณเหมาะที่จะใช้แชทกับลูกค้าอย่างไร
- ผู้คนมักจะรู้สึกพิเศษ คุณปรับเปลี่ยนประสบการณ์การเช็คอินในแบบของคุณได้โดยแนะนําที่นั่งหรืออาหารโดยพิจารณาจากประวัติเที่ยวบินของผู้ใช้
- การ์ดสื่อสมบูรณ์และภาพหมุนทําให้การสนทนามีไดนามิกมากขึ้น ใช้ส่วนขยายนี้เพื่อแชร์รูปภาพและรายละเอียดที่จะช่วยผู้ใช้เลือกตัวเลือก
- การสนทนาที่ดีจะจบลงด้วยดี ยืนยันรายละเอียดการเช็คอินของผู้ใช้ก่อนส่ง บอร์ดดิ้งพาส เพิ่มความเป็นมนุษย์ด้วยการแสดงความเป็นกันเอง
ขั้นตอนการเช็คอิน
ตัวแทนแจ้งผู้ใช้ว่าการเช็คอินเที่ยวบินของพวกเขาเปิดอยู่
ตัวอย่างโค้ด
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); });ในการ์ดริชมีเดียแนวนอนนี้ รูปภาพเป็นบอร์ดดิ้งพาสที่ใช้งานได้เต็มรูปแบบจากสายการบิน รูปภาพควรแสดงข้อมูลที่จําเป็นของบอร์ดดิ้งพาสทั้งหมด รวมถึงบาร์โค้ดที่สแกนได้ ผู้ใช้สามารถแตะรูปภาพเพื่อดูและสแกนบอร์ดดิ้งพาสจากแอป Messages ของ Google ได้
คําแนะนําเพิ่มลงใน Google Wallet จะปรากฏในบัตรสื่อสมบูรณ์ คําแนะนํานี้จะทริกเกอร์การดําเนินการของ URL แบบเปิดที่จะเปิดแอป Google Wallet ซึ่งผู้ใช้สามารถเพิ่มบอร์ดดิ้งพาสลงใน Wallet ได้อย่างง่ายดาย (หากแอปไม่ได้อยู่ในอุปกรณ์ของผู้ใช้ ระบบจะแจ้งให้ติดตั้งแอป) เมื่อเพิ่มบัตรลงใน Google Wallet แล้ว ผู้ใช้จะได้รับการช่วยเตือนเที่ยวบินและการอัปเดตสถานะโดยอัตโนมัติ หากรายละเอียดเที่ยวบินมีการเปลี่ยนแปลง
ผู้ใช้ที่ไม่ได้เพิ่มบัตรของตนลงใน Google Wallet จะได้รับการอัปเดตอยู่เสมอ ส่งข้อความถึงผู้ใช้เกี่ยวกับการเปลี่ยนแปลงของข้อมูล บอร์ดดิ้งการ์ดที่แสดง
ผู้ใช้แตะการดําเนินการที่แนะนําเพื่อเพิ่มบัตรผ่านลงใน Google Wallet
แอป Google Wallet จะเปิดขึ้น ผู้ใช้แตะปุ่มเพื่อเพิ่ม บัตรลงใน Wallet
ผู้ใช้แตะปุ่มเพื่อดูบัตรของตนเอง
บอร์ดดิ้งพาสที่แสดงคิวอาร์โค้ดแสดงอยู่
