將模組整合至您的網頁中

當您建立好的最終請求網址後，即可將其整合至您的網站中。首先，您將選擇附加模組應出現在銷售路徑的哪個位置。接著您將選擇顯示方式：以頁面疊加層呈現，或嵌入 iframe 中。

您可以使用附加模組，為使用者提供多條業務線作為額外選項。標準設定允許您選擇主要業務類別 (以卡片格式顯示)，以及一個或多個次要業務類別。這些次要業務類別會整合於單一訊息中，用戶可點擊展開以查看更多選項。此外，若您的業務需求需要顯示多條主要業務線，可透過嵌入式模組實現此功能。

無論模組以何種方式或何時顯示，當使用者與結果互動時，其選擇項目都將在新分頁中開啟。

選擇流程位置

對於您啟用的每條購買路徑，您需要仔細思考讓使用者接觸附加模組的最佳位置。

Pre-purchase

在登陸頁面及 in-purchase 路徑中，靈活模組突顯了輔助性產品服務。它們亦可獨立於您的範本網站使用，作為預熱訊息以提升大眾對可用選項的認知。

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

嵌入式治療

嵌入式附加模組提供整合式檢視，讓使用者能根據網址在頁面中的位置，查看並與結果進行互動。

要設定此模組，您需將 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" />