Widget Chatbot AI Gratis untuk Blogger - Pasang Sekarang!

Semua widget gratis untuk blog Anda sudah siap! Berikut widget lengkap yang bisa langsung Anda pasang di Blogger. Cukup copy-paste ke Layout > Add Gadget > HTML/JavaScript.

1. Widget Chatbot AI (Floating Button)

Widget chatbot floating yang muncul di pojok kanan bawah blog. Pengunjung bisa bertanya langsung dan jawaban otomatis.

ðŸ“‹ Copy kode ini ke Layout > Gadget > HTML/JavaScript:

<!-- JeniusKlik AI Chatbot Widget -->
<div id="jk-chatbot" style="position:fixed;bottom:20px;right:20px;z-index:99999;font-family:'Segoe UI',sans-serif">
<button onclick="toggleJKChat()" id="jk-chat-btn" style="width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;font-size:28px;cursor:pointer;box-shadow:0 4px 20px rgba(102,126,234,0.5)">ðŸ’¬</button>
<div id="jk-chat-window" style="display:none;width:350px;height:480px;border-radius:16px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.25);position:absolute;bottom:70px;right:0;background:#fff">
<div style="background:linear-gradient(135deg,#667eea,#764ba2);color:white;padding:15px 20px;display:flex;align-items:center;gap:10px">
<div style="width:40px;height:40px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px">ðŸ¤–</div>
<div><div style="font-weight:600;font-size:15px">JeniusKlik AI</div><div style="font-size:11px;opacity:0.8">ðŸŸ¢ Online</div></div>
</div>
<div id="jk-messages" style="height:320px;overflow-y:auto;padding:15px;background:#f0f2f5;display:flex;flex-direction:column;gap:8px">
<div style="background:white;padding:12px 16px;border-radius:16px;border-bottom-left-radius:4px;font-size:13px;line-height:1.5;max-width:85%">Halo! Saya AI Assistant JeniusKlik. Ada yang bisa saya bantu?</div>
</div>
<div style="display:flex;gap:6px;padding:8px 15px;background:white;border-top:1px solid #eee;flex-wrap:wrap">
<button onclick="jkSend('Tutorial')" style="background:#f0f2f5;border:none;padding:6px 12px;border-radius:15px;font-size:11px;cursor:pointer">Tutorial</button>
<button onclick="jkSend('Aplikasi Web')" style="background:#f0f2f5;border:none;padding:6px 12px;border-radius:15px;font-size:11px;cursor:pointer">Aplikasi Web</button>
<button onclick="jkSend('Tips SEO')" style="background:#f0f2f5;border:none;padding:6px 12px;border-radius:15px;font-size:11px;cursor:pointer">Tips SEO</button>
</div>
<div style="display:flex;padding:12px;gap:8px;background:white;border-top:1px solid #eee">
<input type="text" id="jk-input" placeholder="Ketik pesan..." style="flex:1;border:1px solid #ddd;border-radius:25px;padding:10px 16px;font-size:13px;outline:none" onkeypress="if(event.key=='Enter')jkSendMsg()">
<button onclick="jkSendMsg()" style="background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:16px">âž¤</button>
</div>
</div>
</div>
<script>
function toggleJKChat(){var w=document.getElementById('jk-chat-window');var b=document.getElementById('jk-chat-btn');w.style.display=w.style.display==='none'?'block':'none';b.innerHTML=w.style.display==='block'?'âœ•':'ðŸ’¬'}
function jkSend(msg){document.getElementById('jk-input').value=msg;jkSendMsg()}
function jkSendMsg(){var input=document.getElementById('jk-input');var msg=input.value.trim();if(!msg)return;jkAddMsg(msg,'user');input.value='';setTimeout(function(){var r=jkGetResponse(msg);jkAddMsg(r,'bot')},800)}
function jkGetResponse(msg){var m=msg.toLowerCase();if(m.includes('tutorial'))return'Kami punya 20+ tutorial Google Apps Script! Kunjungi blog kami untuk tutorial lengkap.';if(m.includes('aplikasi'))return'Buat aplikasi web gratis dengan Google Apps Script! Cek Web Apps Builder kami.';if(m.includes('seo'))return'Tips SEO: Kata kunci di judul, konten 900+ kata, gambar relevan, internal linking.';return'Maaf, coba tanyakan tentang tutorial, aplikasi web, atau tips SEO!'}
function jkAddMsg(text,sender){var div=document.createElement('div');div.style.cssText='background:'+(sender==='user'?'linear-gradient(135deg,#667eea,#764ba2);color:white;align-self:flex-end;border-bottom-right-radius:4px':'white;align-self:flex-start;border-bottom-left-radius:4px')+';padding:12px 16px;border-radius:16px;font-size:13px;line-height:1.5;max-width:85%';div.textContent=text;document.getElementById('jk-messages').appendChild(div);document.getElementById('jk-messages').scrollTop=99999}
</script>