解決 QQ 在線客服離線仍顯示在線狀態的問題

問題現象

使用 QQ 推廣工具提供的客服代碼嵌入網頁：

<a target="_blank" href="https://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes">
  <img border="0" src="https://wpa.qq.com/pa?p=2:12345678:51" alt="點擊這裡給我發消息" />
</a>

但即使 QQ 離線，頭像仍顯示彩色在線狀態，誤導訪客。

根本原因

官方靜態圖片 URL https://wpa.qq.com/pa?p=2:uin:51 無法即時反映真實在線狀態，僅為預設樣式。

解決方案：動態檢測在線狀態並切換圖片

步驟 1：引入狀態檢測腳本

<script> var online = new Array(); </script>
<script type="text/javascript" src="https://webpresence.qq.com/getonline?Type=1&123456:785757572:1212213748:1052222178:"></script>

該腳本會將 online[0] 設為 1（在線）或 0（離線）。

步驟 2：根據狀態動態寫入正確圖片

<script>
if (online[0] == 0) {
    document.write("<a target='_blank' href='https://wpa.qq.com/msgrd?v=3&uin=2045394287&site=qq&menu=yes' title='請留言'>" +
                   "<img src='images/offline.png' border=0/></a>");
} else {
    document.write("<a target='_blank' href='https://wpa.qq.com/msgrd?v=3&uin=2045394287&site=qq&menu=yes' title='在線咨詢'>" +
                   "<img src='images/online.png' border=0/></a>");
}
</script>

需自備 images/online.png 與 images/offline.png 兩張圖片。

效果驗證

頁面重新整理後，即可即時顯示正確狀態圖片，離線顯示灰色/留言圖示，在線顯示彩色/咨詢圖示。

圖片示例

進階建議

• 將檢測邏輯封裝為可複用函數，支援多個客服 QQ 同時顯示。
• 考慮使用 AJAX 定時輪詢 getonline 接口，實現無刷新狀態更新。
• 若網站啟用 HTTPS，確保引用的 QQ 接口支援 HTTPS，否則會產生混合內容警告。

總結

透過 QQ 官方提供的 webpresence.qq.com/getonline 接口動態獲取狀態，配合前端邏輯切換自訂圖片，即可徹底解決離線仍顯示在線的問題，提升用戶體驗。