Google Wallet में बोर्डिंग पास जोड़ें

बिना किसी रुकावट के चेक इन करने के लिए, Google के Messages का इस्तेमाल किया जा सकता है. इसके लिए, आरसीएस और Google Wallet का इस्तेमाल किया जाता है: उपयोगकर्ता अपना चेक-इन पूरा कर लेता है, अपना बोर्डिंग पास पा लेता है, और सीधे Messages ऐप्लिकेशन से Google Wallet में जोड़ देता है. वॉलेट में बदलाव होने पर, पास की जानकारी अपने-आप अपडेट हो जाती है. उपयोगकर्ताओं को अपने फ़ोन पर अप-टू-डेट बोर्डिंग पास का तुरंत ऐक्सेस मिलता है.

इस दस्तावेज़ में, Google Wallet में बोर्डिंग पास को लागू करने के तकनीकी चरणों के बारे में बताया गया है. इसमें आरबीएम के साथ आसान और बेहतर तरीके से चेक-इन करने के अनुभव से जुड़ी सलाह शामिल हैं.

तकनीकी तौर पर लागू करना

Google Wallet फ़्लो में बोर्डिंग पास लागू करने के लिए, आपको Google Wallet API और आरबीएम एपीआई का इस्तेमाल करना होगा.

ज़रूरी शर्तें

Google Wallet API का इस्तेमाल शुरू करने के लिए, इन ज़रूरी चरणों को पूरा करें:

  1. वॉलेट जारी करने वाले खाते के लिए साइन अप करें, ताकि आप Google वॉलेट के लिए पास बना सकें और उन्हें बाँट सकें.
  2. अगर आपके पास पहले से कोई Google Cloud Platform (GCP) प्रोजेक्ट नहीं है, तो उसे बनाएं.
  3. Google Wallet API चालू करें.
  4. सेवा खाता और कुंजी बनाएं, ताकि आप Google Wallet API को कॉल कर सकें.
  5. Google Pay और Wallet Console में सेवा खाते की पुष्टि करें.
  6. बोर्डिंग की नई क्लास बनाने के लिए, बोर्डिंग पास का टेंप्लेट इस्तेमाल करें.

Google Wallet API

बोर्डिंग पास बनाने और आरबीएम के लिए 'Google वॉलेट में जोड़ें' यूआरएल जनरेट करने के लिए, यह तरीका अपनाएं:

  1. ज़रूरी पुष्टि और अनुमति दें.
  2. पास ऑब्जेक्ट बनाएं.
  3. हस्ताक्षर किया गया JSON वेब टोकन (JWT) पाएं. कोड में बदले गए JWT के लिए, ज़्यादा से ज़्यादा 2048 वर्ण इस्तेमाल किए जा सकते हैं.
  4. Google वॉलेट में जोड़ें यूआरएल जनरेट करने के लिए, JWT का इस्तेमाल करें.

आरबीएम एपीआई

आरबीएम से Google Wallet में जोड़ने का सुझाव भेजने के लिए, यूआरएल कार्रवाई खोलें भेजें. मैसेज पेलोड में, ये काम करें:

  1. text के लिए, "Google Wallet में जोड़ें" डालें.
  2. url के लिए, 'Google Wallet में जोड़ें' यूआरएल डालें.

Google Wallet का आइकॉन, सुझाव के लेबल पर अपने-आप दिखेगा.

Google Wallet में जोड़ें सुझाव पर Google Wallet का आइकॉन

बातचीत का डिज़ाइन

यह नमूना बातचीत की खास क्षमता का इस्तेमाल करके, उपयोगकर्ताओं को चेक-इन करने की पूरी प्रोसेस देता है. यहां बताया गया है कि आप एक टैप से मिलने वाले सुझावों और रिच कार्ड जैसी सामान्य बातचीत और रिच सुविधाओं का इस्तेमाल कैसे कर सकते हैं. इससे उपयोगकर्ताओं को अपने लक्ष्य हासिल करने में मदद मिलती है. इस मामले में, इनके लक्ष्य हैं: (1) मेरी फ़्लाइट के अनुभव को पसंद के मुताबिक बनाना, (2) मेरा बोर्डिंग पास पाना, और (3) हवाई अड्डे पर आसानी से ऐक्सेस करने के लिए इसे Google Wallet में जोड़ना.

यहां बातचीत की खास जानकारी दी गई है. इसके बाद, डिज़ाइन से जुड़ी सलाह दी जाती है और सिलसिलेवार तरीके से फ़्लो बनाया जाता है. अपने एजेंट के लिए मिलता-जुलता डिज़ाइन लागू करने के लिए, नीचे दिए गए तरीके से कोड के नमूने देखें.

बातचीत का डायग्राम

डिज़ाइन से जुड़ी सलाह

चेक-इन फ़्लो डिज़ाइन करते समय इन नीतियों को ध्यान में रखें:

  • आपका पहला मैसेज सबसे अहम होता है. बातचीत का मकसद कम शब्दों में बताएं, ताकि उपयोगकर्ता से जुड़ाव महसूस हो.
  • हर मैसेज में जानकारी का एक छोटा सा हिस्सा होना चाहिए और उपयोगकर्ता को जवाब देने के लिए कहा जाना चाहिए. सुझाए गए जवाब और सुझाई गई कार्रवाइयां, अगला कदम उठाना आसान बनाती हैं.
  • आपका एजेंट रिस्पॉन्सिव होना चाहिए, न कि रोबोटिक. ऐसी भाषा का इस्तेमाल करें जो आपके ब्रैंड की शैली को दिखाए. आपका आदर्श ब्रैंड प्रतिनिधि किसी ग्राहक के साथ किस तरह बातचीत करेगा?
  • लोग खास महसूस करना पसंद करते हैं. उपयोगकर्ता की फ़्लाइट के इतिहास के आधार पर सीट या खाने का सुझाव देकर चेक इन का अनुभव अपने हिसाब से बनाया जा सकता है.
  • रिच कार्ड और कैरसेल विकल्प, बातचीत के माहौल को बेहतर बनाते हैं. इमेज और ब्यौरे को शेयर करने के लिए इनका इस्तेमाल करें. इससे उपयोगकर्ता को विकल्पों में से चुनने में मदद मिलेगी.
  • अच्छी बातचीत से बात खत्म हो जाती है. उपयोगकर्ता को चेक इन करने से पहले उसकी जानकारी दें. मिलनसार तरीके से बातचीत को दिलचस्प बनाएं.

चेक-इन फ़्लो

  1. एजेंट, उपयोगकर्ता को सूचना देता है कि उसकी फ़्लाइट के लिए चेक-इन की सुविधा चालू है.

    चेक-इन की जानकारी और सुझाए गए जवाबों के साथ वेलकम मैसेज

    कोड सैंपल

    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);      
    

  2. उपयोगकर्ता, चेक इन करने के लिए सुझाए गए जवाब पर टैप करता है.

    चेक इन करने के लिए सुझाव पर टैप किया गया

  3. एजेंट, चेक-इन की प्रक्रिया के लिए शर्तें तय करता है.

    मैसेज की स्थिति: ठीक है, बढ़िया. चेक इन करने के लिए यह तीन आसान चरण हैं. शामिल होने के लिए पहला कदम

    कोड सैंपल

    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);
    });   
    

  4. एजेंट, उपयोगकर्ता से सुरक्षा नीति को सहमति देने के लिए कहता है.

    सुरक्षा नीति के इंफ़ोग्राफ़िक और सहमत या असहमत होने के सुझाव वाला रिच कार्ड. कार्ड पर मौजूद टेक्स्ट कहता है: सुरक्षित फ़्लाइट पक्का करने में हमारी मदद करने के लिए, कृपया हमारी सुरक्षा नीति देखें और हमें बताएं कि आप इससे सहमत हैं.

    कोड सैंपल

    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);
    

  5. उपयोगकर्ता सहमत होने के लिए, सुझाए गए जवाब पर टैप करता है.

    सहमति देने के लिए दिए गए सुझाव पर टैप किया गया

  6. एजेंट, उपयोगकर्ता को धन्यवाद देता है और अगले चरण के बारे में बताता है.

    मैसेज की स्थिति: धन्यवाद, एक सुरक्षित यात्री खुश है! यह रहा अगला चरण

    कोड सैंपल

    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);
    });     
    

  7. एजेंट, उपयोगकर्ता से सीट चुनने का अनुरोध करता है.

    बैठने की सुविधा वाले मैप के इंफ़ोग्राफ़िक के साथ रिच कार्ड. कार्ड पर लिखा हुआ मैसेज कहता है: आराम से बैठें और आराम करें! हमने आपकी पिछली फ़्लाइट के आधार पर कुछ सीटें सुझाई हैं. अपनी पसंद की सीट चुनें या नंबर लिखकर हमें बताएं. कार्ड के नीचे दिए गए सुझावों में, बैठने के लिए कुछ विकल्प दिए गए हैं

    कोड सैंपल

    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);
    

  8. उपयोगकर्ता, चुनी गई सीट के लिए सुझाए गए जवाब पर टैप करता है.

    सीट 18A के लिए दिए गए सुझाव पर टैप कर दिया गया है

  9. एजेंट, उपयोगकर्ता की पसंद की पुष्टि करता है.

    मैसेज की स्थिति: सीट 18A, आपको समझ आ गया.

    कोड सैंपल

    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);
    }); 
    

  10. एजेंट, उपयोगकर्ता से फ़्लाइट में उसका खाना चुनने के लिए कहता है.

    मैसेज की स्थिति: आइए खाने के बारे में बात करते हैं. फ़्लाइट में खाना ऑर्डर करने से पहले, उसे ऑर्डर किया जा सकता है. क्या आप शाकाहारी भोजन या चिकन की रेसिपी से खुश होंगे?

    कोड सैंपल

    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);
    });
    

  11. एजेंट, मील के विकल्प दिखाता है.

    रिच कार्ड कैरसेल में दो कार्ड दिखते हैं: एक में सलाद की इमेज और दूसरे में रोस्ट चिकन की इमेज है. दोनों कार्ड में सामग्री की सूची होती है और उन्हें चुनने के लिए सुझाव दिए जाते हैं

    कोड सैंपल

    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);
    

  12. उपयोगकर्ता, चुने गए खाने के लिए सुझाए गए जवाब पर टैप करता है.

    शाकाहारी चुनने के सुझाव पर टैप किया गया.

  13. एजेंट, उपयोगकर्ता की पसंद की पुष्टि करता है.

    मैसेज की स्थिति: इसमें शाकाहारी कॉन्टेंट शामिल है.

    कोड सैंपल

    const params = {
      messageText: `Vegetarian it is 💚`,
      msisdn: msisdn,
    };  
    
    let self = this;  
    
    rbmApiHelper.sendMessage(params, function (response, err) {
      self.sendAskConfirmation(msisdn);  
    });
    

  14. एजेंट, चेक-इन की जानकारी में खास जानकारी देता है.

    मैसेज में लिखा है: यहां बताया गया है: आपने सीट 18A और शाकाहारी भोजन के लिए ऑप्ट इन किया है. कृपया अपने चुने गए विकल्पों की पुष्टि करें. जानकारी की पुष्टि करने, खाने में बदलाव करने या सीट बदलने के लिए, मैसेज के नीचे सुझाव दिखते हैं.

    कोड सैंपल

    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);  
    

  15. उपयोगकर्ता, चेक इन करने की जानकारी की पुष्टि करने के लिए, सुझाए गए जवाब पर टैप करता है.

    जानकारी पर टैप करने के लिए, सुझाव पर टैप किया गया है

  16. एजेंट एलान करता है कि चेक-इन हो गया है.

    मैसेज की स्थिति: हुर्रे! आपने अब अपनी फ़्लाइट के लिए चेक इन कर लिया है. यह रहा आपका बोर्डिंग पास. हमें आपको जल्द ही होस्ट करने में बहुत खुशी हो रही है!

    कोड सैंपल

    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);       
    }); 
    

  17. एजेंट, उपयोगकर्ता का बोर्डिंग पास भेजता है.

    रिच कार्ड पर, क्यूआर कोड और फ़्लाइट की जानकारी के साथ बोर्डिंग पास की इमेज दिखती है. कार्ड पर मौजूद टेक्स्ट कहता है: हम आपको अप-टू-डेट रखेंगे! फ़्लाइट की जानकारी में बदलाव होने पर, आपको सूचना मिलेगी. कार्ड पर मौजूद सुझाव के मुताबिक, Google Wallet में जोड़ें

    कोड सैंपल

    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 ऐप्लिकेशन खुल जाता है. इस सुविधा से, उपयोगकर्ता अपने वॉलेट में बोर्डिंग पास आसानी से जोड़ सकता है. (अगर ऐप्लिकेशन उपयोगकर्ता के डिवाइस पर नहीं है, तो उन्हें इंस्टॉल करने के लिए कहा जाएगा.) Google Wallet में पास की जानकारी जुड़ जाने के बाद, उपयोगकर्ता को फ़्लाइट रिमाइंडर अपने-आप मिल जाता है. साथ ही, अगर फ़्लाइट की जानकारी में बदलाव होता है, तो स्टेटस से जुड़े अपडेट भी मिलते हैं.

    जो उपयोगकर्ता Google Wallet में अपने पास को नहीं जोड़ते हैं उन्हें भी अप-टू-डेट रखना चाहिए. रिच कार्ड पर दिखाई गई बोर्डिंग जानकारी में किसी भी बदलाव के बारे में उपयोगकर्ता को मैसेज भेजें.

  18. उपयोगकर्ता, Google Wallet में पास की जानकारी जोड़ने के लिए, सुझाई गई कार्रवाई पर टैप करता है.

    Google Wallet में आइकॉन और Google Wallet में जोड़ने के लिए सुझाव

  19. Google Wallet ऐप्लिकेशन खुलेगा. पास वाले बटन को अपने वॉलेट में जोड़ने के लिए, उपयोगकर्ता बटन पर टैप करता है.

    Wallet ऐप्लिकेशन में, सरल बोर्डिंग पास और 'जोड़ें' बटन दिख रहा है.

  20. अपना पास देखने के लिए, उपयोगकर्ता बटन पर टैप करता है.

    पास के ऊपर सही का निशान दिखता है. Google Wallet में 'देखें' बटन दिखेगा.

  21. क्यूआर कोड के साथ बोर्डिंग पास दिखाया गया है.

    फ़्लाइट के सभी ब्यौरे और क्यूआर कोड के साथ बोर्डिंग पास