Integrating the Braze Customer Engagement Platform into Your Hotel Booking Engine

By Geoffroy Rollat, Lead Partner Solutions Architect, Travel and Hospitality – AWS

Braze

As the travel industry’s recovery accelerates after two years of a global pandemic, travel and hospitality brands are competing for the acquisition and retention of customers like never before. In this context, artificial intelligence-powered digital user engagement solutions have become critical tools for brands to differentiate themselves.

Braze is a leading customer engagement platform that powers relevant and memorable experiences between consumers and the brands they love.

Built on Amazon Web Services (AWS), Braze helps bring modern stream processing, machine learning, and data-derived insight to brands’ customer engagement strategies. Braze is a launch partner of the AWS Travel and Hospitality Competency, and has achieved AWS Digital Customer Experience Competency and AWS Retail Competency as well.

By powering personalized, relevant, and timely digital interactions built on guest behavior data, Braze can help AWS lodging customers generate additional revenue and engage guests for the long run using personalization.

Once implemented on a booking engine, Braze also frees marketing teams from the constraints of interacting with the software development lifecycle. It allows them to create the right campaign for their guests at any time through many available channels, including web, mobile, and email.

In this post, I will demonstrate how a hotel customer can rapidly and simply transform their web booking engine into a digital user engagement solution offering a personalized booking experience including upsell capabilities. I will show how all of this can be accomplished in just days instead of weeks or months with a few clicks in the AWS Management Console and the Braze portal.

In our example, I will use a web booking engine built using Angular and the Braze JavaScript SDK. We’ll start by following the Braze SDK setup guide. Once installed as an npm package, we can import the Braze SDK in a use engagement service that will be injected to the various components to log use events to Braze.

Figure 1 – Braze integration with a hotel web booking engine.

The Hotel Booking Flow

Most hotel booking engines follow a standard flow built from the following steps:

• Geo-search
• Multi-availability request
• Single availability request
• Booking creation
• Booking modification
• Booking confirmation
• Booking ignore
• Booking cancellation

Additional stateful events, such as regrets and denials (materializing the loss of opportunity due to guest abandonment or product availability restrictions), are also common among booking engine features.

Figure 2 – The hotel booking flow.

Let’s detail some of the steps you can see in the illustration above.

Step 1: Welcome Message

Here, we create the user session (and initiate a user session) and display a welcome message using Braze’s capability to create in-app messages.

At this stage, the user is often unauthenticated. Whether or not the user is authenticated (from a pre-existing session on the booking engine, for example), it’s possible to use Braze to personalize the welcome messages based on each user’s behavior. The difference between the two messages is illustrated below.

Figure 3 – Personalization of welcome message example.

These welcome messages can be rendered in a variety of sizes (slide up, modal, full screen) and can function as a dynamic user interface (UI) widget. In this example, the widget allows the user to swipe right and left in order to select destinations of interest.

This functionality allows the lodging provider to gather personalized interest data about the user to feed an artificial intelligence-based recommendation engine leveraging Amazon Personalize.

The most interesting aspect of this step is that, apart from the initial integration of Braze (which we will explore in the later sections of this post), no user interface code had to be deployed to the booking engine to create this widget. It is entirely configured from the Braze portal.

This frees marketing professionals from the constraints of interacting with the booking engine software development lifecycle and allows them to launch marketing campaign autonomously.

Figure 4 – No-code creation of personalized interactive welcome widget with Braze.

Steps 2,3, and 4: Booking Creation

Once the initial welcome message is dismissed, the user will start the booking flow by searching for a destination (geo-search). A choice of multiple bookable hotel properties are then returned, in accordance with the booking engine radius search constraints (multi-availability).

The user then selects a property and is prompted with all products available for this property for the selected dates (single availability). Finally, the user selects a product and initiates the booking (create booking) in the underlying reservation system.

During each of these steps, all user actions on the booking engine UI are streamed to the Braze platform. This behavior is demonstrated in the following screenshot from our demo web browser. The Braze SDK makes it easy to include any business data available during the booking session (property, rooms and non-room inventory, number of nights, loyalty profile data) into traveler engagement campaigns.

Figure 5 – Example of message sent by Braze from the web booking engine.

Then, a rich set of rules can be set up using the Braze portal to trigger sophisticated personalized campaigns, as described in the Braze documentation. Below is an example of the rules set created for the “Ignore” campaign described later on in this post.

Figure 6 – Example of Braze campaign configuration rules.

Campaigns allow Braze customers to engage with their users with a single message step using any supported messaging channel. Most multi-step user journeys are better created as Canvases, as illustrated below.

Figure 7 – Braze Canva example.

Here’s an example of an event sent to Braze for geo-search and multi-availability events. This event contains details about the user details device, session ID, timestamps for each user action, and custom parameters specific to our booking engine (hotel, location, start date).

Note that events are batched by the Braze SDK into one message.

{
    "respond_with": {
        "config": {
            "config_time": 168392837
        }
    },
    "events": [
        {
            "name": "ce",
            "time": 168392837.751,
            "data": {
                "n": "geosearch",
                "p": {
                    "location": "New York, NY, USA"
                }
            },
            "session_id": "hd9238hd-fjidf3-fhsfd9-jd83-sdd83"
        },
        {
            "name": "ce",
            "time": 872638236.187,
            "data": {
                "n": "multi_avail",
                "p": {
                    "hotels": "938203983,98723987",
                    "location": "New York, NY, USA",
                    "startDate": "20221124",
                    "nNights": 2,
                    "nRooms": 1,
                    "nGuests": 1
                }
            },
            "session_id": "uqwfc983-dskjhf-kjs83-9dh38-fuhs9833d"
        }
    ],
    "device": {
        "browser": "Chrome",
        "browser_version": "95",
        "os_version": "Mac",
        "resolution": "1920x1080",
        "locale": "en-gb",
        "time_zone": "America/New_York",
        "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36"
    },
    "api_key": "************************",
    "time": skdfhewrfh,
    "sdk_version": "3.0.1",
    "device_id": "2938dew-dfihwfd-fsij39-3209f-3209jf0jfe"
}

Step 5: Booking Ignore

To demonstrate the ability of the Braze platform to help lodging providers increase their booking engine conversion rate, we add a step in the booking flow where the user abandons the reservation.

The status of the booking record created is set to “Ignored” and an event is sent to Braze when the user exits the booking engine. As for booking creation, when a user clicks on the “Ignore” button and choses to abandon the reservation, we send a “Regret” event to Braze.

The regret event indicates the unwillingness of the guest to complete the booking and provides all of the details associated with the use context—specific hotel, product chosen (room types, add-ons), dates, and guest information.

This allows Braze to trigger a personalized email with promotional content (such as a discount code for the exact date and property abandoned) to increase the probability the guest will reconsider and convert at a later time.

In our demo, the following email is sent to the guest:

Figure 8 – Example of personalized email send by Braze.

The “Book Now” link will take the guest directly to the availability search results page for the date and property of the initial booking. In this demo, we also offer additional promotional content associated with a potential upsell.

The lodging provider marketing team can make this campaign as engaging and actionable as possible by leveraging the personalization and templating capabilities offered in the Braze portal.

Step 6: Booking Engine Exit Intent

When the user exits the application, an “exit intent” event is sent to the Braze platform, triggering a dedicated campaign aimed at offering the guest the ability to sign up for price alerts (such as messages sent when the price of a specific location drops below a certain threshold).

In this demo, exit intent detection leverages this open source library as suggested in the Braze documentation.

Figure 9 – Price alert subscription in-app message generated by Braze on user exit.

By clicking on the “Sign up for price Alerts” button, the guest agrees to receive automated updates on hotel prices that will be delivered to the using a dedicated Braze campaign.

Under the Hood

In this section, I will give you a few code examples to help integrate Braze into your booking engine. Note that while this code was appropriate for the demo, it may need to be updated for your specific implementation.

In our experience building this travel and hospitality demo, integrating the Braze SDK into a single page application (like Angular, Vuejs, or React) is effortless. It requires no expert knowledge of digital customer engagement and no update to the booking engine travel-related logic, and can therefore be achieved quickly by a somewhat junior frontend developer with little risk of side effects. This makes integrating the Braze SDK a high value-for-money project for the booking engine development team to prioritize.

Braze provides predefined methods for setting the following user attributes within the ab.User class:

• First name
• Last name
• Biographical strings
• Country
• Date of birth
• Email
• Gender
• Home city
• Phone number

In addition to the predefined user attribute methods, Braze also provides custom attributes to track data from your applications. You can read more about data types in the Braze documentation.

User Engagement Service

In this demo platform, we abstract the Braze service into a generic user engagement service. This allows you to implement one set of hooks at different stages of the booking flow and to use multiple complementary customer data platform (CDP) and digital user engagement solutions, such as Braze, Amazon Pinpoint, and Tealium.

There are several reasons why you might want to use multiple providers to gather booking flow events. For one thing, Braze does not recommend using their SDK to gather clickstream events for use cases such as analytics. For these use cases, we use the Amazon Pinpoint SDK, which has native stream ingestion integration with Amazon Kinesis and the rest of the AWS analytics services.

The Amazon Pinpoint SDK allows you to create a fully managed, serverless, and scalable clickstream analytics pipeline on AWS. Braze can be integrated directly to the booking engine as illustrated in this demo or through a CDP solution like Tealium.

Below, I have highlighted a few examples of multi-providers implementations. Some functions are relevant for multiple vendors and some are only relevant for one.

Here, you can define the appropriate logic to abstract the implementation differences so developers who build the booking engine logic can trigger user engagement behaviors using a unique simple set of functions.

    //Generic init function for all providers
    init(userId: string) {
        this.initBraze(userId)
    }

    //This method logs an event to all providers
    logEvent(eventName: string, params: any) {
        this.logEventBraze(eventName, params);
        this.logEventPinpoint(eventName, params);
        this.logTealiumEvent(eventName, params)
    }


    //This method is used when the user identifies themselves later in the booking flow
    // for example by entering a loyalty number
    logUserIn(userId: string) {
        this.logUserInBraze(userId);
    }
    
   

    // Braze has a special operation for purchase. This allows the Braze platform to 
    // provide features such as overall guest revenue calculation or conversion rate
    // calculation. It has a dedicated function called at booking confirmation
    // time to materialize the purchase. This implementation is detailed further in this blog as it 
    // requires careful handling of booking price data to perform accurately.
    logBooking(productId, price: number, currency: string, quantity: number) {
        this.logBookingBraze(productId, price, currency, quantity);
    }

    //This function logs the exit intent as described in the previous section
    logExitIntent(params?: any) {
        this.logExitIntentBraze(params)
    }

Braze-Specific Implementation

Below is an example of implementation of the various function for Braze. Note that we took a few shortcuts for this demo. For example, the best practice is to only send the user data that has changed to Braze (Loyalty points, for example, change frequently while email address does not).

In this demo, we send all data without assessing whether this data has changed or not. This is a trade-off that we made to be able to deliver this proof-of-value faster but that should be handled differently in the production code.

    //This method is called on app loading:
    //1- It starts a braze session 
    //2- It configures the detailed login (could be parameterized) 
    //3- It activates in-app-messaging
    //4-It registers to web push
    initBraze(userId: string) {
        console.log("[BRAZE] Starting session")
        appboy.initialize(this._configuration.BRAZE_KEY, {
            baseUrl: this._configuration.BRAZE_SDK_ENDPOINT
        });
        if (userId) {
            console.log("[BRAZE] Setting user ID to " + userId)
            appboy.changeUser(userId);
        }
        //https://github.com/Appboy/appboy-web-sdk#getting-started
        console.log("[BRAZE] automaticallyShowNewInAppMessages")
        appboy.display.automaticallyShowNewInAppMessages();
        // start (or continue) a session
        console.log("[BRAZE] Open Session")
        appboy.openSession();
    }
    /***************************
     * Braze User Engagement API
     ****************************/
    //this method adds the user information to braze. While we took a shortcut for this demo, the best practice is to only send the data that has changed to Braze (Loyalty points, for example, change frequently while email address does not)
    addUserInfoBraze(userProfile) {
        appboy.getUser().setFirstName(userProfile.firstName);
        appboy.getUser().setLastName(userProfile.lastName);
        appboy.getUser().setEmail(userProfile.email);
        appboy.getUser().setCustomUserAttribute("status", userProfile.status);
        appboy.getUser().setCustomUserAttribute("points", userProfile.points);
    }

    //This method logs a custom event to the braze platform
    logEventBraze(eventName: string, params: any) {
        appboy.logCustomEvent(eventName, params);
    }

    //This method logs a Booking as a purchase in the braze platform
    logBookingBraze(productId, price: number, currency: string, quantity: number) {
        appboy.logPurchase(productId, price, currency, quantity);
    }

    //This method logs an exit intent event to the braze platform
    logExitIntentBraze(params?: any) {
        console.log("Logging Exit intent to Braze")
        appboy.logCustomEvent('exit intent', params);
    }

    //This method logs the user in into braze (to be used when the user identifies themselves as a loyalty member)
    logUserInBraze(userId: string) {
        if (userId) {
            appboy.changeUser(userId);
        }
    }

Logging Custom Events

Custom events are actions taken by your users; they are best suited for tracking high-value user interactions with your application.

Logging a custom event can trigger any number of follow-up campaigns with configurable delays, and enables the segmentation filters around the recency and frequency of that event. Learn more about data collection best practices in the Braze documentation.

Custom events are logged using an event name and set of customer parameters that are relevant for these events. In this demo, we log all available parameters such as start date, number of nights, number of rooms, number of guests, and other values.

This will be used by Braze to personalize and contextualize messaging resulting from campaigns triggered by these events.

   public ACTION_TYPE_MULTI: string = "multi_avail";
 
this.userEngSvc.logEventBraze(ACTION_TYPE_MULTI, {
        startDate: this.startDate.value.toISOString(),
        nNights: this.numNights.value,
        nRooms: this.numRooms.value,
        nGuests: this.numGuests.value,
        fullText: this.fullTextSearch.value
      })

The following screenshot of an email sent by Braze to the guest illustrates how these custom event attributes are used in customer engagement messages. They provide relevant information to the guest and allow them to take actions in the context of their booking (like completing a booking flow already started).

Figure 10 – Braze campaign message built with custom event attributes.

Lodging Booking Event

Logging purchase events is a special case, and Braze has a special operation for purchases. This allows the Braze platform to calculate insights such as lifetime guest revenue or conversion rate. It has a dedicated function at booking called confirmation time to materialize the purchase.

Travel and hospitality booking and retail purchase are also different in several aspects. First, contrary to most retail purchases, a booking can be updated multiple times, resulting in multiple price changes. If Braze sends the full booking price after each change, it will result in incorrect total revenue.

The platform needs to send to Braze the difference between the previous booking price and the post-update price. This feature must be implemented on the backend side.

For this demo, we rely on AWS reference architecture for lodging booking system which recommends using Amazon Quantum Ledger Database (QLDB) for storing booking records in a way that keeps track of every change in the record.

This makes the implementation fairly straightforward, which is one of several reasons that QLDB is a great tool for serverless booking system on AWS.

Now that the price difference between the previous version (or image) of the booking and the new version is available on the booking record, we call the logBookingBraze functions one time for each product and send the price change associated to this product.

This allows the Braze platform to appropriately complete overall revenue indicators, which then can be used to trigger personalized revenue-driving campaigns.

  logBookingToUserEngagement(booking) {
    booking.priceDiff.forEach(diffItem => {
      this.userEngSvc.logBookingBraze(diffItem.productCode, diffItem.priceChange, diffItem.currency, 1)
    })
  }

Streaming Engagement Data Using Braze Currents

One out of six conversations AWS has with travel and hospitality customers is a data conversation. To support AWS customers in what is clearly one of their top priorities, AWS provides a reference architecture for a travel and hospitality Data Platform for Lodging.

This reference architecture outlines key principles of what AWS considers the best practices for lodging customers for data projects. In this section, I will show how the Braze Currents feature allows lodging providers to stream user engagement data to data platforms.

Braze Currents and Amazon Analytics Service

Braze Currents is a feature that allows users to stream engagement data to their AWS account. Setting up Braze Currents can easily be done from the Braze portal and only requires an Amazon Simple Storage Service (Amazon S3) bucket and an AWS Identity and Access Management (IAM) role allowing Braze to send data to your AWS account. The detailed procedure to set up Braze Currents is detailed in the Braze documentation.

Once ingested in Amazon S3, AWS Glue Crawlers can infer the data schema and create an Amazon Athena table. The data can be accessed from Amazon QuickSight, as illustrated in the dashboard below. Note that this entire analytics stack is serverless and does not require any code to be written.

Braze offers rich reporting features directly available from the Braze portal. In addition, Braze Currents allows AWS customers who have or plan to build a data lake on AWS to gather digital customer engagement data in their own analytics platform.

This feature allows Braze customer to complement Braze analytics dashboard with their own dashboard and to combine user engagement data to high level business KPIs such as look-to-book ratio or RevPar. This allows lodging brands to better measure the business impact of their marketing campaigns.

Here is an example of such dashboard built for our demo.

Figure 11 – Analytics dashboard in Amazon QuickSight using Braze Currents.

Conclusion

In this post, I explained how to integrate Braze into a hotel booking engine in order to power personalized digital user engagement campaigns.

With in-app messages, email, web, and mobile push triggered through JavaScript SDK, Rest API, or event geofence events, Braze gives lodging marketing professionals the power to send contextually relevant, cross-channel campaigns to the right guest at the right time.

Braze allows marketing departments to free themselves from the constraints of a booking channel’s engineering lifecycle. After the one-off integration described in this post, you can reach prospective guests with personalized messaging at any step of the booking flow. This allows you to have a direct impact on the look-to-book ratio and increase overall booking revenue through cross-sells and upsells.

Note that for the demo illustrated this post, our AWS solution architect was able to build the integration with Braze in just two days and few lines of code. Most of the work was completed using the AWS console and the Braze portal. Our experience building this demo demonstrates that with very few developer-hours invested, customers can deliver, in days, powerful guest engagement features effectively leveraging the Braze + AWS integration to drive revenue growth and customer engagement.

Get started with Braze and reach out to your AWS account team for a deeper look at how the Braze + AWS collaboration can help travel and hospitality customers build transformative digital customer engagement experiences.

.

.

Braze – AWS Partner Spotlight

Braze is an AWS Competency Partner and leading customer engagement platform that powers relevant and memorable experiences between consumers and the brands they love.

Contact Braze | Partner Overview

*Already worked with Braze? Rate the Partner

*To review an AWS Partner, you must be a customer that has worked with them directly on a project.