הוספה של כרטיס עלייה למטוס ל-Google Wallet

אתם יכולים להשתמש ב-Google Messages עם RCS וב-Google Wallet כדי ליצור תהליך חלק של צ'ק-אין: המשתמש משלים את הצ'ק-אין, מקבל את כרטיס העלייה למטוס ומוסיף אותו ישירות ל-Google Wallet מאפליקציית Messages. אחרי שהכרטיס נוסף ל-Wallet, הוא מתעדכן אוטומטית אם פרטי הטיסה משתנים. המשתמשים יכולים לגשת במהירות לכרטיס עלייה למטוס עדכני ישירות מהטלפון.

במאמר הזה מתוארים השלבים הטכניים להטמעת כרטיס עלייה למטוס בתהליך של Google Wallet. בנוסף, יש בה דוגמה לשיחה עם טיפים לעיצוב חוויית צ'ק-אין חלקה ויעילה באמצעות RBM.

הטמעה טכנית

כדי להטמיע תהליך של כרטיס עלייה למטוס ב-Google Wallet, תצטרכו לעבוד עם Google Wallet API ועם RBM API.

דרישות מוקדמות

כדי להתחיל להשתמש ב-Google Wallet API, צריך לבצע את השלבים הנדרשים הבאים:

  1. נרשמים לחשבון מנפיק ב-Wallet כדי ליצור כרטיסים ולהפיץ אותם ל-Google Wallet.
  2. אם עדיין אין לכם פרויקט ב-Google Cloud‏ (GCP), אתם צריכים ליצור אחד.
  3. מפעילים את Google Wallet API.
  4. יוצרים חשבון שירות ומפתח כדי שתוכלו לשלוח קריאות ל-Google Wallet API.
  5. מאשרים את חשבון השירות במסוף של Google Pay ו-Wallet.
  6. משתמשים בתבנית כרטיס העלייה למטוס כדי ליצור כיתת Boarding חדשה.

Google Wallet API

כדי ליצור כרטיס עלייה למטוס וליצור כתובת URL להוספה ל-Google Wallet עבור RBM, פועלים לפי השלבים הבאים:

  1. מבצעים את האימותים וההרשאות הנדרשים.
  2. יוצרים אובייקט של כרטיס.
  3. מקבלים אסימון JWT (‏JSON Web Token) חתום. האורך המקסימלי של JWT מוצפן הוא 2,048 תווים.
  4. משתמשים ב-JWT כדי ליצור כתובת URL של 'הוספה ל-Google Wallet'.

RBM API

כדי לשלוח הצעה להוספה ל-Google Wallet מ-RBM, שולחים פעולה של פתיחת כתובת URL. במטען הייעודי (payload) של ההודעה:

  1. בשדה text, מזינים 'הוספה ל-Google Wallet'.
  2. בשדה url, מזינים את כתובת ה-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. הסוכן מסביר ללקוח מה צפוי בתהליך הצ'ק-אין.

    מצבי ההודעה: בסדר, מצוין. הצ'ק-אין מתבצע ב-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. הנציג שולח למשתמש את כרטיס העלייה למטוס.

    כרטיס עשיר שמציג תמונה של כרטיס עלייה למטוס עם קוד QR ופרטי הטיסה. הטקסט בכרטיס: נעדכן אותך! אם פרטי הטיסה ישתנו, תקבלו על כך הודעה. הכרטיס מציע להוסיף אותו ל-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.

    ההצעה הוספה ל-Google Wallet מופיעה בכרטיס המורחב. ההצעה הזו מפעילה פעולה של פתיחת כתובת URL שפותחת את אפליקציית Google Wallet, שבה המשתמש יכול להוסיף את כרטיס העלייה למטוס ל-Wallet. (אם האפליקציה לא נמצאת במכשיר של המשתמש, הוא יתבקש להתקין אותה). אחרי שהכרטיס מתווסף ל-Google Wallet, המשתמש מקבל באופן אוטומטי תזכורת לגבי הטיסה ועדכוני סטטוס אם יש שינויים בפרטי הטיסה.

    חשוב לעדכן גם את המשתמשים שלא מוסיפים את הכרטיס שלהם ל-Google Wallet. שליחת הודעה למשתמש לגבי שינויים בפרטי העלייה למטוס שמוצגים בכרטיס המתקדם.

  18. המשתמש מקיש על הצעה לפעולה כדי להוסיף את הכרטיס ל-Google Wallet.

    הסמל של Google Wallet והצעה להוספה ל-Google Wallet

  19. אפליקציית Google Wallet תיפתח. המשתמש מקיש על לחצן כדי להוסיף את הכרטיס ל-Wallet.

    באפליקציית Wallet מוצג כרטיס עלייה למטוס פשוט וכפתור עם הכיתוב 'הוספה'.

  20. המשתמש מקיש על לחצן כדי לראות את הכרטיס.

    סימן וי מוצג מעל הכרטיס. מופיע לחצן להצגה ב-Google Wallet.

  21. יוצג כרטיס העלייה למטוס עם קוד ה-QR.

    כרטיס עלייה למטוס עם כל פרטי הטיסה וקוד QR