語法效果和渲染狀況

自訂語法元件可以做到的事

✅️ 嵌入 Facebook、Instagram、Threads、Twitter (X) 等貼文

✅️ 嵌入 Google Form、SurveyMonkey、TypeForm 等問卷表單

✅️ 嵌入任何 iframe 語法

✅️ 做出現有編輯器元件無法實現的進階佈局效果 （需具備前端編程知識，不建議麻瓜使用）

⚠️ 匯出成 Email HTML 格式：注意只支援 HTML tab 的匯出，不支援 CSS 和 JavaScript tab。

自訂語法元件不能做到的事

❌️ 在自訂語法元件 A 寫入 JavaScript ，使其作用在自訂語法元件 B 或其他元件身上
→ 在哪個自訂語法元件寫入 code，就只有那一個元件會被影響到，無法跨元件套用效果

❌️ 嵌入 SDK
→ 如同上述，因為自訂語法元件的 code 只會套用到它自己身上，所以不適合把 SDK 安裝在自訂語法元件，請用 Google Tag Manager 或 aaio 安裝在整個活動頁或網站上

位置	渲染狀況	其他說明
AMP 後台編輯器畫布	❌ 不渲染	只會顯示提示框說明設定狀況，無法直接預覽。
SDK 網店活動頁	✅ 會渲染	預覽頁與正式頁皆會渲染。
Email HTML 匯出結果	⚠️ 僅渲染 HTML 部分	● 系統僅會匯出並渲染自訂語法元件中 HTML 分頁的程式碼，不會匯出 CSS 與 JavaScript 分頁的程式碼。 ● 系統在匯出 HTML 分頁的程式碼時，不會針對 Email 載體做任何處理或轉換；若因使用網站 HTML（例如 iframe 嵌入語法）導致在 Email 中渲染錯誤或版面異常，需由客戶自行處理。

操作方式

在 Campaign Star 編輯器的左側元件庫，找到進階元素部分底下的「自訂語法」元件
把元件拖入新增到畫布上，此時因 code 內容為空，會有藍色提示框指引您如何操作
點擊定位到元件，在右側面板設定細節：
1. 名稱：用來區分不同的自訂語法元件
  - 預設值為「Custom code」，也可以自定義，例如「Google forms - 有獎徵答」
  - 最多 30 個字元，禁止為空
2. 自訂語法：點擊元件面板的「前往設定」按鈕，或直接點擊畫布的提示框後，會叫出寫入 code 的編輯區
  - 依照前端程式碼的語言類型，把 code 分別寫入在不同的 tab 裡
  - 注意 CSS tab 禁止寫入 <style> </style> 語法
  - 注意 JavaScript tab 禁止寫入 <script> </script> 語法
編輯完 code 按下「儲存」按鈕後，畫布裡的元件提示框會變成灰色，指引您如何確認語法效果
點擊編輯器右上角的「預覽」或「發布」按鈕，即可在網店頁面看到實際上的語法渲染效果

使用範例：在活動頁嵌入 Facebook 貼文

在 Facebook 找到目標貼文，叫出「嵌入」功能

https://www.facebook.com/awoo.intelligence/posts/960486092782582

點擊「複製代碼」

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fawoo.intelligence%2Fposts%2Fpfbid0z7uAqJKcu7kCuX9Sr2v5WveH2SCYC5h1KUbAVfo92dEb4BozAGmGZSaEttvo3BAPl&show_text=true&width=500" width="500" height="250" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

貼上到 Campaign Star 自訂語法元件 code 寫入區的「HTML」tab，按下「儲存」
點擊「預覽」按鈕在網店活動頁確認 code 渲染效果

其他注意事項

若發現內容寬高被壓縮而出現 scroll bar：
- 可利用右側元件面板 [設定] tab > [排版] 段落底下的「寬度」和「高度」控制項，自行調整在 Desktop view 和 Mobile view 的顯示大小。
- 如果調整元件面板的寬高設定後，顯示範圍仍然不變或過小，有可能是因為顯示範圍的大小其實是由語法內容所控制，可嘗試在自訂語法的 code 編輯區，輸入 width: 或 height: 等語法來控制渲染結果的寬高。
自訂語法元件在畫布的新增、複製 (duplicate)、刪除行為，或任何右側面板的設定變更，都支援 undo/redo 功能。

但在自訂語法元件的 code 編輯區區裡面，就不支援 undo/redo 功能，一旦點擊「儲存」關閉寫入區後，就無法再恢復到之前寫的 code，就像目前編輯器左側的 CSS Editor 無法被 undo/redo 一樣。
在「做出現有編輯器元件無法支援的進階佈局」這個應用情境裡，若您的自訂語法意外毀損活動頁，awoo 一概不負相關責任。