Chatbot AI Gratis untuk Blogger: Cara Pasang Widget Chatbot di Blog Anda 2026

Ingin menambahkan chatbot AI gratis di blog Blogger Anda? Dalam tutorial ini, saya akan memberikan kode lengkap untuk memasang widget chatbot AI yang bisa menjawab pertanyaan pengunjung secara otomatis. Gratis, tanpa hosting, dan mudah dipasang!

Mengapa Perlu Chatbot AI di Blog?

Chatbot AI di blog memberikan banyak manfaat. Pertama, pengunjung bisa bertanya langsung tentang konten blog tanpa harus membaca semua artikel. Kedua, chatbot bisa merekomendasikan artikel yang relevan dengan pertanyaan pengunjung. Ketiga, chatbot membuat blog terlihat lebih profesional dan modern.

Menurut penelitian, blog dengan chatbot memiliki tingkat engagement 3x lebih tinggi dibanding blog tanpa chatbot. Pengunjung lebih lama tinggal di blog dan lebih sering kembali.

Langkah 1: Siapkan Google Sheets Knowledge Base

Buat Google Sheets baru dengan nama "Chatbot_KB" dan buat sheet "Knowledge" dengan kolom: Keywords, Jawaban, Kategori, Link_Artikel. Isi dengan pertanyaan umum dan jawaban yang sesuai dengan konten blog Anda.

Langkah 2: Buat Google Apps Script

Buka script.google.com dan buat project baru. Copy-paste kode berikut:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('ChatbotWidget')
    .setTitle('JeniusKlik AI Assistant')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function getResponse(pesan) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Knowledge');
  var data = sheet.getDataRange().getValues();
  var msg = pesan.toLowerCase();
  
  var bestMatch = null;
  var bestScore = 0;
  
  for (var i = 1; i < data.length; i++) {
    var keywords = data[i][0].toString().toLowerCase().split(',');
    var score = 0;
    keywords.forEach(function(kw) {
      if (msg.includes(kw.trim())) score++;
    });
    if (score > bestScore) {
      bestScore = score;
      bestMatch = { jawaban: data[i][1], kategori: data[i][2], link: data[i][3] };
    }
  }
  
  if (bestMatch && bestScore > 0) {
    var response = bestMatch.jawaban;
    if (bestMatch.link) response += '\n\nBaca juga: ' + bestMatch.link;
    return response;
  }
  
  return 'Maaf, saya belum mengerti pertanyaan Anda. Coba tanyakan tentang:\n- Tutorial Google Apps Script\n- Aplikasi Web Gratis\n- Tips SEO\n- Cara Membuat Blog';
}

function logChat(user, pesan, jawaban) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('ChatLog');
  sheet.appendRow([new Date(), user, pesan, jawaban]);
}

Langkah 3: Widget Chatbot HTML

Buat file HTML baru dengan nama "ChatbotWidget" dan copy kode berikut:

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Poppins',sans-serif; background:#f0f2f5; height:100vh; display:flex; flex-direction:column; }
    
    .chat-header { background:linear-gradient(135deg,#667eea,#764ba2); color:white; padding:15px 20px; display:flex; align-items:center; gap:12px; }
    .chat-header img { width:45px; height:45px; border-radius:50%; border:2px solid white; }
    .chat-header h3 { font-size:16px; font-weight:600; }
    .chat-header p { font-size:11px; opacity:0.8; }
    .status-dot { width:10px; height:10px; background:#4caf50; border-radius:50%; display:inline-block; }
    
    .chat-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px; }
    
    .message { max-width:80%; padding:12px 16px; border-radius:18px; font-size:14px; line-height:1.5; animation:fadeIn 0.3s ease; }
    .bot { background:white; color:#333; align-self:flex-start; border-bottom-left-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,0.1); }
    .user { background:linear-gradient(135deg,#667eea,#764ba2); color:white; align-self:flex-end; border-bottom-right-radius:4px; }
    
    .typing { display:flex; gap:4px; padding:12px 16px; background:white; border-radius:18px; align-self:flex-start; box-shadow:0 1px 2px rgba(0,0,0,0.1); }
    .typing span { width:8px; height:8px; background:#999; border-radius:50%; animation:bounce 1.4s infinite ease-in-out; }
    .typing span:nth-child(1) { animation-delay:0s; }
    .typing span:nth-child(2) { animation-delay:0.2s; }
    .typing span:nth-child(3) { animation-delay:0.4s; }
    
    .quick-replies { display:flex; flex-wrap:wrap; gap:8px; padding:10px 20px; }
    .quick-reply { background:white; border:1px solid #667eea; color:#667eea; padding:8px 16px; border-radius:20px; font-size:12px; cursor:pointer; transition:all 0.3s; }
    .quick-reply:hover { background:#667eea; color:white; }
    
    .chat-input { display:flex; padding:15px; gap:10px; background:white; border-top:1px solid #eee; }
    .chat-input input { flex:1; border:1px solid #ddd; border-radius:25px; padding:12px 20px; font-size:14px; outline:none; font-family:'Poppins',sans-serif; }
    .chat-input input:focus { border-color:#667eea; }
    .chat-input button { background:linear-gradient(135deg,#667eea,#764ba2); color:white; border:none; width:45px; height:45px; border-radius:50%; cursor:pointer; font-size:18px; transition:transform 0.2s; }
    .chat-input button:hover { transform:scale(1.1); }
    
    @keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
    @keyframes bounce { 0%,80%,100% { transform:scale(0); } 40% { transform:scale(1); } }
  </style>
</head>
<body>
  <div class="chat-header">
    <img src="https://ui-avatars.com/api/?name=AI&background=fff&color=667eea&bold=true" alt="AI">
    <div>
      <h3>JeniusKlik AI Assistant</h3>
      <p><span class="status-dot"></span> Online - Siap membantu Anda!</p>
    </div>
  </div>
  
  <div class="chat-messages" id="chatMessages">
    <div class="message bot">
      Halo! Saya AI Assistant JeniusKlik. Saya bisa membantu Anda menemukan tutorial, tips, dan informasi tentang Google Apps Script, web development, dan teknologi. Apa yang ingin Anda tanyakan?
    </div>
  </div>
  
  <div class="quick-replies">
    <button class="quick-reply" onclick="sendQuick('Apa itu Google Apps Script?')">Google Apps Script</button>
    <button class="quick-reply" onclick="sendQuick('Tutorial membuat aplikasi web')">Tutorial Web</button>
    <button class="quick-reply" onclick="sendQuick('Tips SEO blog')">Tips SEO</button>
    <button class="quick-reply" onclick="sendQuick('Aplikasi gratis terbaik')">Aplikasi Gratis</button>
  </div>
  
  <div class="chat-input">
    <input type="text" id="userInput" placeholder="Ketik pesan Anda..." onkeypress="if(event.key=='Enter')sendMessage()">
    <button onclick="sendMessage()">Kirim</button>
  </div>
  
  <script>
    function sendMessage() {
      var input = document.getElementById('userInput');
      var msg = input.value.trim();
      if (!msg) return;
      
      addMessage(msg, 'user');
      input.value = '';
      
      // Show typing
      var typing = document.createElement('div');
      typing.className = 'typing';
      typing.id = 'typingIndicator';
      typing.innerHTML = '<span></span><span></span><span></span>';
      document.getElementById('chatMessages').appendChild(typing);
      scrollToBottom();
      
      google.script.run
        .withSuccessHandler(function(response) {
          var ti = document.getElementById('typingIndicator');
          if (ti) ti.remove();
          addMessage(response, 'bot');
        })
        .withFailureHandler(function(err) {
          var ti = document.getElementById('typingIndicator');
          if (ti) ti.remove();
          addMessage('Maaf, terjadi kesalahan. Silakan coba lagi.', 'bot');
        })
        .getResponse(msg);
    }
    
    function sendQuick(msg) {
      document.getElementById('userInput').value = msg;
      sendMessage();
    }
    
    function addMessage(text, sender) {
      var div = document.createElement('div');
      div.className = 'message ' + sender;
      div.textContent = text;
      document.getElementById('chatMessages').appendChild(div);
      scrollToBottom();
    }
    
    function scrollToBottom() {
      var c = document.getElementById('chatMessages');
      c.scrollTop = c.scrollHeight;
    }
  </script>
</body>
</html>

Langkah 4: Deploy dan Dapatkan URL

Klik Deploy > New deployment > Pilih Web app > Execute as: Me > Who has access: Anyone > Deploy. Salin URL yang diberikan.

Langkah 5: Pasang Widget di Blogger

<div id="chatbot-container" style="position:fixed;bottom:20px;right:20px;z-index:9999;">
  <button onclick="toggleChat()" style="width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;font-size:24px;cursor:pointer;box-shadow:0 4px 15px rgba(102,126,234,0.4);transition:transform 0.3s;" id="chatToggle">
    
  </button>
  <div id="chatWindow" style="display:none;width:350px;height:500px;border-radius:15px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.2);position:absolute;bottom:70px;right:0;">
    <iframe src="URL_CHATBOT_ANDA_DI_SINI" style="width:100%;height:100%;border:none;"></iframe>
  </div>
</div>
<script>
function toggleChat() {
  var w = document.getElementById('chatWindow');
  var b = document.getElementById('chatToggle');
  if (w.style.display === 'none') {
    w.style.display = 'block';
    b.innerHTML = '✕';
  } else {
    w.style.display = 'none';
    b.innerHTML = '';
  }
}
</script>

Ganti URL_CHATBOT_ANDA_DI_SINI dengan URL dari Google Apps Script deployment.

Strategi Promosi Blog yang Efektif (Tanpa Penipuan)

1. SEO On-Page yang Benar

Gunakan kata kunci di judul, URL, dan meta deskripsi
Buat konten 900+ kata dengan gambar relevan
Gunakan heading tags (H1, H2, H3) dengan benar
Tambahkan internal linking antar artikel
Submit sitemap ke Google Search Console

2. Promosi Media Sosial

Share artikel ke Facebook, Twitter, LinkedIn
Buat thread di Twitter/X dengan link artikel
Posting di Reddit, Quora, dan forum relevan
Gunakan WhatsApp Grup untuk share konten

3. Kolaborasi dengan Blogger Lain

Guest posting di blog lain
Blog walking dan komentar di blog relevan
Exchange link dengan blogger sejenis
Buat roundup post yang menampilkan banyak blogger

4. Email Marketing

Buat newsletter mingguan
Daftarkan blog di blog directory
Kirim artikel baru ke subscriber

Tags: Chatbot AI, Blogger Widget, Google Apps Script, Chatbot Gratis, Blog AI, Widget Chat, Tutorial Blogger

JENIUSKLIK

Chatbot AI Gratis untuk Blogger: Cara Pasang Widget Chatbot di Blog Anda 2026

Chatbot AI Gratis untuk Blogger: Cara Pasang Widget Chatbot di Blog Anda 2026

Mengapa Perlu Chatbot AI di Blog?

Langkah 1: Siapkan Google Sheets Knowledge Base

Langkah 2: Buat Google Apps Script

Langkah 3: Widget Chatbot HTML

Langkah 4: Deploy dan Dapatkan URL

Langkah 5: Pasang Widget di Blogger

Strategi Promosi Blog yang Efektif (Tanpa Penipuan)

1. SEO On-Page yang Benar

2. Promosi Media Sosial

3. Kolaborasi dengan Blogger Lain

4. Email Marketing

Post a Comment for "Chatbot AI Gratis untuk Blogger: Cara Pasang Widget Chatbot di Blog Anda 2026"

Footer Menu

Tentang Penulis