Biniş kartını Google Cüzdan'a ekleyin

Sorunsuz bir giriş akışı tasarlamak için Google'dan Mesajlar'ı RCS ve Google Cüzdan ile kullanabilirsiniz: kullanıcı giriş işlemini tamamlar, biniş kartını alır ve Mesajlar uygulamasından doğrudan Google Cüzdan'a ekler. Uçuş bilgileri değiştiğinde kart otomatik olarak güncellenir. Kullanıcılar, güncel bir biniş kartına doğrudan telefonlarından hızlıca erişebilir.

Bu dokümanda, Google Cüzdan'a biniş kartı uygulamak için teknik adımlar açıklanmaktadır. RBM'de sorunsuz ve verimli bir giriş deneyimi için tasarım ipuçlarının paylaşıldığı örnek bir konuşma da bulunur.

Teknik uygulama

Google Cüzdan akışına biniş kartı uygulamak için Google Cüzdan API'si ve RBM API'yi kullanmanız gerekir.

Ön koşullar

Google Cüzdan API'sini kullanmaya başlamak için gerekli adımları uygulayın:

1. Google Cüzdan'a yönelik kart oluşturup dağıtabilmek için bir Cüzdan veren hesaba kaydolun.
2. Henüz yoksa bir Google Cloud Platform (GCP) projesi oluşturun.
3. Google Cüzdan API'sini etkinleştirin.
4. Google Cüzdan API'sini çağırabilmek için bir hizmet hesabı ve anahtarı oluşturun.
5. Hizmet hesabını Google Pay ve Cüzdan Konsolu'nda yetkilendirin.
6. Yeni bir biniş dersi oluşturmak için biniş kartı şablonunu kullanın.

Google Cüzdan API'si

Biniş kartı ve RBM için Google Cüzdan'a Ekle URL'si oluşturmak istiyorsanız şu adımları uygulayın:

1. Gerekli kimlik doğrulama ve yetkilendirme işlemlerini gerçekleştirin.
2. Kartlar nesnesi oluşturun.
3. İmzalanmış bir JSON Web Token (JWT) edinin. Kodlanmış bir JWT'nin maksimum uzunluğu 2048 karakterdir.
4. Google Cüzdan'a Ekle URL'si oluşturmak için JWT'yi kullanın.

RBM API'si

RBM'den Google Cüzdan'a ekleme önerisi göndermek için URL açma işlemi gönderin. İleti yükünde aşağıdakileri yapın:

1. text için "Google Cüzdan'a ekle" yazın.
2. url için Google Cüzdan'a ekle URL'sini girin.

Google Cüzdan simgesi, öneri etiketinde otomatik olarak gösterilir.

Görüşme tasarımı

Bu örnek, kullanıcıları eksiksiz bir giriş akışına yönlendirmek için görüşmenin benzersiz gücünü kullanır. Kullanıcıların hedeflerine ulaşmasına yardımcı olmak için tek dokunuşla öneriler ve zengin kartlar gibi doğal iletişim kutusu ve zengin özellikleri nasıl kullanabileceğinizi gösterir. Bu durumda hedefleri şunlardır: (1) uçuş deneyimimi özelleştirme, (2) biniş kartımı alma ve (3) havaalanında kolay erişim için Google Cüzdan'a ekleme.

Not: Bu örnek, konuşma faturalandırma kategorisindeki bir işlem kullanım alanını temsil eder. Sohbet üzerinden faturalandırmada, kullanıcının ilk yanıtından sonraki 24 saat içinde gönderilen tüm mesajlara sabit ücret uygulanır. Bu sayede, 24 saat boyunca kullanıcıyla herhangi bir ek ücret ödemeden bu işlem hakkında iletişim kurabilirsiniz.

Görüşmeye genel bir bakış aşağıdadır. Daha sonra tasarımla ilgili ipuçları ve akışın adım adım dökümü. Temsilciniz için benzer bir tasarım uygulamak için adımların altındaki kod örneklerine bakın.

Tasarım önerisi

Giriş akışınızı tasarlarken şu ilkeleri aklınızda bulundurun:

• İlk mesajınız en önemli mesaj. Görüşmenin amacını kısaca belirterek kullanıcının etkileşimde bulunmasını sağlayın.
• Her mesaj küçük bir bilgi parçası sağlamalı ve kullanıcıdan yanıt vermesini istemelidir. Önerilen yanıtlar ve önerilen işlemler, bir sonraki adımı atmayı kolaylaştırır.
• Temsilciniz robot değil, duyarlı olmalıdır. Markanızın üslubunu yansıtan bir dil kullanın. İdeal marka temsilciniz bir müşteriyle nasıl sohbet eder?
• İnsanlar kendilerini özel hissetmeyi sever. Kullanıcının uçuş geçmişine göre koltuk veya yemek önerileri sunarak giriş deneyimini kişiselleştirebilirsiniz.
• Zengin kartlar ve bantlar, görüşmeyi daha dinamik hale getirir. Bunları, kullanıcının seçenekler arasından tercih yapmasına yardımcı olacak resimleri ve ayrıntıları paylaşmak için kullanın.
• İyi bir sohbet iyi sonlanır. Biniş kartını göndermeden önce kullanıcının giriş bilgilerini onaylayın. Müşteri dostu bir gönderimle insani bir dokunuş ekleyin.

Check-in akışı

1. Temsilci, kullanıcıya uçuşu için check-in'in açık olduğunu bildirir.

   

   Kod örneği

   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. Kullanıcı, giriş yapmak için önerilen bir yanıta dokunur.

   

3. Temsilci, giriş işlemiyle ilgili beklentileri belirler.

   

   Kod örneği

   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. Temsilci, kullanıcıdan güvenlik politikasını kabul etmesini ister.

   

   Kod örneği

   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. Kullanıcı, kabul etmek için önerilen bir yanıta dokunur.

   

6. Temsilci, kullanıcıya teşekkür eder ve sonraki adımı başlatır.

   

   Kod örneği

   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. Temsilci, kullanıcıdan bir koltuk seçmesini ister.

   

   Kod örneği

   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. Kullanıcı, seçilen lisans için önerilen yanıta dokunur.

   

9. Temsilci kullanıcının seçimini onaylar.

   

   Kod örneği

   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. Temsilci, kullanıcıdan uçaktaki yemeği seçmesini ister.

    

    Kod örneği

    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. Temsilci, yemek seçeneklerini gösterir.

    

    Kod örneği

    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. Kullanıcı, seçtiği yemek için önerilen bir yanıta dokunur.

    

13. Temsilci kullanıcının seçimini onaylar.

    

    Kod örneği

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

14. Temsilci, check-in ayrıntılarını özetler.

    

    Kod örneği

    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. Kullanıcı, giriş bilgilerini onaylamak için önerilen bir yanıta dokunur.

    

16. Temsilci, check-in işleminin tamamlandığını duyurur.

    

    Kod örneği

    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. Temsilci kullanıcının biniş kartını gönderir.

    

    Kod örneği

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

    Bu yatay zengin kartta yer alan resim, hava yolu şirketi tarafından sağlanan tamamen işlevsel bir biniş kartıdır. Resimde, taranabilir bir barkod dahil olmak üzere, gerekli tüm biniş bilgileri gösterilmelidir. Kullanıcılar biniş kartlarını Google'ın Mesajlar uygulamasından görüntülemek ve taramak için resme dokunmanız yeterlidir.

    Not: Zengin karttaki resim, Google Cüzdan'da oluşturulan biniş kartının önizlemesi değildir. Aksine, hava yolu şirketi tarafından oluşturulan bağımsız bir karttır. Tutarlı olması için, zengin karttaki kart Google Cüzdan'daki kart gibi görünmelidir. Referans olması için Cüzdan'ın biniş kartı şablonunu kullanın.

    Zengin kartta Google Cüzdan'a ekle önerisi görünür. Bu öneri, kullanıcı biniş kartını cüzdanına kolayca ekleyebildiği Google Cüzdan uygulamasını açan bir Açık URL işlemi tetikler. (Uygulama kullanıcının cihazında bulunmuyorsa kullanıcıdan uygulamayı yüklemesi istenir.) Kart Google Cüzdan'a eklendikten sonra kullanıcıya, uçuş bilgileri değişirse otomatik olarak bir uçuş hatırlatıcısı ve durum güncellemeleri gönderilir.

    Kartlarını Google Cüzdan'a eklemeyen kullanıcıların da güncel tutulması gerekir. Zengin kart üzerinde gösterilen biniş bilgilerinde yapılan değişiklikler hakkında kullanıcıya mesaj gönderin.

18. Kullanıcı, önerilen bir işleme dokunarak kartı Google Cüzdan'a ekleyebilir.

    

19. Google Cüzdan uygulaması açılır. Kullanıcı, kartı cüzdanına eklemek için bir düğmeye dokunur.

    

20. Kullanıcı, kartını görüntülemek için bir düğmeye dokunur.

    

21. QR koduyla biniş kartı gösteriliyor.