将模块集成到您的页面中

创建最终请求 URL后，您可以将其集成到您的网站中。首先，您需要选择附加模块在销售路径中出现的位置。然后，您将选择如何显示它们：作为页面上的覆盖或嵌入在 iframe 中。

您可以使用附加模块向用户显示多个业务线作为附加选项。标准设置允许您选择以卡片格式显示的主要业务线，以及在一条消息中显示一个或多个次要业务线，用户可以点击以获得更多选项。此外，如果您的业务需求需要多个主要业务线显示，您可以使用嵌入式模块来实现。

无论模块如何以及何时显示，当用户与结果交互时，他们的选择将在新选项卡中打开。

选择流动位置

对于您启用的每条购买路径，您都需要仔细考虑让用户遇到附加模块的正确位置。

Pre-purchase

在登陆页面和 in-purchase 路径中，灵活的模块突出显示辅助产品。它们也可以在没有链接到您的模板站点的情况下使用，作为提高对可用选项的认识的启动信息。

预订后

使用灵活模块或推荐模块（或两者）来建议额外的产品。当您覆盖一个灵活的模块时，它可以促使用户考虑从嵌入式推荐中进一步购买。

选择显示选项

您可以将附加模块设置为显示为覆盖层，将用户的焦点转移到新窗口，或嵌入页面本身。

覆盖处理

覆盖选项通过在网页上突出显示模块来提供模块的聚焦视图。用户可以通过单击关闭（X）按钮或单击模块外部来与模块交互或脱离。

要使用此模块，请将 Javascript 代码包含在 HTML 的 <body>标签内。

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

代码示例

<!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>

嵌入式治疗

嵌入式附加模块提供了集成视图，允许用户根据页面上的 URL 位置查看结果并进行交互。

要设置此模块，您需要在 HTML 的 <body>标签中包含 Javascript 代码，并添加 div元素id="krazyglue-embedded-wrapper"。

例如：

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

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

代码示例

<!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>

嵌入式模块的附加设置

您还需要检查引荐来源策略（点击来源的跟踪信息），因为该值设置了嵌入模块显示的 iframe 的高度。模块集成的页面必须设置 referrer 策略值 origin-when-cross-origin 才能正确显示。

不确定您要集成的页面上的引荐来源政策值是多少？检查方法如下。

1. 使用任何 Web 浏览器打开将集成嵌入式附加模块的页面。 2. 右键单击页面，然后单击“检查”以打开开发人员工具。 3. 在工具窗格中，转到“网络”选项卡，然后重新加载页面。 4. 在网络选项卡上，搜索页面域。在那里，您将看到引荐来源政策的页面标题 - 例如： <meta name="referrer" content="origin-when-cross-origin" />