Chat with Hotelier, when you make a booking on Goibibo & MakeMyTrip

Praneet is a frequent traveller. He is planning to celebrate new year in Goa so he booked a hotel near Baga beach. Booking was successful but Praneet has some queries regarding hotel services and location. He is wondering whether he would be allowed for an early checkin and whether he could be picked from the airport. He plans to invite his friends to his stay so he needs to know whether visitors are allowed in hotel or if some arrangements can be made.

Lakshimanth owns a hotel in Goa. For the new year celebration, he has arranged a special dinner for his customers at very nominal rate. He is looking for a convenient way to advertise this to his customers as soon as they make a booking. He wants to get few advance bookings for this special dinner to make his preparation better.

Above stories of Praneet and Lakshimanth are not unique. This is a common situation for most of the customers as well as hoteliers. If Praneet made a successful booking then he can talk to customer support executive or directly call hotelier to resolve his queries. For Lakshimanth, post booking he can reach out to his customers over email or phone to advertise about his special dinner.

But what if Praneet wanted to get his queries resolved before he made any booking? Even after successful booking, can the conversation between two parties be made more smooth?

We at Go-MMT continuously strive to deliver best experience to our customers as well as hotel partners. In an effort to provide a delightful experience to above scenario, we have introduced a new feature — “Chat with Host” for our customers and “Guest Messages” for our hotel partners. This feature is available for both pre-booking as well as post-booking.

Chat with Hoteliers

We started showing chat option on Booking confirmation page for pre-booking and on My Trips page for post-booking. Go-MMT receives thousand of queries per month related to booking and hotel. Most of the queries are regarding early check-in, amenities related, pay at hotel related, hotel policies, late check-out etc. Beside queries, customers also seek for some requests like additional meal for children, extra bed, room with a specific view, special assistance (baby sitter, wheel chair) etc. With this new feature released, all of such customer pain points would be resolved in a few exchange of messages.

Covid Effect & Alternative Accommodation

Alternative accommodation segment (we internally call it Alt-Acco) includes villas, apartments, homestays, guesthouses and hostels, among others. Both Goibibo & MakeMyTrip host this segment as we want to empower our customers with more and more choices so that they always find the best fit. Alternative accommodations offer quality yet economical, offbeat options. We believe that in post Covid era this segment is going to grow more popular and we are continuously investing in this segment. Feature like Pre-booking chat is crucial for these properties owners.

Guest Messages

Chat can be initiated in both ways, either by customer or by hotelier. As soon as a booking is confirmed by hotelier, an entry starts appearing under bookings tab where he can initiate a new conversation. Hotelier can see and reply chats under Guest Messages section.

We have also empowered hoteliers to schedule automatic messages e.g. hotelier can send a welcome message or house policy rules automatically to all customers a day before check-in. He can then automatically send Wi-Fi details to customer just after check-in.
We are sure that this feature will be very handy in responding to general queries raised by customers.

Under the hood

Execution of this project involved multiple teams (design + product + tech) on both the sides- B2C/Funnels (Goibibo & MakeMyTrip) meant for customers as well as B2B (ingoMMT) meant for hoteliers. At the centre of this project lies the Cloud Firestore- a flexible & scalable NoSql database for mobile, web, and server development from Firebase and Google Cloud. We have leveraged its realtime listeners and expressive querying to power our chat platform.

Our ingoMMT app is built using react-native and below I am summarising the Frontend challenges that we encountered while developing the Guest Chat application.

Developing a chat application in react-native

Building a simple chat application using Firebase is really quick and easy however building a production ready app requires some effort. These are the challenges that we faced in react-native along with the proposed solution that we used-

1. Pagination of Chat messages

To show real time chat messages you’ll have to attach listener to the collection with onSnapshot() method. Also chat messages can grow huge so best practice would be to paginate the documents i.e. fetch more messages in batch when user scrolls to top. One approach could be combining onSnapshot() & limit() methods-

const [chatsLimit, setChatsLimit] = useState(8);

const unsubscribe = getGuestChatMessagesQuery(sessionId)
  .orderBy('time', 'desc')
  .limit(chatsLimit)
  .onSnapshot(querySnapshot => {}, error => {})

Here you can keep increasing chatsLimit state variable when users hits the top of scrollbar. The downside of this approach is that size of snapshot listener will keep increasing which is not good for performance. Best way to get paginated data would be using query cursor something like this-

getGuestChatMessagesQuery(sessionId)
  .orderBy('time', 'desc')
  .startAfter(startAfterTime)
  .limit(MESSAGE_LIMIT)
  .get()
  .then(querySnapshot => {})

However this will be one time operation and we still need a listener to monitor new upcoming messages. What we used is combination of these two approaches. We attached listener to last few messages and kept on retrieving others using cursor. You can check our solution on this StackOverflow thread. Note that if you are just interested in monitoring new messages then you could listen for only one recent message. In our case we check for messages delivery status as well so we listen for last few messages.

2. Showing most recent chats first

We are using FlatListto show our chat messages. To show recent messages first, you can retrieve it based on time orderBy('time', 'desc') and then reverse it using Array.reverse(). But with this approach you’ll have to manually scroll the FlatList to the bottom on every list update. Instead of this we used inverted props of FlatList-

render () {
  <FlatList
    contentContainerStyle={GenericStyles.p16}
    inverted
    data={[...recentChats, ...oldChats]}
    renderItem={renderFlatListItem}
    keyExtractor={item => item.messageId}
    onEndReached={onChatListEndReached}
    onEndReachedThreshold={0.2}
    ListFooterComponent={moreChats ? <ActivityIndicator /> : null}
  />
}

3. Auto expandable chat input box

We wanted our message reply text input to auto expand based on content. One solution that we tried is passing dynamic value to numberOfLines prop to a multiline TextInput-

const getNoOfLines = () => {
  return inputMessage.split('\n').length;
};

render() {
  <TextInput
    multiline
    numberOfLines={getNoOfLines()}
    onChangeText={onMessageInputChange}
    value={inputMessage}
  />
}

This worked well when user manually typed Enter key while typing a message but it didn’t work for overflow message. We finally used onContentSizeChange callback to dynamically adjust the height of Text Input-

const [textInputHeight, setTextInputHeight] = useState(20);

const updateSize = height => {
  setTextInputHeight(height);
};

const heightStyle = { height: textInputHeight };

render() {
  <TextInput
    style={heightStyle}
    multiline
    onContentSizeChange={e => updateSize(e.nativeEvent.contentSize.height)}
    onChangeText={onMessageInputChange}
    value={inputMessage}
  />
}

4. Performing Firestore ineqality query on two different fields

For our hotel partners, we have provided them search & filter messages functionality. Filters will get applied on top of search. During one such filter we had to apply two inequality Firestore operators on two different fields.

let query = getGuestChatSessionsQuery();

// search by guest name
query = query
  .where('nameOfCustomer', '>=', searchText)
  .where('nameOfCustomer', '<=', searchText + '\uf8ff');

// unread messages filter
query = query
  .where('unreadCount', '>', 0)
  .orderBy('unreadCount');

However as of now Firestore has this limitation that you cannot apply inequality operators on two different fields. To overcome this we applied search in query and took care of unread messages filter in client side (common sense :p).

5. Search by Prefix in Firestore

We have provided our hotel partners “Search by Guest name” functionality. So if hotelier types Va , It should match with customer names that start with this prefix e.g. Varun Vaibhav Varun Kumar etc. For this we used >= and <= operators.

query = query
  .where('nameOfCustomer', '>=', searchText)
  .where('nameOfCustomer', '<=', searchText + '\uf8ff');

Here character\uf8ff is a very high code point in the Unicode range. Because it is after most regular characters in Unicode, the query matches all values that start with searchText
However this will be a case sensitive search due to exact match. To overcome we can have two approaches-

• Always store nameOfCustomer field in lowercase in Firestore and manually convert searchText to lowercase before executing query.
• If storing nameOfCustomer in lowercase affects your business logic, then create a new field in Firestore nameOfCustomerLower and store lowercase value to it. Use this new field for query.

Impact

We already had Guest Chat feature in our ingoMMT app rolled out last year. This time we added Pre-Booking Chat feature along with some major revamp to existing features. Pre to Post booking conversions and overall satisfaction of our customers as well as hotel partners are some of our key Metrics. Seeing the vaccination started & number of Covid cases coming down, we can say that Covid-19 is fading and travel is bouncing back. We have already started getting 70–80% of Pre-Covid traffic on our platform and this feature is our preparation to future.

Conclusion

We have plan to add Auto Suggest & Broadcasting feature in coming releases. Along with these we are also looking for some enhancements like Chat Analytics, Quick Links, Location sharing, Request to Book etc. We are confident that these new features will further ease hotelier’s business and take Guest Messages feature to next level.

Chat with Hotelier, when you make a booking on Goibibo & MakeMyTrip was originally published in Backstage on Medium, where people are continuing the conversation by highlighting and responding to this story.