WUMETAX Lab
寵物專案設定：
目前狀態：Idle (待機)
https://your-website.example.com/ （可直接捲動頁面、點擊按鈕或拖曳下方寵物）

測試寵物在真實網頁中的互動與點擊穿透表現

這是一個完整的模擬網站。你可以直接點擊下方按鈕、捲動頁面，或直接點擊、撫摸、雙擊、拖曳畫面底部的「咖呲」，驗證寵物不會阻擋網站原本的操作。

網站互動驗證：請點擊上方按鈕或下方寵物進行測試

為什麼網站互動寵物需要 Pointer Events 穿透架構？

不阻擋網站按鈕點擊

只有寵物角色本體與小選單接收事件，其餘透明區域完全穿透。

Shadow DOM 樣式隔離

寵物的 CSS 封裝於獨立 Shadow Root，絕不汙染網站原本的字型與排版。

RWD 安全邊界保護

無論桌面縮放或切換手機直橫向，寵物都會自動保持在可視範圍內。

往下捲動測試底部固定表現

當你在這個模擬網頁中上下捲動時，寵物會穩定停留在視窗底部（或你指定的角落），不會因為捲動而消失。你也可以把寵物直接拖曳到卡片旁邊，放開後牠會自然受重力落回活動地面。

支援滑鼠撫摸手勢

在寵物身上左右輕滑，就能觸發撒嬌反應與愛心像素特效，且不影響正常頁面捲動。

背景頁籤智慧節能

當訪客切換到其他瀏覽器分頁時，動畫更新會自動降頻並限制時間步長，回到頁面時平順恢復。

模擬網站頁尾區域 — 即使寵物站在頁尾上方，下方按鈕依然可以正常點擊：

WidgetPets｜免費網站互動寵物產生器（柴犬咖呲、橘貓、小兔子網站嵌入工具）

WUMETAX WidgetPets 是由 WUMETAX Lab 開發的視覺化網站互動寵物製作工作站。不需要撰寫任何程式、不需要安裝 npm 或依賴外部圖庫，就能在幾分鐘內打造一隻具備待機呼吸、四足走動、小跑步、坐下休息、打盹睡覺、開心跳躍、滑鼠觸控撫摸與拖曳互動的原創 2D 像素寵物，並一鍵匯出可嵌入自己網站的 HTML／JavaScript 程式碼。

WidgetPets 網站互動寵物可以做什麼？

  • 賦予網站生命感：預設主角為可愛黃褐色柴犬「咖呲」，以及橘貓、長耳小兔子三種完整原創像素角色。
  • 自然自主行為系統：內建完整狀態機，會根據「慵懶型、平衡型、活潑型」性格自動在網站底部散步、坐下或打盹。
  • 豐富訪客互動：支援點擊搖尾巴、撫摸撒嬌、雙擊跳躍、拖曳換位、互動小選單與自訂歡迎文字泡泡。
  • 絕對安全隔離：匯出的元件採用 Shadow DOM 與局部 Pointer Events 設計，絕不影響原本網站的按鈕點擊、文字樣式與頁面捲動。

如何製作並嵌入一般 HTML 網站？

  1. 在左側面板選擇寵物種類（柴犬、橘貓或小兔子）並為牠命名。
  2. 調整角色尺寸、毛色、穿戴配件（項圈、領巾、小帽）與活動範圍。
  3. 在中央模擬網站即時測試點擊、拖曳與手機版尺寸表現。
  4. 在右側點擊「複製嵌入碼」，將產生的程式碼貼到您網站 HTML 的 </body> 標籤之前即可完成安裝。

如何將 WidgetPets 放到 WordPress 網站？

方法一：使用 Gutenberg 自訂 HTML 區塊（適合快速測試）

您可以在 WordPress 文章、頁面或頁尾小工具中新增「自訂 HTML（Custom HTML）」區塊，並貼上右側產生的「自包含網站嵌入程式碼」。
重要安全提醒：部分 WordPress 網站基於使用者角色權限（例如非最高管理員）、多站點網路政策或資安外掛設定，可能會自動過濾或移除 <script> 標籤。因此我們不承諾任何受限制的 WordPress 區塊都能直接貼上執行。

方法二：載入獨立 widgetpets.js（推薦正式網站使用）

對於正式營運的 WordPress 網站，建議下載右側的 widgetpets.js 上傳至您的網站媒體庫或佈景主題目錄，再透過佈景主題頁尾或程式碼片段管理工具載入：

<script src="https://您的網域/路徑/widgetpets.js"></script>
<script>
  window.WidgetPets.mount(您的寵物設定物件);
</script>

方法三：未來專屬 WordPress 外掛擴充

WidgetPets 的執行核心已採用標準模組化介面（支援 mount、updateConfig、destroy），未來可直接銜接專屬 WordPress 外掛進行後台啟用、JSON 設定匯入與手機版顯示控制。

常見問題 FAQ 與本機隱私安全說明

Q1：WidgetPets 是否免費？需要註冊登入嗎？

完全免費，無須註冊帳號、無須登入，且匯出的寵物元件不會強制加入任何廣告或浮水印。

Q2：支援手機版與平板 RWD 嗎？

完整支援。您可以設定「桌面與手機都顯示（手機自動縮小）」、「手機強制固定角落」或「只在桌面顯示」，且手指拖曳寵物時不會卡住整頁滑動。

Q3：我的設定資料或網站訪客資料會被上傳嗎？

純本機處理、零資料追蹤： 您在編輯器中儲存的專案與匯出的寵物位置記憶，皆僅儲存在瀏覽器本機的 LocalStorage（使用獨立命名空間 wumetax_widgetpets_* 避免衝突）。匯出的寵物元件不連線任何外部伺服器、不讀取 Cookie、不收集網站訪客個資或表單內容。