How to Add an AMP Stories Widget to Your Wix Site

這篇教學將說明如何透過 Wix 內建的 Custom Element 將 AMP Stories Widget 加入 Wix 網站中。

Adding the Custom Element

1. 點擊左方 Add 按鈕

2. 選擇 Embed 類別

3. 將 Custom Element 拖曳到畫面

Setting the Source

1. 點擊 Custom Element 的 Choose Source 按鈕

2. 在跳出的 Element Settings 面板， 輸入 Server URL: https://player.gliacloud.com/widget-wix/{ID}， 其中 {ID} 為集雅提供的 widget id， 例如: https://player.gliacloud.com/widget-wix/incar.tw

3. 輸入 Tag Name: wix-gstories-widget

Setting the Attributes (optional)

Widget 預設樣式為右下角浮動按鈕，可以透過設定 Attribute 調整。

調整樣式

1. 點擊 Set Attributes 按鈕

2. 在跳出的 Element Attributes 面板，點擊 Set Attributes 按鈕

3. Attribute Name 欄位輸入 gw-type

4. Value 欄位輸入 card-info (或 single, bubble, card)

5. 點擊 Set 按鈕

調整 AMP Stories 開啟方式

1. 點擊 Set Attributes 按鈕

2. 在跳出的 Element Attributes 面板，點擊 Set Attributes 按鈕

3. Attribute Name 欄位輸入 gw-target_window

4. Value 欄位輸入 iframe (或 blank, self)

5. 點擊 Set 按鈕

調整 Widget 圓角樣式

1. Attribute Name 欄位輸入 gw-rounded

2. Value 欄位輸入 1 (或 0)

更多支援樣式及設定請參考: Usage of AMP Stories Widget

Demo Page

https://www.gliastory.com/demo-amp-stories-widget

備註

• 由於安全性考量，在 Editor 和 Preview 模式下，Custom Element 會被放在 iframe 內，因此 AMP Stories 無法在原視窗滿版開啟。詳細資料請參考 Guidelines and Limitations。

更多參考資料

• Wix Editor: Adding a Custom Element to Your Site