將模組整合至您的頁面中

建立好您的最終請求網址後，即可將其整合至您的網站中。首先，您需要選擇在銷售路徑的哪個位置顯示附加模組。接著，您將選擇顯示方式：作為頁面的覆蓋層，或是嵌入 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 才能正確顯示。

不確定您正在整合的頁面上的 Referrer Policy 值是什麼嗎？以下是檢查的方法。

請使用任何網頁瀏覽器開啟將要整合嵌入式附件模組的頁面。
在頁面右鍵點擊，然後點選「檢視」以開啟開發者工具。
在工具面板中，前往「網路」分頁，然後重新載入頁面。
在「網路」索引標籤中，搜尋該頁面的網域。在那裡，您會看到引薦來源政策的頁首標籤——例如： <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>