Bạn có thể sử dụng Messages của Google thông qua RCS và Google Wallet để thiết kế một quy trình làm thủ tục liền mạch: người dùng hoàn tất quá trình làm thủ tục, nhận thẻ lên máy bay rồi thêm trực tiếp vào Google Wallet từ ứng dụng Tin nhắn. Khi vào ví, thẻ và vé sẽ cập nhật tự động nếu thông tin chi tiết về chuyến bay thay đổi. Người dùng có quyền truy cập nhanh vào thẻ lên máy bay mới nhất ngay trên điện thoại của họ.
Tài liệu này mô tả các bước kỹ thuật để triển khai thẻ lên máy bay đến quy trình của Google Wallet. Nội dung này cũng giới thiệu một cuộc trò chuyện mẫu với các mẹo thiết kế để mang lại trải nghiệm đăng ký mượt mà và hiệu quả bằng RBM.
Triển khai kỹ thuật
Để triển khai thẻ lên máy bay cho luồng Google Wallet, bạn sẽ làm việc với API Ví Google và API RBM.
Điều kiện tiên quyết
Để bắt đầu với API Google Wallet, hãy làm theo các bước bắt buộc sau:
- Đăng ký tài khoản phát hành Wallet để bạn có thể tạo và phân phối thẻ và vé cho Google Wallet.
- Tạo một dự án Google Cloud Platform (GCP) nếu bạn chưa có.
- Bật API Google Wallet.
- Tạo khóa và tài khoản dịch vụ để bạn có thể gọi API Google Wallet.
- Ủy quyền tài khoản dịch vụ trong Bảng điều khiển của Google Pay và Ví.
- Sử dụng mẫu thẻ lên máy bay để tạo một Lớp học bán trú mới.
API Ví Google
Để tạo thẻ lên máy bay và tạo URL Thêm vào Google Wallet cho RBM, hãy làm theo các bước sau:
- Thực hiện xác thực và ủy quyền cần thiết.
- Tạo đối tượng thẻ và vé.
- Lấy Mã thông báo Web JSON đã ký (JWT). Độ dài tối đa của JWT được mã hoá là 2048 ký tự.
- Sử dụng JWT để tạo URL Thêm vào Google Wallet.
API RBM
Để gửi đề xuất Thêm vào Google Wallet từ RBM, hãy gửi Hành động mở URL. Trong nội dung thư, hãy làm như sau:
- Đối với
text, hãy nhập "Thêm vào Google Wallet". - Đối với
url, nhập URL Thêm vào Google Wallet.
Biểu tượng Google Wallet sẽ tự động được hiển thị trên nhãn đề xuất.
Thiết kế cuộc trò chuyện
Mẫu này sử dụng sức mạnh duy nhất của cuộc trò chuyện để hướng dẫn người dùng thông qua quy trình đăng ký hoàn chỉnh. Nó minh họa cách bạn có thể sử dụng hộp thoại tự động và các tính năng phong phú, như đề xuất một lần và thẻ thông tin chi tiết, để giúp người dùng đạt được mục tiêu của họ. Trong trường hợp này, mục tiêu của họ là: (1) tùy chỉnh trải nghiệm chuyến bay của tôi, (2) nhận thẻ lên máy bay của tôi và (3) thêm thẻ vào Google Wallet để truy cập dễ dàng tại sân bay.
Dưới đây là thông tin tổng quan về cuộc trò chuyện. Tiếp theo là các mẹo thiết kế và bảng chi tiết từng bước của quy trình này. Để triển khai một thiết kế tương tự cho tác nhân, hãy xem các mã mẫu bên dưới các bước.
Tư vấn thiết kế
Hãy ghi nhớ các nguyên tắc này khi thiết kế quy trình làm thủ tục:
- Thông điệp đầu tiên là quan trọng nhất. Trình bày ngắn gọn mục đích của cuộc trò chuyện để người dùng có lý do tương tác.
- Mỗi thông báo phải cung cấp một phần thông tin nhỏ và nhắc người dùng trả lời. Câu trả lời đề xuất và hành động đề xuất giúp bạn dễ dàng thực hiện bước tiếp theo.
- Nhân viên hỗ trợ của bạn phải phản hồi, không phải là rô-bốt. Sử dụng ngôn ngữ phản ánh giọng điệu thương hiệu của bạn. Đại diện thương hiệu lý tưởng của bạn sẽ trò chuyện với khách hàng như thế nào?
- Mọi người thích cảm thấy đặc biệt. Bạn có thể cá nhân hóa trải nghiệm đăng ký bằng cách đề xuất chỗ ngồi hoặc bữa ăn dựa trên lịch sử chuyến bay của người dùng.
- Thẻ nhiều định dạng và băng chuyền giúp cuộc trò chuyện sôi động hơn. Sử dụng chúng để chia sẻ hình ảnh và thông tin chi tiết sẽ giúp người dùng chọn trong số các tuỳ chọn.
- Một cuộc trò chuyện hiệu quả sẽ kết thúc tốt đẹp. Xác nhận thông tin đăng ký của người dùng đó trước khi bạn gửi thẻ lên máy bay cho họ. Thêm một nét gần gũi thân thiện với một màn gửi lời thân thiện.
Luồng đăng ký
Nhân viên hỗ trợ thông báo cho người dùng rằng chuyến bay của họ đang làm thủ tục.
Mã mẫu
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);Người dùng nhấn vào một câu trả lời đề xuất để đăng ký.
Nhân viên hỗ trợ đặt ra kỳ vọng cho quá trình đăng ký.
Mã mẫu
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); });Nhân viên hỗ trợ đề nghị người dùng đồng ý với chính sách an toàn.
Mã mẫu
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);Người dùng nhấn vào một câu trả lời đề xuất để đồng ý.
Nhân viên hỗ trợ cảm ơn người dùng và giới thiệu bước tiếp theo.
Mã mẫu
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); });Nhân viên hỗ trợ nhắc người dùng chọn chỗ ngồi.
Mã mẫu
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);Người dùng nhấn vào một câu trả lời đề xuất cho chỗ ngồi họ chọn.
Nhân viên hỗ trợ xác nhận lựa chọn của người dùng.
Mã mẫu
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); });Nhân viên hỗ trợ yêu cầu người dùng chọn bữa ăn trên chuyến bay.
Mã mẫu
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); });Nhân viên hỗ trợ hiển thị các tùy chọn bữa ăn.
Mã mẫu
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);Người dùng nhấn vào một câu trả lời đề xuất cho bữa ăn họ đã chọn.
Nhân viên hỗ trợ xác nhận lựa chọn của người dùng.
Mã mẫu
const params = { messageText: `Vegetarian it is 💚`, msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function (response, err) { self.sendAskConfirmation(msisdn); });Nhân viên hỗ trợ tóm tắt thông tin đăng ký.
Mã mẫu
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);Người dùng nhấn vào một câu trả lời đề xuất để xác nhận thông tin đăng ký.
Nhân viên hỗ trợ thông báo rằng quá trình đăng ký đã hoàn tất.
Mã mẫu
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); });Nhân viên hỗ trợ gửi thẻ lên máy bay cho người dùng.
Mã mẫu
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); });Trong thẻ thông tin theo chiều ngang này, hình ảnh là một thẻ lên máy bay đầy đủ chức năng do hãng hàng không cung cấp. Hình ảnh phải hiển thị tất cả thông tin lên máy cần thiết, bao gồm cả mã vạch có thể quét được. Người dùng chỉ cần nhấn vào hình ảnh để xem và quét thẻ lên máy bay trong ứng dụng Tin nhắn của Google.
Đề xuất Thêm vào Google Wallet sẽ xuất hiện trên thẻ thông tin chi tiết. Đề xuất này kích hoạt một Thao tác mở URL sẽ mở ứng dụng Google Wallet. Tại đây, người dùng có thể dễ dàng thêm thẻ lên máy bay vào ví của họ. (Nếu ứng dụng không có trên thiết bị của người dùng, họ sẽ được nhắc cài đặt ứng dụng đó.) Sau khi thẻ và vé được thêm vào Google Wallet, người dùng sẽ tự động nhận được lời nhắc chuyến bay và thông tin cập nhật trạng thái nếu thông tin chi tiết về chuyến bay của họ thay đổi.
Người dùng không thêm thẻ và vé vào Google Wallet cũng phải được cập nhật. Thông báo cho người dùng về mọi thay đổi đối với thông tin lên máy bay được hiển thị trên thẻ thông tin chi tiết.
Người dùng nhấn vào một hành động đề xuất để thêm thẻ và vé vào Google Wallet.
Ứng dụng Google Wallet sẽ mở ra. Người dùng nhấn vào nút để thêm thẻ và vé vào ví.
Người dùng nhấn vào một nút để xem thẻ và vé.
Thẻ lên máy bay có mã QR được hiển thị.
