आरसीएस और Google Wallet के साथ Google Messages का इस्तेमाल करके, चेक-इन की प्रोसेस को आसान बनाया जा सकता है: उपयोगकर्ता चेक-इन करता है, उसे बोर्डिंग पास मिलता है, और वह उसे सीधे Messages ऐप्लिकेशन से Google Wallet में जोड़ता है. Wallet में पास जोड़ने के बाद, फ़्लाइट की जानकारी में बदलाव होने पर पास अपने-आप अपडेट हो जाता है. उपयोगकर्ताओं को उनके फ़ोन पर, अप-टू-डेट बोर्डिंग पास का ऐक्सेस तुरंत मिल जाता है.
इस दस्तावेज़ में, Google Wallet के फ़्लो में बोर्डिंग पास को लागू करने के तकनीकी चरणों के बारे में बताया गया है. इसमें आरबीएम के ज़रिए चेक-इन करने के लिए, डिज़ाइन से जुड़ी सलाह के साथ-साथ बातचीत का एक सैंपल भी दिया गया है. इससे आपको चेक-इन करने का आसान और बेहतर अनुभव मिलेगा.
तकनीकी तौर पर लागू करना
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
बोर्डिंग पास बनाने और RBM के लिए, 'Google Wallet में जोड़ें' यूआरएल जनरेट करने के लिए, यह तरीका अपनाएं:
- पुष्टि करने और अनुमति देने की ज़रूरी प्रोसेस पूरी करें.
- पास ऑब्जेक्ट बनाएं.
- हस्ताक्षर किया गया JSON Web Token (JWT) पाएं. एन्कोड किए गए JWT की ज़्यादा से ज़्यादा लंबाई 2048 वर्ण होती है.
- 'Google Wallet में जोड़ें' यूआरएल जनरेट करने के लिए, JWT का इस्तेमाल करें.
RBM API
RBM से 'Google Wallet में जोड़ें' सुझाव भेजने के लिए, Open URL action भेजें. मैसेज के पेलोड में, यह काम करें:
textके लिए, "Google Wallet में जोड़ें" डालें.urlके लिए, 'Google Wallet में जोड़ें' यूआरएल डालें.
सुझाव के लेबल पर, Google Wallet का आइकॉन अपने-आप दिखेगा.
बातचीत का डिज़ाइन
इस सैंपल में, बातचीत की खास सुविधा का इस्तेमाल करके, उपयोगकर्ताओं को चेक-इन की पूरी प्रोसेस के बारे में बताया गया है. इसमें दिखाया गया है कि लोगों को उनके लक्ष्यों को पूरा करने में मदद करने के लिए, नैचुरल डायलॉग और बेहतर सुविधाओं का इस्तेमाल कैसे किया जा सकता है. जैसे, एक टैप में मिलने वाले सुझाव और रिच कार्ड. इस मामले में, लोगों के लक्ष्य ये हैं: (1) फ़्लाइट में मिलने वाली सुविधाओं को अपनी पसंद के मुताबिक बनाना, (2) बोर्डिंग पास पाना, और (3) इसे Google Wallet में जोड़ना, ताकि एयरपोर्ट पर इसे तुरंत ऐक्सेस किया जा सके.
इसके बाद, बातचीत की खास जानकारी दी गई है. इसके बाद, डिज़ाइन से जुड़ी सलाह और फ़्लो के बारे में सिलसिलेवार तरीके से जानकारी दी गई है. अपने एजेंट के लिए ऐसा ही डिज़ाइन लागू करने के लिए, यहां दिए गए कोड के सैंपल देखें.
डिज़ाइन से जुड़ी सलाह
चेक-इन फ़्लो डिज़ाइन करते समय, इन सिद्धांतों को ध्यान में रखें:
- आपका पहला मैसेज सबसे ज़्यादा अहम होता है. बातचीत का मकसद कम शब्दों में बताएं, ताकि उपयोगकर्ता को बातचीत में शामिल होने की वजह मिल सके.
- हर मैसेज में थोड़ी जानकारी होनी चाहिए और उपयोगकर्ता को जवाब देने के लिए कहा जाना चाहिए. जवाब के सुझाव और कार्रवाइयों के सुझाव से, लोगों को अगला चरण पूरा करने में मदद मिलती है.
- आपका एजेंट, रोबोट की तरह नहीं, बल्कि इंसानों की तरह जवाब देने वाला होना चाहिए. ऐसी भाषा का इस्तेमाल करें जो आपके ब्रैंड के बात करने के तरीके को दिखाती हो. आपके हिसाब से, ब्रैंड का प्रतिनिधि किसी ग्राहक से किस तरह चैट करेगा?
- लोगों को खास महसूस करना पसंद होता है. उपयोगकर्ता की फ़्लाइट के इतिहास के आधार पर, सीटों या खाने के सुझाव देकर, चेक-इन के अनुभव को मनमुताबिक बनाया जा सकता है.
- रिच कार्ड और कैरसेल से बातचीत ज़्यादा डाइनैमिक हो जाती है. इनका इस्तेमाल करके ऐसी इमेज और जानकारी शेयर करें जिससे उपयोगकर्ता को विकल्पों में से किसी एक को चुनने में मदद मिले.
- अच्छी बातचीत का अंत भी अच्छा होता है. उपयोगकर्ता को बोर्डिंग पास भेजने से पहले, उसकी चेक-इन की जानकारी की पुष्टि करें. दोस्ताना अंदाज़ में विदाई देकर, बातचीत को मानवीय रूप दें.
चेक-इन प्रोसेस
एजेंट, उपयोगकर्ता को बताता है कि उसकी फ़्लाइट के लिए चेक-इन की सुविधा उपलब्ध है.
कोड सैंपल
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 Messages ऐप्लिकेशन में जाकर, इमेज पर टैप करके अपना बोर्डिंग पास देख और स्कैन कर सकते हैं.
रिच कार्ड पर, Google Wallet में जोड़ें का सुझाव दिखता है. इस सुझाव से, यूआरएल खोलने की कार्रवाई ट्रिगर होती है. इससे Google Wallet ऐप्लिकेशन खुल जाता है. यहां उपयोगकर्ता, अपने Wallet में बोर्डिंग पास जोड़ सकता है. (अगर ऐप्लिकेशन उपयोगकर्ता के डिवाइस पर नहीं है, तो उसे इंस्टॉल करने का प्रॉम्प्ट मिलता है.) पास को Google Wallet में जोड़ने के बाद, उपयोगकर्ता को फ़्लाइट की याद दिलाने वाला ईमेल अपने-आप मिल जाता है. साथ ही, अगर फ़्लाइट की जानकारी में बदलाव होता है, तो उसे फ़्लाइट की स्थिति के बारे में अपडेट भी मिलते हैं.
जिन लोगों ने Google Wallet में अपना पास नहीं जोड़ा है उन्हें भी अपडेट के बारे में जानकारी दी जानी चाहिए. रिच कार्ड पर दिखाई गई बोर्डिंग की जानकारी में हुए किसी भी बदलाव के बारे में उपयोगकर्ता को मैसेज भेजें.
उपयोगकर्ता, Google Wallet में पास जोड़ने के लिए सुझाई गई कार्रवाई पर टैप करता है.
Google Wallet ऐप्लिकेशन खुल जाएगा. उपयोगकर्ता, पास को अपने वॉलेट में जोड़ने के लिए किसी बटन पर टैप करता है.
उपयोगकर्ता अपना पास देखने के लिए किसी बटन पर टैप करता है.
क्यूआर कोड वाला बोर्डिंग पास दिखाया गया है.
