אתם יכולים להשתמש ב-Messages של Google עם RCS ו-Google Wallet כדי לתכנן תהליך צ'ק-אין פשוט: המשתמש משלים את הצ'ק-אין, מקבל את כרטיס העלייה למטוס ומוסיף אותו ישירות ל-Google Wallet מאפליקציית Messages. אחרי ששומרים את הארנק, הכרטיס מתעדכן באופן אוטומטי אם פרטי הטיסה משתנים. למשתמשים יש גישה מהירה לכרטיס עלייה למטוס ישירות לטלפון.
במסמך הזה מוסברים השלבים הטכניים להטמעת כרטיס עלייה למטוס בתהליך של Google Wallet. הוא כולל גם שיחה לדוגמה עם טיפים לעיצוב, לחוויית צ'ק-אין חלקה ויעילה עם RBM.
הטמעה טכנית
כדי להטמיע כרטיס עלייה למטוס בתהליך Google Wallet, עליכם לעבוד עם Google Wallet API ו-RBM API.
דרישות מוקדמות
כדי להתחיל להשתמש ב-Google Wallet API, יש לפעול לפי השלבים הנדרשים:
- הרשמה לחשבון של מנפיק הארנק, כך שתוכלו ליצור ולהפיץ כרטיסים לארנק Google.
- יוצרים פרויקט Google Cloud Platform (GCP) אם עוד לא יצרתם אחד.
- מפעילים את Google Wallet API.
- יוצרים חשבון שירות ומפתח כדי להתקשר ל-Google Wallet API.
- נותנים הרשאה לחשבון השירות ב-Google Pay וב-Wallet Console.
- אפשר להשתמש בתבנית של כרטיס העלייה למטוס כדי ליצור קורס עלייה למטוס חדש.
API של Google Wallet
כדי ליצור כרטיס עלייה למטוס וליצור כתובת URL של הוספה ל-Google Wallet ל-RBM, פועלים לפי השלבים האלה:
- מבצעים את הרשאות האימות והאימות הנחוצים.
- יצירת אובייקט כרטיסים.
- קבלת אסימון אינטרנט חתום מסוג JSON (JWT). האורך המקסימלי של JWT מקודד הוא 2,048 תווים.
- להשתמש ב-JWT כדי ליצור כתובת URL ל-Google Wallet.
API ל-RBM
כדי לשלוח הצעה ל-Google Wallet מ-RBM, שולחים פעולה לגבי כתובת ה-URL הפתוחה. במטען הייעודי (payload) של שליחת ההודעות:
- עבור
text, יש להזין את האפשרות 'הוספה ל-Google Wallet'. - עבור
url, יש להזין את כתובת ה-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); });בכרטיס האופקי האופקי, התמונה היא כרטיס עלייה למטוס שפועל בצורה מלאה. התמונה צריכה להציג את כל המידע הנדרש לגבי העלייה למטוס, כולל ברקוד שניתן לסריקה. המשתמשים יכולים פשוט להקיש על התמונה כדי להציג ולסרוק את כרטיס העלייה למטוס מאפליקציית Messages של Google.
הצעה להוספה ל-Google Wallet מופיעה בכרטיס העשיר. ההצעה הזו מפעילה פעולה של כתובת URL פתוחה שפותחת את אפליקציית Google Wallet, שבה המשתמש יכול להוסיף בקלות את כרטיס העלייה למטוס לארנק שלו. (אם האפליקציה לא נמצאת במכשיר של המשתמש, הוא יתבקש להתקין אותה). לאחר הוספת הכרטיס ל-Google Wallet, המשתמש יקבל באופן אוטומטי תזכורת לטיסה ועדכוני סטטוס אם פרטי הטיסה ישתנו.
כמו כן, חשוב לוודא שהמשתמשים לא מוסיפים את הכרטיס שלהם ל-Google Wallet. הודעה למשתמשים לגבי שינויים בפרטי העלייה למטוס שמוצגים בכרטיס העשיר.
המשתמש מקיש על הצעה לפעולה להוספת הכרטיס ל-Google Wallet.
אפליקציית Google Wallet תיפתח. המשתמש מקיש על לחצן כדי להוסיף את הכרטיס לארנק.
המשתמש מקיש על לחצן כדי להציג את הכרטיס שלו.
כרטיס העלייה למטוס עם קוד ה-QR מוצג.
