Menambahkan boarding pass ke Google Wallet

Anda dapat menggunakan Google Message dengan RCS dan Google Wallet untuk mendesain alur check-in yang lancar: pengguna menyelesaikan check-in, menerima boarding pass, dan menambahkannya langsung ke Google Wallet dari aplikasi Message. Setelah ada di Wallet, kartu akan diperbarui secara otomatis jika detail penerbangan berubah. Pengguna memiliki akses cepat ke boarding pass terbaru langsung di ponsel mereka.

Dokumen ini menjelaskan langkah-langkah teknis untuk menerapkan alur kartu boarding ke Google Wallet. Dokumen ini juga menampilkan contoh percakapan dengan tips desain untuk pengalaman check-in yang lancar dan efisien dengan RBM.

Implementasi teknis

Untuk menerapkan alur boarding pass ke Google Wallet, Anda akan menggunakan Google Wallet API dan RBM API.

Prasyarat

Untuk mulai menggunakan Google Wallet API, ikuti langkah-langkah yang diperlukan berikut:

  1. Daftar untuk mendapatkan akun penerbit Wallet agar Anda dapat membuat dan mendistribusikan kartu untuk Google Wallet.
  2. Buat project Google Cloud (GCP) jika Anda belum memilikinya.
  3. Aktifkan Google Wallet API.
  4. Buat akun layanan dan kunci agar Anda dapat memanggil Google Wallet API.
  5. Beri otorisasi akun layanan di Konsol Google Pay dan Wallet.
  6. Gunakan template kartu boarding untuk membuat class Boarding baru.

Google Wallet API

Untuk membuat kartu boarding dan menghasilkan URL Tambahkan ke Google Wallet untuk RBM, ikuti langkah-langkah berikut:

  1. Lakukan autentikasi dan otorisasi yang diperlukan.
  2. Buat Objek Kartu.
  3. Dapatkan Token Web JSON (JWT) yang ditandatangani. Panjang maksimum JWT yang dienkode adalah 2048 karakter.
  4. Gunakan JWT untuk membuat URL Tambahkan ke Google Wallet.

RBM API

Untuk mengirim saran Tambahkan ke Google Wallet dari RBM, kirim tindakan Buka URL. Di payload pesan, lakukan hal berikut:

  1. Untuk text, masukkan "Tambahkan ke Google Wallet".
  2. Untuk url, masukkan URL Tambahkan ke Google Wallet.

Ikon Google Wallet akan otomatis ditampilkan pada label saran.

Ikon Google Wallet pada saran Tambahkan ke Google Wallet

Desain percakapan

Contoh ini menggunakan kekuatan unik percakapan untuk memandu pengguna melalui alur check-in yang lengkap. Demo ini menunjukkan cara Anda dapat menggunakan dialog alami dan fitur lengkap, seperti saran sekali ketuk dan kartu lengkap, untuk membantu pengguna mencapai tujuan mereka. Dalam hal ini, tujuan mereka adalah: (1) menyesuaikan pengalaman penerbangan saya, (2) menerima boarding pass saya, dan (3) menambahkannya ke Google Wallet untuk akses cepat di bandara.

Selanjutnya adalah ringkasan percakapan. Setelah itu, ada tips desain dan perincian langkah demi langkah alur. Untuk menerapkan desain serupa bagi agen Anda, lihat contoh kode yang mengikuti langkah-langkahnya.

Diagram percakapan

Saran desain

Perhatikan prinsip-prinsip berikut saat mendesain alur check-in Anda:

  • Pesan pertama Anda adalah yang paling penting. Nyatakan secara singkat tujuan percakapan agar pengguna memiliki alasan untuk berinteraksi.
  • Setiap pesan harus memberikan sedikit informasi dan meminta pengguna untuk merespons. Balasan yang disarankan dan tindakan yang disarankan membantu pengguna mengambil langkah berikutnya.
  • Agen Anda harus responsif, bukan seperti robot. Gunakan bahasa yang mencerminkan gaya bahasa merek Anda. Bagaimana cara perwakilan brand ideal Anda melakukan chat dengan pelanggan?
  • Orang-orang ingin merasa spesial. Anda dapat mempersonalisasi pengalaman check-in dengan menyarankan tempat duduk atau makanan berdasarkan histori penerbangan pengguna.
  • Kartu multimedia dan carousel membuat percakapan menjadi lebih dinamis. Gunakan untuk membagikan gambar dan detail yang akan membantu pengguna memilih di antara opsi.
  • Percakapan yang baik akan berakhir dengan baik. Konfirmasi detail check-in pengguna sebelum Anda mengirim kartu boarding mereka. Tambahkan sentuhan manusiawi dengan penutup yang ramah.

Alur check-in

  1. Agen memberi tahu pengguna bahwa check-in untuk penerbangan mereka sudah dibuka.

    Pesan pembuka dengan detail check-in dan saran balasan

    Contoh kode

    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. Pengguna mengetuk balasan yang disarankan untuk melakukan check in.

    Saran untuk check in diketuk

  3. Agen menetapkan ekspektasi untuk proses check-in.

    Pesan menyatakan: Oke, bagus. Hanya ada 3 langkah untuk check in. Berikut langkah pertama untuk mengaktifkan akun Anda

    Contoh kode

    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. Agen meminta pengguna untuk menyetujui kebijakan keselamatan.

    Kartu multimedia dengan infografis kebijakan keselamatan dan saran untuk menyetujui atau tidak menyetujui. Teks di kartu tersebut berbunyi: Untuk membantu kami memastikan penerbangan yang aman, tinjau kebijakan keselamatan kami dan beri tahu kami bahwa Anda setuju.

    Contoh kode

    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. Pengguna mengetuk saran balasan untuk menyetujui.

    Saran untuk menyetujui diketuk

  6. Agen berterima kasih kepada pengguna dan memperkenalkan langkah berikutnya.

    Pesan menyatakan: Terima kasih, penumpang yang aman adalah penumpang yang bahagia! Berikut langkah selanjutnya

    Contoh kode

    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. Agen meminta pengguna untuk memilih tempat duduk.

    Kartu informasi dengan infografis peta tempat duduk. Teks di kartu bertuliskan: Saatnya duduk santai dan merasa nyaman! Kami telah merekomendasikan beberapa kursi berdasarkan penerbangan terakhir Anda. Pilih kursi yang Anda inginkan, atau beri tahu kami kursi pilihan Anda dengan mengetik nomornya. Saran di bawah kartu menampilkan beberapa opsi tempat duduk

    Contoh kode

    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. Pengguna mengetuk saran balasan untuk kursi yang dipilih.

    Saran untuk kursi 18A diketuk

  9. Agen mengonfirmasi pilihan pengguna.

    Isi pesan: Kursi 18A, Anda mendapatkannya.

    Contoh kode

    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. Agen meminta pengguna memilih makanan dalam penerbangan.

    Pesan menyatakan: Sekarang mari kita bahas makanan. Anda dapat melakukan praorder makanan dalam penerbangan. Apakah Anda akan senang dengan hidangan utama vegetarian atau hidangan utama ayam?

    Contoh kode

    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. Agen menampilkan opsi makanan.

    Carousel kartu multimedia menampilkan dua kartu: satu dengan gambar salad dan yang lain dengan gambar ayam panggang. Kedua kartu memiliki daftar bahan dan saran untuk memilih makanan tersebut

    Contoh kode

    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. Pengguna mengetuk saran balasan untuk makanan yang dipilih.

    Saran untuk memilih vegetarian diketuk.

  13. Agen mengonfirmasi pilihan pengguna.

    Pesan menyatakan: Vegetarian saja.

    Contoh kode

    const params = {
  messageText: `Vegetarian it is 💚`,
  msisdn: msisdn,
};  

let self = this;  

rbmApiHelper.sendMessage(params, function (response, err) {
  self.sendAskConfirmation(msisdn);  
});

  14. Agen merangkum detail check-in.

    Isi pesan: Berikut yang telah kami catat: Anda memilih kursi 18A dan makanan vegetarian. Harap konfirmasi pilihan Anda. Saran akan muncul di bawah pesan untuk mengonfirmasi detail, mengubah makanan, atau mengubah tempat duduk.

    Contoh kode

    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. Pengguna mengetuk balasan yang disarankan untuk mengonfirmasi detail check-in.

    Saran untuk mengonfirmasi detail diketuk.

  16. Agen mengumumkan bahwa check-in telah selesai.

    Pesan menyatakan: Hore! Anda kini sudah check in untuk penerbangan Anda. Berikut boarding pass Anda. Kami senang dapat segera menyambut Anda.

    Contoh kode

    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. Agen mengirimkan boarding pass pengguna.

    Kartu multimedia menampilkan gambar boarding pass dengan kode QR dan detail penerbangan. Teks di kartu bertuliskan: Kami akan terus mengabari Anda. Anda akan mendapatkan notifikasi jika detail penerbangan Anda berubah. Saran di kartu bertuliskan Tambahkan ke Google Wallet.

    Contoh kode

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

    Dalam kartu informasi horizontal ini, gambar tersebut adalah boarding pass yang berfungsi penuh dan disediakan oleh maskapai penerbangan. Gambar harus menampilkan semua informasi boarding yang diperlukan, termasuk kode batang yang dapat dipindai. Pengguna dapat mengetuk gambar untuk melihat dan memindai boarding pass mereka dari aplikasi Pesan Google.

    Saran Tambahkan ke Google Wallet muncul di kartu multimedia. Saran ini memicu tindakan Buka URL yang membuka aplikasi Google Wallet, tempat pengguna dapat menambahkan boarding pass ke wallet mereka. (Jika aplikasi tidak ada di perangkat pengguna, mereka akan diminta untuk menginstalnya.) Setelah kartu ditambahkan ke Google Wallet, pengguna akan otomatis menerima pengingat penerbangan dan info terbaru status jika detail penerbangan mereka berubah.

    Pengguna yang tidak menambahkan kartu mereka ke Google Wallet juga harus terus mendapatkan info terbaru. Memberi tahu pengguna tentang perubahan informasi boarding yang ditampilkan di kartu multimedia.

  18. Pengguna mengetuk tindakan yang disarankan untuk menambahkan kartu ke Google Wallet.

    Ikon Google Wallet dan saran untuk Menambahkan ke Google Wallet

  19. Aplikasi Google Wallet akan terbuka. Pengguna mengetuk tombol untuk menambahkan kartu ke wallet mereka.

    Aplikasi Wallet menampilkan boarding pass yang disederhanakan dan tombol yang bertuliskan Tambahkan.

  20. Pengguna mengetuk tombol untuk melihat kartu mereka.

    Tanda centang ditampilkan di atas kartu. Tombol Lihat di Google Wallet akan muncul.

  21. Boarding pass dengan kode QR ditampilkan.

    Boarding pass dengan semua detail penerbangan dan kode QR