將 Hei Lemon AI 小客服嵌入您的網站，只需複製以下代碼
將聊天界面直接嵌入頁面的指定區域，適合聯絡我們頁面或產品頁面。
<!-- Lemonie AI 小客服 — 全屏嵌入 -->
<iframe
src="https://lemonie-prototype.manus.space"
width="100%"
height="600"
frameborder="0"
allow="clipboard-write"
style="border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.3);"
title="Lemonie — Hei Lemon AI 小客服"
></iframe>在網站右下角顯示一個懸浮的 Lemonie 按鈕，點擊後彈出聊天窗口，適合所有頁面。
<!-- Lemonie AI 小客服 — 懸浮按鈕 Widget -->
<style>
#lemonie-btn {
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
width: 60px; height: 60px; border-radius: 50%; border: none;
background: linear-gradient(135deg, #C8922A, #E5A830);
box-shadow: 0 4px 20px rgba(200,146,42,0.5);
cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
display: flex; align-items: center; justify-content: center;
}
#lemonie-btn:hover {
transform: scale(1.08);
box-shadow: 0 6px 28px rgba(200,146,42,0.65);
}
#lemonie-frame {
display: none; position: fixed; bottom: 100px; right: 24px;
width: 380px; height: 560px; z-index: 9998; border-radius: 16px;
box-shadow: 0 12px 48px rgba(0,0,0,0.4); border: none;
overflow: hidden;
}
#lemonie-frame.open { display: block; }
@media (max-width: 480px) {
#lemonie-frame { width: calc(100vw - 32px); height: 70vh;
bottom: 90px; right: 16px; left: 16px; }
}
</style>
<button id="lemonie-btn" onclick="toggleLemonie()" title="聯絡 Lemonie">
<img src="https://lemonie-prototype.manus.space/lemonie-icon.png"
alt="Lemonie" width="36" height="36"
style="border-radius: 50%; object-fit: cover;" />
</button>
<iframe id="lemonie-frame"
src="https://lemonie-prototype.manus.space"
title="Lemonie AI 小客服"
allow="clipboard-write">
</iframe>
<script>
function toggleLemonie() {
const frame = document.getElementById('lemonie-frame');
frame.classList.toggle('open');
}
</script>