0 cookietidak ada yang dimuat sebelum diklikanggota tim tanpa batasbalas dari slack, discord, atau ponselmulauncher <4kbtanpa pajak per seat

minta akses awal

/blog / panduan

tambahkan live chat ke situs html biasa

· oleh kuba · 6 menit baca

Jendela terminal dengan simbol tag kode berwarna hijau, dan kucing Spookat mengintip dari tepi atasnya.

Situs HTML biasa hanya butuh satu baris untuk punya live chat: sebuah tag script sebelum </body>. Panduan ini menunjukkan di mana baris itu ditaruh di halaman yang ditulis tangan dan di situs yang dibuat dengan static site generator, semua opsi yang bisa kamu atur di sebelahnya, dan cara mengecek di browser bahwa tidak ada yang dimuat sebelum klik.

barisnya

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Site key kamu ada di halaman instalasi dashboard, sudah terisi di snippet, lengkap dengan tombol salin. Key ini diawali site_live_ dan bersifat publik: toh key ini ada di source halamanmu, dan hanya berfungsi di domain yang kamu daftarkan.

File yang dimuatnya adalah launcher: sebuah tombol, style-nya, dan tampilan yang kamu publish di dashboard. Ukurannya di bawah 4 kb (gzip), dan build-nya gagal kalau lebih dari itu. File ini membuat 0 request ke API kami dan tidak memasang cookie. Panel chat dan koneksi ke server kami baru dimuat saat pengunjung mengklik.

Baru mengenal topik ini? Panduan utama menjelaskan berapa biaya widget chat untuk sebuah halaman dan apa saja yang perlu diperhatikan.

di mana tempatnya

Tepat sebelum tag penutup </body>:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My site</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <p>Everything else on your page.</p>

    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>

Kenapa di situ, dan kenapa async:

  • Di akhir body, tag ini tidak menahan apa pun di atasnya. Browser sudah melihat kontenmu saat sampai di tag ini.
  • async memberi tahu browser untuk mengambil file di latar belakang dan menjalankannya begitu tiba, tanpa menghentikan halaman. Biarkan tetap ada.

setiap halaman, sekali

Chat sebaiknya ada di setiap halaman tempat pengunjung mungkin punya pertanyaan, dan biasanya itu berarti semuanya. Cara menaruhnya tergantung bagaimana situsmu dibuat.

Halaman yang ditulis tangan. Tempel tag-nya di setiap file .html. Cari </body> di folder untuk menemukan semuanya. Kalau nanti kamu menambah halaman, salin halaman yang sudah ada sebagai titik awal dan tag-nya ikut terbawa.

Footer bersama. Kalau halamanmu memuat file footer yang sama (server-side include, include PHP, partial template), taruh tag-nya di situ sekali saja.

Static site generator. Taruh di layout dasar, template yang diturunkan ke setiap halaman:

generator file
Jekyll _layouts/default.html, atau _includes/footer.html
Hugo layouts/_default/baseof.html, atau partial footer
Eleventy layout dasarmu di _includes/
Astro komponen layout dasar
Pandoc, script buatan sendiri template HTML yang kamu berikan

Tidak perlu khawatir kalau ada halaman yang akhirnya punya tag dua kali: launcher mengecek apakah dirinya sudah ada di halaman, dan salinan kedua tidak melakukan apa-apa. Tapi tetap saja itu request yang terbuang, jadi sisakan satu.

mengaturnya lewat kode

Tampilan yang kamu pilih di dashboard sudah terbawa di dalam launcher, jadi satu baris di atas adalah seluruh instalasinya. Kalau kamu lebih suka menyimpan pengaturan di HTML, set window.Spookat di script di atas tag:

<script>
  window.Spookat = {
    style: "clean",
    font: "system",
    accent: "#2F6FEB",
    side: "right",
    greeting: "hi. questions about an order? ask here.",
    lang: "en"
  };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Kalau halaman dan dashboard berbeda, yang menang halamannya. Fungsi setiap key:

key nilainya fungsinya
style salah satu dari 8 style tampilannya. brutal, clean, glass, soft, terminal, paper, retro, swiss
font "system" atau salah satu dari 17 font yang di-host font widget. system tidak mengunduh apa pun; font yang di-host dimuat dari CDN kami setelah klik, tidak pernah dari Google
accent "#RRGGBB" warna brand kamu. Warna teks di atasnya dipilih berdasarkan kontras
side "right" atau "left" posisi launcher
greeting teks, maksimal 200 karakter pesan pertama yang dilihat pengunjung. Kosong berarti bawaan style
label teks, maksimal 40 karakter mengubah tombol bulat jadi pil berisi teks ini
lang kode bahasa, seperti "en" atau "pl" bahasa widget. Default: bahasa browser pengunjung, lalu Inggris
user { id, sig }, mulai cool guy siapa yang sedang login, ditandatangani di servermu

Dokumentasi berisi referensi lengkap, termasuk cara menandatangani user.

situs multibahasa

Kalau situsmu punya satu folder per bahasa (/en/, /pl/), set lang per folder supaya widget mengikuti halaman, bukan browser. Widget ini bisa 12 bahasa. Timmu melihat bahasa pengunjung di setiap chat.

launcher yang menyampaikan sesuatu

Situs sederhana sering punya satu pertanyaan jelas yang biasa ditanyakan pengunjung: “bisa kirim ke…”, “bisa booking…”. label seperti "questions? ask a human" mengubah ikon jadi pil kecil yang mengatakannya. Buat singkat; di HP pil ini juga ada di pojok.

yang didapat pengunjung

Tombol di pojok, dengan warnamu. Mengkliknya membuka panel dengan sapaanmu dan satu baris yang bilang bahwa manusia yang membalas. Mereka mengetik; pesannya masuk ke thread Slack atau Discord kamu, atau ke inbox kami dan aplikasi ponselnya; balasanmu kembali ke widget. Kalau mereka pergi sebelum kamu membalas dan meninggalkan email, cool guy ke atas mengirimkan balasan lewat email. Chat tetap tersimpan di perangkat mereka saat pindah halaman dan di kunjungan berikutnya, sampai riwayatnya kedaluwarsa (30 hari di broke af).

cek

Buka situsmu di jendela private, supaya tidak ada cache atau penyimpanan lama yang ikut campur. Lalu buka DevTools (F12, atau klik kanan lalu Inspect).

  1. Network. Centang “Disable cache”, reload, dan ketik spookat di filter. Satu request: launcher dari cdn.spookat.com, sekitar 2 kb yang ditransfer. Dua, keduanya dari cdn.spookat.com, kalau kodemu mengatur style di window.Spookat yang berbeda dari yang kamu publish. Tidak ada yang ke api.spookat.com.
  2. Application (Storage di Firefox). Cookie: tidak ada dari Spookat. Local storage: belum ada apa-apa. Satu key baru muncul setelah kamu mengirim pesan pertama; key itu menyimpan chat kamu di perangkat tersebut.
  3. Klik launcher. Sekarang script panel dan stylesheet style kamu dimuat dari CDN, lalu chat terhubung. Kirim pesan tes dan lihat pesannya sampai di Slack atau Discord.

Kalau launcher tidak muncul:

  • Tidak ada apa-apa di tab Network. Tag-nya tidak ada di halaman ini, ada di dalam komentar HTML, atau langkah build kamu menghapusnya. Lihat source halaman dan cari spookat.
  • Request-nya gagal. Key dengan panjang yang salah dapat 404 dari CDN. Cocokkan key di URL dengan yang ada di dashboard.
  • Launcher muncul dengan tampilan default dan tidak pernah terhubung. Satu karakter yang salah di key tetap memuat launcher. Cocokkan key dengan yang ada di dashboard.
  • Launcher muncul, tapi chat tidak terhubung. Kamu berada di domain lain dari yang didaftarkan: file lokal, localhost, atau host staging. Chat hanya terhubung di domainmu dan subdomainnya.
  • Content Security Policy memblokirnya. Console menyebutkan direktifnya. Izinkan https://cdn.spookat.com untuk script, style, dan font, wss://api.spookat.com untuk koneksinya, serta data: untuk gambar, karena logo dan foto anggota tim adalah gambar data:. Launcher juga menyisipkan satu blok <style> kecil ke shadow root-nya sendiri, jadi style-src harus mengizinkan inline style untuknya. Kalau kamu mengatur window.Spookat di script inline, beri script itu nonce atau hash dari policy-mu.

yang tidak perlu ditambahkan

Situs HTML biasa cepat karena tidak ada yang menghalangi. Pertahankan begitu:

  • Jangan pakai tag manager hanya untuk chat. Itu script yang memuat script, dan bobotnya lebih besar dari launcher.
  • Jangan preload atau prefetch panel. Itu memindahkan unduhan panel ke depan klik, untuk setiap pengunjung.
  • Jangan main-main dengan defer plus async. async saja sudah tepat untuk tag ini.
  • Jangan pakai wrapper yang membuka chat setelah beberapa detik. Itu memuat seluruh panel untuk semua orang dan menutupi halamanmu di HP. Sapaan sudah melakukan tugas yang sama saat seseorang benar-benar membuka chat.

hosting tidak berpengaruh

GitHub Pages, Netlify, Cloudflare Pages, folder FTP di shared hosting, server di dalam lemari: tag-nya HTML biasa, jadi berfungsi di mana pun file kamu disajikan. Tanpa build, tanpa package, tanpa kode server.

hubungkan balasannya

Langkah terakhir: hubungkan Slack atau Discord di dashboard dan pilih channel, atau lewati dan jawab di inbox kami dan aplikasi ponselnya. Setiap pengunjung mendapat thread sendiri, siapa pun di channel bisa membalas, dan tidak ada biaya per seat. Biayanya $4.99 per bulan per situs di broke af.

checklist

  • Satu tag, dengan async, sebelum </body>, di setiap halaman (atau sekali di layout bersama).
  • Opsional: window.Spookat di atasnya, kalau pengaturan kamu simpan di kode.
  • Sudah dicek di jendela private: satu request sebelum klik (dua, keduanya dari cdn.spookat.com, kalau kodemu mengatur style yang tidak kamu publish), tanpa cookie.
  • Pesan tes dari widget sudah sampai di Slack atau Discord.

Trial-nya 14 hari dan tidak perlu kartu. Tempel barisnya, dan situs statismu bisa menjawab pertanyaan.

suka? masuk sebelum peluncuran.

undangan dikirim bertahap. lalu gratis 14 hari, tanpa kartu.