將模組整合至您的頁面中

建立好最終的請求 URL 後，您便可以將其整合到您的網站中。首先，您需要選擇在銷售路徑的哪個環節顯示附加模組。接著，您將選擇如何顯示這些內容：作為頁面的疊加層，或是嵌入 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>

嵌入式治療

內嵌的附加模組提供整合式檢視，讓使用者能根據 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 才能正確顯示。

不確定您要整合的頁面上的「引薦來源政策」值是什麼嗎？以下是檢查的方法。

請使用任何網頁瀏覽器開啟將要整合嵌入式附件模組的頁面。
在頁面上一鍵右鍵，然後點選「檢視」以開啟開發者工具。
在工具面板中，切換至「網路」分頁，然後重新載入頁面。
在「網路」索引標籤中，搜尋該頁面的網域。在那裡，您會看到「來源政策」的頁面標題——例如： <meta name="referrer" content="origin-when-cross-origin" />

雙連接模組

若要整合雙重嵌入式連接模組，請在嵌入式連接模組請求中加入額外的embeddedId=krazyglue-embedded-wrapper-2 參數，並將<div> ID 更新為 krazyglue-embedded-wrapper-2。

注意：請勿在 JavaScript embeddedId 的彈出式附件模組請求中包含src 參數。

程式碼範例

<body>
/** Popup module script */
  <script>/xsell-pwa.js?partnerId=sas_hotel_popup...param=xyz&signature=bj01fgT85mUiRmzxxSufSmlGpiI"></script>
/** Embedded module script */
  <script>/xsell-pwa.js?partnerId=sas_hotel_embedded...param=xyz&embeddedId=krazyglue-embedded-wrapper-2 &signature=bj01fgT85mUiRmzxxSufSmlGpiI"></script>
  <div id="krazyglue-embedded-wrapper-2"></div>
/** The embedded attach module iframe will be loaded here. */
</body>