Channel

Web Chat

Copy page

Channel Web Chat menempatkan widget live chat langsung di website Anda, memungkinkan pengunjung memulai percakapan tanpa meninggalkan halaman. Tidak seperti aplikasi messaging yang mengharuskan pelanggan menginstal aplikasi tertentu, Web Chat bekerja di browser manapun -- tanpa download, tanpa buat akun. Pengunjung cukup klik tombol chat, ketik pertanyaan, dan percakapan langsung masuk ke inbox Chatmo bersama pesan dari channel lainnya.

Prasyarat

Sebelum mengatur Web Chat, pastikan Anda memiliki:

• Akun Chatmo aktif dengan akses ke dashboard
• Website tempat Anda bisa menambahkan kode HTML/JavaScript kustom
• (Opsional) AI Agent yang sudah dikonfigurasi di Chatmo jika Anda ingin respons otomatis

Membuat Channel Web Chat

1. Di sidebar Chatmo, klik Channel.

2. Di panel kategori channel di sebelah kiri, pilih Web Chat.

3. Klik untuk menambahkan channel Web Chat baru. Formulir pembuatan muncul dengan field berikut:

Field	Keterangan
Channel Name	Nama untuk mengidentifikasi channel ini secara internal (contoh: "Website Live Chat")
Form Active	Toggle untuk mengaktifkan atau menonaktifkan formulir login pra-chat
AI Agent	Dropdown dengan pencarian untuk menetapkan AI Agent untuk respons otomatis. Pilih "AI Agent Off" untuk menonaktifkan

4. Klik Create Channel.

5. Anda akan diarahkan ke halaman detail channel tempat Anda bisa mengonfigurasi tampilan widget, formulir login, dan lainnya.

Halaman Detail Channel

Setelah membuat channel Web Chat, Anda akan masuk ke halaman detail. Halaman ini memiliki empat tab utama: Overview, Builder, Code Installation, dan Settings.

Tab Overview

Tab Overview menampilkan informasi penting tentang channel Web Chat Anda:

Field	Keterangan
Widget ID	Identifier unik untuk widget Anda (read-only, bisa disalin)
Channel Name	Field teks yang bisa diedit -- ubah nama channel kapan saja
Channel Status	Toggle untuk mengatur channel sebagai Active atau Inactive
Statistics	Metrik percakapan dan pesan untuk channel ini
AI Agent	Dropdown dengan pencarian untuk menetapkan atau mengganti AI Agent

Tab Builder (Live Chat Builder)

Tab Builder adalah tempat Anda menyesuaikan tampilan dan perilaku widget chat. Tab ini memiliki tiga sub-tab: Persona, Login Form, dan Room Designer.

Persona

Sub-tab Persona mengontrol identitas yang ditampilkan kepada pengunjung di widget chat.

Pengaturan	Keterangan
Agent Name	Nama yang ditampilkan di header widget chat (contoh: "Chatmo Support")
Agent Role	Pilih dari: Sales, Technical, General, Support
Agent Photo	Upload gambar kustom atau pilih dari 6 template avatar bawaan
Company Logo	Upload logo perusahaan untuk ditampilkan di widget

Cara mengonfigurasi persona:

1. Navigasi ke tab Builder dan pilih sub-tab Persona.
2. Masukkan Agent Name yang akan dilihat pengunjung.
3. Pilih Agent Role dari dropdown.
4. Atur Agent Photo -- upload gambar sendiri atau pilih salah satu dari enam avatar bawaan.
5. Upload Company Logo untuk pengenalan brand.
6. Simpan perubahan.

Login Form

Sub-tab Login Form memungkinkan Anda mengonfigurasi formulir pra-chat yang mengumpulkan informasi pengunjung sebelum percakapan dimulai.

Field formulir yang tersedia:

Field	Status Default	Catatan
Name	Required	Aktif dan wajib secara default
Email	Required	Aktif dan wajib secara default
Phone Number	Optional	Bisa diaktifkan/dinonaktifkan
Address	Optional	Bisa diaktifkan/dinonaktifkan
Birth Date	Optional	Bisa diaktifkan/dinonaktifkan
Occupation	Optional	Bisa diaktifkan/dinonaktifkan
Company	Optional	Bisa diaktifkan/dinonaktifkan
Website	Optional	Bisa diaktifkan/dinonaktifkan
Initial Message	Optional	Memungkinkan pengunjung menjelaskan kebutuhan mereka di awal

Fitur utama:

• Drag-and-drop reordering -- susun ulang field dalam urutan apapun dengan cara drag
• Toggle on/off -- aktifkan atau nonaktifkan field individual
• Required/optional -- atur setiap field aktif sebagai wajib atau opsional

Pengaturan formulir tambahan:

Pengaturan	Keterangan
Form Enabled	Toggle utama untuk mengaktifkan atau menonaktifkan seluruh formulir login
Auto-open Chat	Otomatis membuka widget chat saat pengunjung memuat halaman
Sound Notifications	Memutar suara notifikasi saat ada pesan baru masuk

Cara mengonfigurasi login form:

1. Navigasi ke tab Builder dan pilih sub-tab Login Form.
2. Aktifkan toggle Form Enabled untuk mengaktifkan formulir pra-chat.
3. Aktifkan atau nonaktifkan field individual menggunakan toggle masing-masing.
4. Atur setiap field aktif sebagai required atau optional.
5. Drag and drop field untuk menyusun ulang sesuai kebutuhan.
6. Konfigurasi Auto-open Chat dan Sound Notifications sesuai keinginan.
7. Simpan perubahan.

Room Designer

Sub-tab Room Designer memberikan kontrol penuh atas tampilan visual jendela widget chat.

Pengaturan warna:

Pengaturan	Keterangan
Header Color	Warna header bar widget chat (color picker)
Bubble Color	Warna bubble pesan (color picker)
Background Type	Pilih antara warna solid (Color) atau gambar yang diupload (Image)
Background Color	Atur warna background area chat (tersedia saat Background Type adalah Color)
Background Image	Upload gambar background kustom (tersedia saat Background Type adalah Image)

Tipografi dan layout:

Pengaturan	Opsi
Font Size	Small, Medium, Large
Font Family	Inter, Roboto, Open Sans
Widget Position	Bottom-right, Bottom-left, dan posisi lainnya
Widget Size	Small, Medium, Large

Cara menyesuaikan desain ruangan:

1. Navigasi ke tab Builder dan pilih sub-tab Room Designer.
2. Gunakan color picker untuk mengatur Header Color dan Bubble Color sesuai brand Anda.
3. Pilih Background Type -- pilih Color untuk background solid, atau Image untuk mengupload background kustom.
4. Atur Font Size dan Font Family untuk keterbacaan yang optimal.
5. Pilih Widget Position di website Anda (bottom-right paling umum digunakan).
6. Pilih Widget Size yang paling sesuai untuk layout website Anda.
7. Simpan perubahan.

Tab Code Installation

Tab Code Installation menyediakan kode embed yang perlu Anda tambahkan untuk memasang widget chat di website.

1. Navigasi ke tab Code Installation.
2. Salin snippet kode embed yang ditampilkan di halaman.
3. Tempel kode tersebut ke HTML website Anda.

Kode embed berisi Widget ID unik Anda dan memuat script widget chat Chatmo. Formatnya kurang lebih seperti ini:

Code
<script type="text/javascript">
    window.mychat = window.mychat || {};
    window.mychat.server = 'https://app.chatmo.io/widget.js';
    window.mychat.iframeWidth = '400px';
    window.mychat.iframeHeight = '700px';
    window.mychat.accessKey = 'YOUR_ACCESS_KEY';
    (function() {
        var mychat = document.createElement('script');
        mychat.type = 'text/javascript';
        mychat.async = true;
        mychat.src = window.mychat.server;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(mychat, s);
    })();
</script>

Instalasi di Berbagai Platform

Website HTML Biasa

Tempel kode embed langsung sebelum tag penutup </body>:

Code
<!DOCTYPE html>
<html>
<head>
  <title>Website Anda</title>
</head>
<body>
  <!-- Konten website Anda -->

  <!-- Chatmo Web Chat Widget -->
  <script type="text/javascript">
      window.mychat = window.mychat || {};
      window.mychat.server = 'https://app.chatmo.io/widget.js';
      window.mychat.iframeWidth = '400px';
      window.mychat.iframeHeight = '700px';
      window.mychat.accessKey = 'YOUR_ACCESS_KEY';
      (function() {
          var mychat = document.createElement('script');
          mychat.type = 'text/javascript';
          mychat.async = true;
          mychat.src = window.mychat.server;
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(mychat, s);
      })();
  </script>
</body>
</html>

WordPress

Opsi A: Menggunakan plugin (direkomendasikan)

1. Install plugin seperti "WPCode" atau "Insert Headers and Footers" dari direktori plugin WordPress.
2. Buka halaman pengaturan plugin.
3. Tempel kode embed Chatmo ke bagian Footer Scripts.
4. Simpan.

Opsi B: Mengedit tema langsung

1. Di WordPress admin, buka Appearance > Theme File Editor.
2. Buka file footer.php.
3. Tempel kode embed tepat sebelum tag penutup </body>.
4. Klik Update File.

Shopify

1. Di Shopify admin, buka Online Store > Themes.
2. Klik Actions > Edit Code pada tema aktif.
3. Di folder Layout, buka theme.liquid.
4. Tempel kode embed tepat sebelum tag penutup </body>.
5. Klik Save.

Wix

1. Di Wix editor, klik Settings di menu kiri.
2. Buka Custom Code di bagian Advanced.
3. Klik Add Custom Code.
4. Tempel kode embed Chatmo.
5. Atur placement ke Body - end dan terapkan ke All pages.
6. Klik Apply dan publish website Anda.

React / Next.js

Tambahkan script menggunakan hook useEffect di komponen layout Anda:

Code
import { useEffect } from 'react';

function ChatmoWidget() {
  useEffect(() => {
    window.mychat = window.mychat || {};
    window.mychat.server = 'https://app.chatmo.io/widget.js';
    window.mychat.iframeWidth = '400px';
    window.mychat.iframeHeight = '700px';
    window.mychat.accessKey = 'YOUR_ACCESS_KEY';

    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = window.mychat.server;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

export default ChatmoWidget;

Sertakan <ChatmoWidget /> di komponen layout utama Anda.

Google Tag Manager

1. Di Google Tag Manager, buat Tag baru.
2. Pilih Custom HTML sebagai tipe tag.
3. Tempel kode embed Chatmo.
4. Atur trigger ke All Pages.
5. Simpan dan publish container.

Tab Settings

Tab Settings menyediakan opsi konfigurasi lanjutan untuk channel Web Chat.

Akses dengan menavigasi ke tab Settings di halaman detail channel. Opsi yang tersedia mencakup pengaturan level channel yang mengontrol perilaku dan fitur lanjutan untuk widget Web Chat.

AI Agent dan Auto-Reply

Semua respons otomatis di Web Chat ditangani melalui sistem AI Agent.

Cara kerjanya:

1. Buat dan konfigurasi AI Agent di bagian AI Agent pada dashboard Chatmo.
2. Tetapkan AI Agent ke channel Web Chat Anda menggunakan dropdown di tab Overview atau saat pembuatan channel.
3. AI Agent menangani penyambutan pengunjung, menjawab pertanyaan umum, dan mengelola percakapan saat tidak ada agen manusia yang tersedia.
4. Untuk menonaktifkan respons otomatis, pilih AI Agent Off dari dropdown.

Preview Widget

Setelah mengonfigurasi pengaturan Builder, Anda bisa melihat preview tampilan widget kepada pengunjung.

Preview menampilkan semua konfigurasi Persona, Login Form, dan Room Designer sehingga Anda bisa memverifikasi tampilan sebelum menginstal widget di website.

Pengujian Widget

Setelah menginstal kode embed di website, verifikasi bahwa semuanya berfungsi dengan benar:

1. Buka website Anda di jendela browser incognito atau private untuk menghindari versi cache.
2. Periksa tombol chat -- pastikan muncul di posisi yang benar (sesuai pengaturan Widget Position).
3. Klik tombol chat untuk membuka widget.
4. Verifikasi login form -- jika diaktifkan, isi formulir pra-chat dan submit.
5. Kirim pesan percobaan dari widget.
6. Periksa inbox Chatmo -- pastikan pesan percobaan muncul.
7. Balas dari Chatmo dan verifikasi respons muncul di widget di website Anda.
8. Uji di mobile -- buka website di ponsel atau resize browser untuk memeriksa perilaku responsif.

Best Practices

1. Buat formulir login tetap minimal -- Name dan Email biasanya sudah cukup. Setiap field wajib tambahan mengurangi jumlah pengunjung yang memulai percakapan.

2. Sesuaikan dengan brand -- Gunakan Room Designer untuk menyelaraskan warna, font, dan posisi widget dengan desain website Anda. Tampilan yang konsisten membangun kepercayaan.

3. Pilih posisi widget yang tepat -- Bottom-right adalah posisi paling umum dan diharapkan. Pastikan tombol chat tidak menimpa elemen penting seperti tombol "Beli Sekarang" atau navigasi.

4. Gunakan persona agen yang mudah dikenali -- Atur Agent Name yang ramah dan foto profesional atau avatar. Pengunjung lebih banyak berinteraksi dengan widget yang terasa personal.

5. Konfigurasi AI Agent Anda -- AI Agent yang ditetapkan memastikan pengunjung mendapat respons langsung bahkan saat agen manusia sedang offline. Ini mencegah leads pergi tanpa jawaban.

6. Uji di berbagai perangkat -- Selalu verifikasi widget di desktop, tablet, dan mobile. Periksa bahwa font terbaca, warna ditampilkan dengan benar, dan widget tidak mengganggu layout website.

Langkah Selanjutnya

• Lihat Ringkasan Channel untuk melihat semua opsi integrasi yang tersedia.
• Pelajari cara mengelola percakapan masuk di bagian Fitur Chat.
• Hubungkan channel tambahan seperti WhatsApp atau Instagram untuk cakupan multi-channel.