進階嵌入選項 · JavaScript 用戶端

在你的 Entase 帳戶中產生的嵌入程式碼，可將現成的活動小工具加入頁面。這些程式碼專為直接複製貼上而設計，無需進行任何開發工作 – 請參閱在你的網站嵌入活動，了解如何取得嵌入程式碼。

本頁說明可加入該程式碼片段的選項，以及如何設定其開啟的結帳頁面。

小工具會自行載入 JavaScript 用戶端，因此你無需在旁加入 client.js。它亦不需要可發佈金鑰：小工具由 Entase 提供，因此結帳頁面是透過小工具而非你頁面上的金鑰取得授權。

設定

每個小工具均以選項物件設定：

HTML

<div id="entase_OBJ_CODE"></div>
<script>
  window.entase = window.entase || { o: [] };
  window.entase.o.push({
    obj: 'OBJ_CODE',
    theme: 'dark',
    ext: true
  });
</script>
<script src="https://js.entase.com/embed.js" async></script>

obj 會將設定連結至其容器：小工具會在 id 為 entase_ 加上相同程式碼的元素中顯示。如該元素不存在，小工具會記錄警告且不會顯示任何內容。

如要在同一頁面放置多個小工具，請為每個小工具加入一個項目。

名稱	類型	預設值	說明
`obj`	字串	–	嵌入程式碼片段中的物件程式碼。必填。
`width`	字串	`'auto'`	容器寬度，以 CSS 值指定。`'auto'` 表示全寬。
`height`	字串	`'auto'`	容器高度，以 CSS 值指定。`'auto'` 會以 200px 為起點，小工具會自行調整大小以配合其內容。
`theme`	字串	`'light'`	`'light'` 或 `'dark'`。
`locale`	字串	`'auto'`	小工具語言。`'auto'` 會讀取你的 `<html>` 元素的 `lang` 屬性。
`ext`	布林值	`false`	延伸版面配置 – 在日期上方加入活動名稱和海報。
`attribution`	布林值	`true`	顯示 Entase 歸屬資訊列。設為 `false` 以隱藏。
`client`	物件	`{}`	傳遞至開啟結帳頁面的 JavaScript 用戶端的選項。

無論 width 為何，容器的最小寬度均設為 200px；低於此寬度，小工具無法正確排列版面。

設定結帳頁面

client 接受與用戶端建構函式相同的選項，因此從小工具開啟的結帳頁面可如同你自行開啟的結帳頁面般設定樣式和大小：

JavaScript

window.entase.o.push({
  obj: 'OBJ_CODE',
  client: {
    checkoutMode: 'pane',
    pane: { width: '60vw' },
    backdrop: true,
    backdropColor: '#101014'
  }
});

完整清單請參閱建構函式選項。

有兩項注意事項。tprm 由小工具根據頁面 URL 自行設定（見下文），因此在此傳遞的值會被取代。此外，當多個小工具共用同一頁面時，它們會共用一個用戶端執行個體 – 最後初始化的小工具所使用的 client 選項會生效，因此請在同一頁面的所有小工具中保持選項一致。

自動轉送活動參數

與獨立用戶端不同，小工具會讀取你頁面的查詢字串，並將已知的活動參數轉送至小工具和結帳頁面：

sgm, utm_source, utm_medium, utm_campaign, utm_term, utm_content, utm_id, utm_source_platform, utm_creative_format, fbclid

訪客透過 yoursite.com/concert?utm_source=facebook&sgm=SOCIAL 到訪時，無需進一步設定，任何產生的訂單均會記錄該歸屬資訊。此清單以外的參數會被忽略 – 如要帶入你自己的參數，請直接使用用戶端開啟結帳頁面，並自行設定 tprm。請參閱追蹤和同意。