将模块集成到您的页面中

创建完最终请求 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 在页面上的位置查看结果并与之交互。

要设置此模块，您需要将 Javascript 代码包含在 HTML 的 <body>标签内，并添加一个带有 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 的高度。集成该模块的页面必须设置引用策略值。 origin-when-cross-origin 显示正常。

不确定您要集成的页面上的引荐来源策略值是什么？以下是检查方法。

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