教你將倒數Widget嵌入HTML電郵，為推廣活動增添期待感
你有冇收過啲 promotion 電郵，一打開見到個倒數時鐘「滴滴答答」咁行，即刻有種「唔買就蝕底」嘅感覺？嗰種壓迫感同期待感，其實係經過精心設計嘅心理戰術。2026 年嘅今日，香港嘅數碼營銷競爭激烈，單純嘅文字優惠已經好難突圍而出。將倒數計時器嵌入 HTML 電郵，唔單止可以提升開信率，仲可以令到推廣活動嘅轉換率明顯上升。
將倒數 widget 嵌入 HTML 電郵，可以有效提升促銷活動嘅急迫感與期待感。呢篇教學會教大家由零開始建立一個運作正常嘅倒數計時器，包括選用合適嘅工具、處理電郵客戶端嘅兼容性問題，以及避開常見嘅錯誤。無論你係新手定係有經驗嘅設計師，都可以喺呢度搵到實用技巧，令每次 campaign 都更吸引眼球。
點解 2026 年仲要用倒數電郵？
香港人生活節奏快，收件匣入面嘅 promotion 電郵多到睇唔晒。一個靜態嘅 banner 好容易俾人忽略，但一個會郁、會倒數嘅計時器，就可以捕捉到讀者嘅視線。倒數計時器製造咗一種「有限時間」嘅錯覺，令到收件人覺得呢個 offer 係獨家、係限時嘅，從而推動佢哋馬上行動。尤其係做 flash sale、節日限定、或者新產品預售嘅時候，呢種策略特別有效。
常見嘅倒數電郵做法有邊幾種？
行內主要有三種方法將倒數效果放入電郵，每種都有優缺點。
- 使用 GIF 動畫倒數：預先製作一段倒數動畫，上載做圖片。做法簡單，兼容性最好，幾乎所有電郵 client 都睇到。但最大問題係，佢唔係真正即時倒數，只係一段重複播放嘅動畫，缺乏真實感。
- 利用 JavaScript：理論上可以做到即時更新，但大多數電郵客戶端（尤其係 Outlook、Gmail）會擋晒 JavaScript，結果只會顯示一個空白畫面，得不償失。
- 嵌入外部倒數 Widget：呢個係目前最主流嘅方法。用第三方服務（例如 Add Oil Team 提供嘅免費工具）產生一段 HTML 代碼，當中包含指向伺服器嘅圖片或 iframe。每次開信，圖片都會向伺服器請求最新時間，做到真正嘅即時倒數。
逐步教學：將倒數 Widget 嵌入 HTML 電郵
以下係一套實戰步驟，跟住做就可以喺半個鐘之內整到一個可用嘅倒數電郵。
- 選擇倒數工具：搵一個支援電郵嵌入嘅倒數服務。以我哋網站為例，我哋提供免費嘅倒數 widget，可以自訂顏色、字型同目標日期。你可以喺 Add Oil Team 嘅倒數工具頁面 建立你嘅第一個 widget。
- 設定倒數目標：輸入你嘅活動截止日期同時間。記得要設定時區，香港係 UTC+8。如果係跨國活動，要考慮收件人所在地，或者直接用香港時間。
- 自訂外觀：揀選配合你品牌嘅顏色、字體同尺寸。多數工具都會俾你預覽效果。建議保持簡潔，避免太多花巧元素影響倒數數字嘅可讀性。
- 複製嵌入代碼：產生器會俾一段 HTML 代碼，通常係一個
<img>標籤，src 指向一個動態圖片 URL。呢段代碼就係你要放入電郵嘅核心。 - 喺電郵編輯器貼上代碼：如果你用緊 HTML 電郵編輯器（例如 Mailchimp、ActiveCampaign、或者自家系統），直接喺原始碼模式貼上嗰段代碼。如果你用緊所見即所得編輯器，可能要切換到「檢視原始碼」或者「編輯 HTML」模式。
- 測試：呢一步好重要。將測試電郵發去唔同嘅電郵客戶端，包括 Gmail（Web 同 App）、Outlook（Windows 同 Mac）、Yahoo Mail、同埋 Apple Mail。確保倒數圖片正常顯示，而且時間係正確更新。
電郵客戶端兼容性對照表
唔同電郵 client 對 HTML 同圖片嘅支援各有差異。以下係常見平台對倒數 widget 嘅相容情況。
| 電郵客戶端 | 支援動態圖片 | 注意事項 |
|---|---|---|
| Gmail（Web） | 支援 | 圖片可能預設縮細，建議使用 600px 以內嘅寬度 |
| Gmail（App） | 支援 | 載入速度可能較慢，確保伺服器反應夠快 |
| Outlook（Windows） | 支援 | 舊版 Outlook 用 Word 渲染引擎，對 CSS 支援差，但圖片通常冇問題 |
| Outlook（Mac） | 支援 | 表現穩定，同 Apple Mail 相似 |
| Apple Mail | 支援 | 對 HTML 支援最好，幾乎所有效果都出到 |
| Yahoo Mail | 支援 | 偶爾有圖片阻擋，要提醒用戶「顯示圖片」 |
| Outlook.com | 支援 | 同 Gmail 類似，支援良好 |
專家建議：任何電郵入面嘅圖片，都要假設用戶嘅預設設定係「唔顯示圖片」。所以，喺倒數圖片附近一定要加返 fallback 文字，例如「優惠將於 8 月 31 日結束」，等即使圖片 load 唔到，收件人都知道 deadline。
常見錯誤同點樣避免
好多設計師第一次整倒數電郵嘅時候會中招。以下係幾個最常見嘅陷阱。
- 忽略圖片阻擋：唔好依賴圖片自動顯示。喺倒數圖片嘅
alt屬性入面寫清楚截止日期。例如alt="限時優惠：8月31日結束"。同時，電郵開頭應該用文字講明優惠期限。 - 代碼格式錯誤：貼上代碼之後，整封電郵變晒亂碼？好大機會係你將 widget 代碼放錯咗位置，或者電郵編輯器自動加咗多餘嘅標籤。建議先喺純文字編輯器 check 一次代碼結構。
- 時間顯示錯誤：如果倒數顯示嘅時間同你設定嘅時間唔一致，通常係時區設定有問題。確保工具嘅時區設定係「Asia/Hong_Kong」或者 UTC+8。
- 用錯技術：如前面所講，千祈唔好喺電郵入面用 JavaScript。大部分電郵 client 會直接封殺，結果你只係 send 咗一封空白電郵俾人。
電郵倒數嘅進階技巧
當你已經掌握基本嵌入方法，可以試下以下技巧令效果更上一層樓。
- 分段式倒數：將一個大型推廣活動分成幾個階段，每個階段都有獨立倒數。例如「早鳥優惠倒數 7 日」、「第二階段加碼倒數 3 日」。呢種做法可以持續保持新鮮感。
- 條件式內容：部分進階電郵平台（例如 Klaviyo）支援條件式顯示。你可以根據「用戶是否曾經開信」或者「是否點擊過」去決定顯示邊一個倒數 widget。例如未開信用戶見到「首購優惠倒數」，已購買用戶見到「升級會員倒數」。
- 個人化倒數：將倒數時間同用戶行為掛鉤。例如「你嘅購物車入面嘅商品，將於 2 小時後釋出」，呢種個人化倒數嘅轉換率非常高。
- 配合社交證明：喺倒數計時器旁邊加上「已有 1,234 人搶購」呢類數字，形成羊群效應。
幾時係用倒數電郵嘅最佳時機？
唔係所有電郵都適合加倒數。用得太多，用戶會麻木，甚至覺得煩。以下係幾個最適合嘅場景。
- 購物車遺棄提醒：提醒用戶購物車入面嘅商品即將失效
- 早鳥優惠：新產品或服務嘅早鳥折扣倒數
- 活動登記截止：研討會、發佈會、工作坊嘅報名截止
- 節日促銷：聖誕、新年、中秋、端午等香港人重視嘅節日
- 限量版產品發售：製造稀缺感
相反，如果係品牌日常通訊、內容分享或者會員月刊，就唔建議硬加倒數，否則會顯得太 Salesy，影響品牌形象。
如何衡量倒數電郵嘅成效？
設定好 campaign 之後，要追蹤以下指標嚟評估倒數 widget 嘅實際效果。
- 開信率（Open Rate）：加入倒數之後，開信率有冇提升？如果主題行本身已經有「限時」字眼，開信率通常會升。
- 點擊率（Click-Through Rate）：呢個係最重要嘅指標。如果倒數計時器連結咗去你的 landing page，點擊率就直接反映倒數嘅吸引力。
- 轉換率（Conversion Rate）：最終有幾多人完成購買或登記？呢個先係終極指標。
- 退訂率（Unsubscribe Rate）：如果退訂率突然升高，可能係倒數電郵太頻密或太 aggressive，需要調整策略。
你可以用 UTM 參數去追蹤來自電郵倒數嘅流量，喺 Google Analytics 睇返詳細數據。
為你嘅推廣活動注入推動力
將倒數 widget 嵌入 HTML 電郵唔係咩高科技，只要跟住以上步驟，用啱工具，你就可以好快製作到有效嘅倒數電郵。最緊要係記住：倒數係一種心理工具，用得好可以放大優惠嘅價值，用得太濫就會適得其反。下次籌劃 campaign 嘅時候，不妨試下由一個簡單嘅倒數開始，你會發現收件人嘅反應比你想象中更加熱烈。我哋網站有更多 免費倒數工具同教學，幫你一步步建立屬於你嘅推廣節奏。加油！