Integrate modules into your pages

Once you’ve created your final request URL, you’ll integrate it into your site. First, you’ll choose where in the sales path your attach modules should appear. Then you’ll choose how to display them: as an overlay on the page or embedded in an iframe.

You can use attach modules to display more than one line of business as additional options for your users. The standard setup lets you choose a primary line of business, which displays in a card format, and one or more secondary lines of business in a single message they can click through for more options. In addition, if your business needs require more than one primary line of business display, you can do that with embedded modules.

Regardless of how and when the module is displayed, when the user interacts with the results, their selection will open in a new tab.

Choose a flow location

For each purchase path you enable, you’ll want to think through where the right place is for your users to encounter the attach modules.

Pre-purchase

On landing pages and within the in-purchase path, flexible modules highlight ancillary product offerings. They can also be used without a link to your template site, as a priming message to raise awareness of the available options.

Post-purchase

Use either flexible or recommendations modules—or both—to suggest additional product offerings. When you overlay a flexible module, it can prime the user to consider further purchase from embedded recommendations.

Pick a display option

You can set your attach modules to display as an overlay that shifts the user’s focus to a new window, or embedded within the page itself.

Overlay treatment

The overlay option provides a focused view of the module by highlighting it over the webpage. The user can interact with the module or disengage by either clicking the close (X) button or clicking outside of the module.

To use this module, include the Javascript code within the <body> tag of the HTML.

Overlaid screen with the heading 'Thanks! You've booked your hotel. Do you need another room too?' showing 3 options for additional rooms

Code example

<!DOCTYPE html>
<html>
<head>
    <title>Booking Confirmation Page</title>    
</head>
<body>

    <h1>Booking Confirmation Page</h1>
    <p>Congratulations on your purchase</p>

    <#-- The overlay attach module Javascript code. -->
    <script src="//xsell.expedia.com/xsell-pwa.js?partnerId=partner123&outboundStartDateTime=2023-01-02T11%3A55%3A00%2B08%3A00&outboundEndDateTime=2023-01-02T12%3A55%3A00%2B08%3A00&returnStartDateTime=2023-01-12T22%3A30%3A00%2B08%3A00&returnEndDateTime=2023-01-12T22%3A30%3A00%2B08%3A00&destinationTla=LAX&numOfAdults=2&locale=en-US&currencyCode=USD&bookingDateTime=2022-11-12T12%3A32%3A15%2B08%3A00&bookingId=123ABC&bookingStatus=confirmed&signature=bj01fgT85mUiRmzxxSufSmlGpiI">
    </script>

</body>
</html>

Embedded treatment

An embedded attach module provides an integrated view, allowing the user to see and interact with the results based on the URL’s position on the page.

To set up this module, you’ll include the Javascript code within the <body> tag of the HTML and add a div element.

Page showing itinerary confirmation, then an embedded block with the title 'Great news! You qualify for special hotel deals because you booked a flight' and 3 hotel deal options

Code example

<!DOCTYPE html>
<html>
<head>
    <title>Booking confirmation page</title>    
</head>
<body>
    <h1>Booking confirmation page</h1>
    <p>Congratulations on your purchase</p>

    <#-- The embedded attach module Javascript code. -->
    <script src="//xsell.expedia.com/xsell-pwa.js?partnerId=partner123&outboundStartDateTime=2022-01-02T11%3A55%3A00%2B08%3A00&outboundEndDateTime=2014-01-02T12%3A55%3A00%2B08%3A00&returnStartDateTime=2014-01-12T22%3A30%3A00%2B08%3A00&returnEndDateTime=2014-01-12T22%3A30%3A00%2B08%3A00&destinationTla=LAX&numOfAdults=2&locale=en-US&currencyCode=USD&bookingDateTime=2013-11-12T12%3A32%3A15%2B08%3A00&bookingId=123ABC&bookingStatus=confirmed&signature=bj01fgT85mUiRmzxxSufSmlGpiI">
    </script>
   
    <div>
       <p>Information about your flight</p>
    </div>
    <div>
       <p>Booking details</p>
    </div>

    <div id="krazyglue-embedded-wrapper">
       <#-- The first embedded attach module iframe will be loaded here. -->
    </div>
</body>
</html>

Additional settings for embedded modules

You’ll also need to check the referrer policy—tracking information of where the click came from—because that value sets the height of the iframe the embedded module displays in. The page the module is integrated on must be set with the referrer policy value origin-when-cross-origin to display correctly.

Not sure what the referrer policy value is on the page you’re integrating to? Here’s how to check.

Open the page where the embedded attach module will be integrated using any web browser.
Right click on the page and click Inspect to open the developer tools.
In the tools pane, go to the Network tab, then reload the page.
On the Network tab, search for the page domain. There, you’ll see page headers for the referrer policy—for example: <meta name="referrer" content="origin-when-cross-origin" />