您可以使用 Google 訊息搭配 RCS 和 Google 錢包，設計出流暢的報到流程：使用者完成登機報到、收到登機證，然後將登機證從「訊息」應用程式直接新增至 Google 錢包。一旦在錢包中填入航班詳細資料，票證就會自動更新。使用者可在手機上快速取得最新登機證。
本文說明將登機證導入 Google 錢包流程的技術步驟。這份文件也提供對話範例，提供設計訣竅，協助你透過 RBM 提供順暢且有效率的入住體驗。
技術實作
如要將登機證導入 Google 錢包流程，您必須使用 Google Wallet API 和 RBM API。
必要條件
如要開始使用 Google Wallet API，請按照下列必要步驟操作：
- 註冊 Wallet 發卡機構帳戶，即可建立及發布 Google 錢包的票證。
- 如果您還沒有 Google Cloud (GCP) 專案，請建立一個。
- 啟用 Google Wallet API。
- 建立服務帳戶和金鑰，以便呼叫 Google Wallet API。
- 在 Google Pay 和錢包主控台中授權服務帳戶。
- 使用登機證範本建立新的登機類別。
Google Wallet API
如要建立登機證並產生 RBM 的「新增至 Google 錢包」網址，請按照這些步驟操作：
- 執行必要的驗證和授權作業。
- 建立 Passes 物件。
- 取得已簽署的 JSON Web Token (JWT)。經過編碼的 JWT 長度上限為 2048 個半形字元。
- 使用 JWT 產生「新增至 Google 錢包」網址。
RBM API
如要從 RBM 傳送「新增至 Google 錢包」建議，請傳送開啟網址動作。 在訊息酬載中執行下列操作：
- 針對
text，輸入「新增至 Google 錢包」。 - 在
url中輸入「新增至 Google 錢包」網址。
系統會自動在建議標籤上顯示 Google 錢包圖示。
對話設計
這個範例會利用對話的獨特力量，引導使用者完成報到流程。這項功能可讓您使用自然對話和豐富功能 (例如一鍵建議和豐富資訊卡)，協助使用者達成目標。在本例中，使用者的目標是：(1) 自訂航班體驗、(2) 取得登機證，以及 (3) 將登機證加入 Google 錢包，以便在機場快速存取。
接下來，我們將簡要說明對話內容。接著是設計提示，以及流程的逐步說明。如要為服務機器人實作類似的設計，請參閱下列步驟中的程式碼範例。
設計建議
設計登記流程時，請謹記以下原則：
- 第一封郵件最為重要。簡要說明對話目的，讓使用者有理由與你互動。
- 每則訊息都應提供一小段資訊，並提示使用者回覆。建議回覆和建議動作可協助使用者採取後續步驟。
- 服務專員應即時回應，不要機械式回覆。使用反映品牌語氣的用語。您理想中的品牌代表會如何與客戶進行即時通訊？
- 人們喜歡感覺自己很特別。您可以根據使用者的航班記錄，建議座位或餐點，打造個人化的報到體驗。
- 複合式資訊卡和輪轉介面可讓對話更生動有趣。您可以使用這些資訊分享圖片和詳細資料，協助使用者在選項中做出選擇。
- 良好的對話過程很順利。請先確認使用者的登機證詳細資料，再傳送登機證。以親切的問候語，讓客戶感受到人性化的服務。
入住流程
服務專員通知使用者，航班報到服務已開放。
程式碼範例
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); });在這個水平複合式資訊卡中，圖片是航空公司提供的完整登機證。圖片應顯示所有必要的登機資訊，包括可掃描的條碼。使用者可以輕觸圖片，在 Google 訊息應用程式中查看及掃描登機證。
複合式資訊卡會顯示「新增至 Google 錢包」建議。這項建議會觸發「開啟網址動作」，開啟 Google 錢包應用程式，讓使用者將登機證新增至錢包。(如果應用程式不在使用者的裝置上，系統會提示使用者進行安裝)。將票證新增至 Google 錢包後，如果航班資訊有異動，使用者就會自動收到航班提醒和狀態更新。
如果使用者未將票證新增至 Google 錢包，也請務必更新。針對資訊卡上顯示的登機資訊變更，傳送訊息給使用者。
使用者輕觸建議動作，將票證新增至 Google 錢包。
Google 錢包應用程式會隨即開啟。使用者輕觸按鈕，將票證新增至錢包。
使用者輕觸按鈕即可查看票證。
畫面上會顯示含有 QR code 的登機證。
