คุณใช้ Messages โดย Google กับ RCS และ Google Wallet ออกแบบขั้นตอนการเช็คอินที่ราบรื่น กล่าวคือ ผู้ใช้ เช็คอิน รับบอร์ดดิ้งพาส และเพิ่มบอร์ดดิ้งพาสไปยัง Google โดยตรง Wallet จากแอป Messages เมื่ออยู่ใน Wallet บัตรจะอัปเดต โดยอัตโนมัติหากรายละเอียดเที่ยวบินมีการเปลี่ยนแปลง ผู้ใช้สามารถเข้าถึง บอร์ดดิ้งพาสล่าสุดในโทรศัพท์ของผู้ใช้
เอกสารนี้จะอธิบายขั้นตอนทางเทคนิคในการใช้งานบอร์ดดิ้งพาสเพื่อ ขั้นตอนของ Google Wallet และยังมีตัวอย่างการสนทนาพร้อมเคล็ดลับในการออกแบบ ประสบการณ์การเช็คอินที่ราบรื่นและมีประสิทธิภาพด้วย RBM
การใช้งานทางเทคนิค
หากต้องการใช้บอร์ดดิ้งพาสในขั้นตอนของ Google Wallet คุณจะต้องทำงานร่วมกับ Wallet API และ RBM API
ข้อกำหนดเบื้องต้น
หากต้องการเริ่มต้นใช้งาน Google Wallet API ให้ทำตามขั้นตอนที่จำเป็นเหล่านี้
- ลงชื่อสมัครใช้ บัญชีผู้ออกบัตร Wallet เพื่อให้คุณสร้างและเผยแพร่บัตรสำหรับ Google ได้ Wallet
- สร้างโปรเจ็กต์ Google Cloud (GCP) หากยังไม่มี
- เปิดใช้ Google Wallet API
- สร้างบัญชีบริการและคีย์เพื่อเรียก Google Wallet API
- ให้สิทธิ์บัญชีบริการใน Google Pay และ Wallet Console
- ใช้เทมเพลตบอร์ดดิ้งพาสเพื่อสร้างชั้นโดยสารใหม่
API ของ Google Wallet
หากต้องการสร้างบอร์ดดิ้งพาสและสร้าง URL เพิ่มลงใน Google Wallet สำหรับ RBM ให้ทำตามขั้นตอนเหล่านี้
- ดำเนินการตรวจสอบสิทธิ์และให้สิทธิ์ที่จำเป็น
- สร้างออบเจ็กต์ Passes
- รับ JSON Web Token (JWT) ที่ลงนามแล้ว ความยาวสูงสุดของ JWT ที่เข้ารหัส คือ 2,048 อักขระ
- ใช้ JWT เพื่อสร้าง URL เพิ่มลงใน Google Wallet
API ของ RBM
หากต้องการส่งคำแนะนำ "เพิ่มลงใน Google Wallet" จาก RBM ให้ส่งการดำเนินการ Open URL ในเพย์โหลดข้อความ ให้ทำดังนี้
- สำหรับ
textให้ป้อน "เพิ่มลงใน Google Wallet" - สำหรับ
urlให้ป้อน URL เพิ่มลงใน Google Wallet
ไอคอน Google Wallet จะแสดงบนป้ายกำกับคำแนะนำโดยอัตโนมัติ
การออกแบบการสนทนา
ตัวอย่างนี้ใช้พลังเฉพาะของการสนทนาเพื่อแนะนำผู้ใช้ผ่าน ดำเนินการตามขั้นตอนการเช็คอินให้เสร็จสมบูรณ์ ซึ่งจะสาธิตวิธีการใช้ข้อความโต้ตอบที่เป็นธรรมชาติและ เช่น คำแนะนำด้วยการแตะเพียงครั้งเดียว และการ์ดสื่อสมบูรณ์ เพื่อช่วยให้ผู้ใช้เข้าถึง เป้าหมาย ในกรณีนี้ เป้าหมายของลูกค้าคือ (1) การปรับแต่งประสบการณ์การใช้งานเที่ยวบิน (2) รับบอร์ดดิ้งพาสของฉัน และ (3) เพิ่มบัตรลงใน 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 คำแนะนำจะปรากฏบน Rich Card คำแนะนำนี้ทริกเกอร์ เปิดการดำเนินการของ URL ที่เปิดแอป Google Wallet ซึ่งผู้ใช้เพิ่มบอร์ดดิ้งพาสได้ กระเป๋าเงินออนไลน์ (หากไม่มีแอปอยู่ในอุปกรณ์ของผู้ใช้ ให้ติดตั้ง) เมื่อเพิ่มบัตรลงใน Google Wallet แล้ว จะได้รับการช่วยเตือนเที่ยวบินโดยอัตโนมัติ และการอัปเดตสถานะ หากรายละเอียดเที่ยวบินมีการเปลี่ยนแปลง
และผู้ใช้ที่ไม่ได้เพิ่มบัตรลงใน Google Wallet ควรมีข้อมูลไม่เกิน วันที่ ส่งข้อความถึงผู้ใช้เกี่ยวกับการเปลี่ยนแปลงข้อมูลการขึ้นเครื่อง ที่แสดงบนการ์ดริชมีเดีย
ผู้ใช้แตะการดำเนินการที่แนะนำเพื่อเพิ่มบัตรลงใน Google Wallet
แอป Google Wallet จะเปิดขึ้น ผู้ใช้แตะปุ่มเพื่อเพิ่มบัตรลงใน Wallet
ผู้ใช้แตะปุ่มเพื่อดูบัตร
บอร์ดดิ้งพาสที่มีคิวอาร์โค้ดจะปรากฏขึ้น
