Custom HTML 自訂內容：嵌入外部工具與特殊設計的彈性出口

TL;DR

• Custom HTML 是自由 HTML block，整塊讓你貼任意 HTML / CSS / JS 程式碼。
• 採 Shadow DOM 隔離——你寫的樣式不會跑出來汙染整個網站 CSS。
• 用途：嵌入第三方工具、實現其他 block 做不到的特殊設計。
• 安全警告：不要貼來路不明的 JS，可能有 XSS 風險。

---

Custom HTML 存在的原因

其他 22 個 block 已經覆蓋了 90% 的網站需求，但總有例外：

• 想嵌入 Typeform / Calendly / Jotform 的互動表單。
• 想放外部計算機（BMI、房貸試算、保費試算）。
• 想嵌入 Twitter / Instagram 的官方 embed 程式碼。
• 想實現其他 block 做不到的特殊設計（例如旋轉的倒數計時器）。

這些場景就是 Custom HTML block 的戰場——你什麼都能塞，但相對也什麼都要自己管。

---

編輯器欄位

• html：整段 HTML / CSS / JS 程式碼。
• 不支援 i18n：多語訪客會看到同一份 HTML。如果需要多語版本，該場景建議改用其他原生支援 i18n 的 block。

---

Shadow DOM 隔離是什麼

技術細節：你貼的 HTML 會被包在 Shadow DOM 裡渲染。這代表：

• 你寫的 CSS 不會跑到外面：不會把你網站其他區塊的版型弄壞。
• 網站外部 CSS 不會進來：你的 Custom HTML 需要完整的自給自足樣式。
• JavaScript 互動可以運作：點擊、計時、動畫都能寫。

這個設計讓 Custom HTML 變成安全的實驗場——搞壞了只壞這個區塊，不會汙染整個網站。

---

常見使用情境

嵌入 Typeform / Calendly：

<iframe src="https://your-form.typeform.com/to/xxx" width="100%" height="500px" frameborder="0"></iframe>

嵌入 Instagram embed：
貼 Instagram 官方產生的 embed code（從 Instagram 貼文「嵌入」按鈕取得）即可。

嵌入 YouTube 以外的影片平台：
如 Twitch、Dailymotion、SoundCloud——AHHA 的 Video block 只支援 YouTube / Vimeo，其他平台走 Custom HTML。

特殊倒數計時器 / 動畫：
可以寫自己的 HTML + CSS + JS 實作。

---

什麼時候該改用其他 block

選 Custom HTML 前先問自己一個問題：有沒有原生 block 能做到類似效果？

• 想放影片 → Video block（不要自己寫 iframe 嵌 YouTube）
• 想放表單 → Contact block（有表單 + 需會員模式）
• 想放電子報訂閱 → Subscribe block（跟 AHHA 會員系統整合）
• 想放網格圖片 → Gallery block（自動產生 alt、lazy load）

原生 block 有 i18n、有結構化資料、有快取最佳化——Custom HTML 全都沒有。能用原生 block 就用原生的。

---

三個常見錯誤（含安全風險）

1. 貼來路不明的 <script>：有些人會複製「看起來很酷的特效」程式碼，但可能含惡意 JS。只貼你信任的來源（官方 embed、自己寫的、知名 CDN 的 library）。
2. CSS 沒寫 Shadow DOM 內樣式：寫 body { background: red } 無效（body 不在 Shadow DOM 內）。樣式要針對你自己的元素寫。
3. 用來做網站主要功能：把表單、預約這類核心流程用 Custom HTML 實現，會失去後台管理、會員整合、結構化資料的所有好處。用原生 block。

---

寫在最後

Custom HTML 是 AHHA 留給你的「最後一條路」——原生 block 做不到的事，這裡能做。但用得越多代表你越不享受 AHHA 自動化的好處，所以能少用就少用。

登入 AHHA 後台 → 頁面管理 → 加入 Custom HTML block → 貼程式碼前先確認來源安全，儲存前檢查預覽。