# 影音嵌入模組

{% hint style="warning" %}
**備註：**

目前影音嵌入模組為以下電商平台進階版(含以上)功能

* 91APP
* WooCommerce
* Shopfiy
* SHOPLINE 
  {% endhint %}

您可以透過此功能自訂影音嵌入模組內顯示的影片內容及該影音模組顯示的背景色。

<figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2Fr8abrmQcbqCTvbWKB6oe%2Fimage.png?alt=media&#x26;token=9d8fd299-e44c-442a-8ba1-7825569db538" alt=""><figcaption></figcaption></figure>

### 影音嵌入模組模擬應用 <a href="#simulation-usage" id="simulation-usage"></a>

下方圖片展示模擬網頁使用多組影音嵌入模組的變化應用

<figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2FLvzrcxDuOIWMAnajbMDH%2Fimage.png?alt=media&#x26;token=9dd03e30-48d9-454c-a1bf-744b9f09d736" alt="" width="375"><figcaption></figcaption></figure>

### 管理影音嵌入模組 <a href="#how-to-use" id="how-to-use"></a>

#### 系統預設模組 <a href="#default-module" id="default-module"></a>

系統預設模組不需設定即包含所有的上傳的影片及直播回放，如有需要設定預設模組背景色，請至 設定 -> 其他設定 -> [前台外觀設定](https://help.livebuy.tv/settings/additional-settings#front-end-appearance) 調整。

<figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2FOdByHFBzOy5preV6nBA1%2Fimage.png?alt=media&#x26;token=80859594-4d5e-4a75-bc10-63904bb188db" alt="" width="563"><figcaption></figcaption></figure>

#### 自訂模組 <a href="#customize" id="customize"></a>

點選右上角的 「 新增模組 」 按鈕，即可以進行自訂影音嵌入模組的設定。

1. 設定模組名稱：僅用於後台辨識，將不影響實際模組前台顯示內容。
2. 設定模組內容同步方式：

   * **手動**：在下方自訂公開影片中自由選擇要加入此模組的影片，組合為一個模組。

   <figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2F3o1IwbJhWY42DfsqF9Kd%2Fimage.png?alt=media&#x26;token=852c0348-cc61-4779-8979-b0fea659ccfd" alt=""><figcaption></figcaption></figure>

   * **自動**：您可以透過設定規則，將符合設定條件的現有和未來公開影片自動加入到這個模組。
     * 內容類型：根據影片屬於 直播/回放/影片 屬性來判斷加入。&#x20;
     * 影片標題：根據影片的標題作條件的判斷，例如您可以新增條件使所有影片標題包含「聖誕節」的影片自動加入模組。&#x20;
     * 商品名稱：根據影片中商品名稱作條件的判斷，例如您可以新增條件使所有影片包含「粽子」這項商品的影片自動加入模組。&#x20;
     * 發布日期：以影片的發布日期為判斷條件 ( 開始於、結束於、介於 )。

   <figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2Fw2PIxQSBIkICf7yt8XBW%2Fimage.png?alt=media&#x26;token=6ef093bf-9281-419b-b782-61cc459779ad" alt=""><figcaption></figcaption></figure>
3. 前台外觀設定：您可以在這裡設定此影音嵌入模組顯示於第三方網站時的背景填色及文字色彩。

   * 文字色彩：預設文字為黑色，反轉後文字為白色。 背景填色：預設為無填滿的透明背景以配合您的網站視覺。
   * 文字色彩：預設文字為黑色，反轉後文字為白色。 背景填色：預設為無填滿的透明背景以配合您的網站視覺。

   <figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2FryW4AdDNNdavy4TEMaJL%2Fimage.png?alt=media&#x26;token=10ecfbed-88be-4360-a08c-32ec76f7cf84" alt=""><figcaption></figcaption></figure>
4. 設定完成後，可以在模組列表複製 **模組代碼 ( Module ID )** 填入**合作電商網站的佈景主題模組設定**中，即可顯示您的自訂影音嵌入模組。\
   後續如果需要調整內容，可以點擊模組列表的名稱進入編輯調整。<br>

   <figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2FKMGiMkgDcpaD93ysPqm9%2Fimage.png?alt=media&#x26;token=ed5d8259-4966-4b72-8dff-b3c0542deb89" alt=""><figcaption></figcaption></figure>

### 於影片總覽頁建立影音嵌入模組 <a href="#another-way" id="another-way"></a>

於影片總覽頁多選所需影片後，會出現 「 加入自訂模組 」 按鈕，您可以：

<figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2FIxCvMNblPJcDLcbayYBI%2Fimage.png?alt=media&#x26;token=bd1c8991-d574-4e96-9fe3-bd80714e8612" alt=""><figcaption></figcaption></figure>

<figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2FCEt9q01OkWm5FxJyUBaI%2Fimage.png?alt=media&#x26;token=a6ac3833-56b1-4d89-82b6-303358c16838" alt=""><figcaption><p>加入已存在模組或新增模組</p></figcaption></figure>

1. 組合新增自訂模組：\
   點選 「 新增模組 」 後，設定完成模組名稱後即完成。

   <figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2F9E5YL0aFtc487wJQUifd%2Fimage.png?alt=media&#x26;token=34b8a2b2-67c5-413d-bff8-aa65f5789474" alt=""><figcaption></figcaption></figure>
2. 將影片加入已存在的影音嵌入模組：\
   勾選欲加入的已存在模組，點選 「 儲存 」 按紐即可加入。<br>

   <figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2FwxhcMkoMxGGODPnjqpIo%2Fimage.png?alt=media&#x26;token=f62056df-c09c-438a-9a91-ceba0c21fa54" alt=""><figcaption></figcaption></figure>

### 影音嵌入模組前台效果 <a href="#usage-effect" id="usage-effect"></a>

下圖為放置了兩組不同的輪播模組範例，上方為預設模組，下方為自訂內容模組。

<figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2FFDQauuruYUtVmeZwWyqf%2Fimage.png?alt=media&#x26;token=0f2e7e31-f783-4eb0-a669-4198821bd8f6" alt=""><figcaption></figcaption></figure>

點擊進入自訂模組後，僅能查看自訂模組影片內容。

<figure><img src="https://705165073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV3NDyE2p2PVA02XxLVkM%2Fuploads%2FuOSvO7RyLTSYOa7AuTPr%2Fimage.png?alt=media&#x26;token=42f1500d-f0d4-477c-8e5f-05da99f82fff" alt=""><figcaption></figcaption></figure>