# Membuat Live Chat (Widget) Live Chat (Widget) adalah fitur yang bisa menampilkan Widget berupa layanan Customer Service/Support pada Wesbite. Ini contoh tampilan Live Chat (Widget) pada Website. ![Contoh tampilan Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2F1SoBOJRlldlh8ZNBPFfK%2FContoh%20Live%20Chat.jpg?alt=media\&token=0556a1c2-35a1-4972-bcaf-a0fa61d267ba) Nah, sebelum membuat **Live Chat Widget**, pastikan Kamu sudah membuat [**Operator/CS**](https://docs.watzap.id/help/toolkit/menambahkan-operator-baru) terlebih dahulu. Jika sudah membuatnya, silahkan masuk ke menu **Live Chat (Widget)**. ![Klik Menu Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FxMRNoorAZtlkYTRoVNEC%2FMasuk%20ke%20Menu%20Live%20Chat.jpg?alt=media\&token=65b472b9-a26c-4ef8-a0bc-49a31d0e36bf) Kemudian klik tombol “**Create New Widget**“. ![Klik Create New List Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FXHcubItqgBOLSeNTCDl5%2FKlik%20New%20Widget.jpg?alt=media\&token=8a1349a0-3cbc-43ae-9b11-a8e3ca2ade17) Lalu muncul tampilan seperti ini. ![Tampilan kolom Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FVegF3AERCyO8jn6zHALX%2FTampilan%20New%20Widget.jpg?alt=media\&token=6edcb46c-662f-40ae-b761-9913945f1f0d) Dibagian Operator, Kamu bisa klik “**Choose Operator**“. Lalu Kamu bisa pilih **Operator/CS** yang ingin ditampilkan di Widget pada Website Kamu nanti. ![Pilih Operator Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2F6BbqlvGJAI0tQP3pDRbF%2FPilih%20Operator.jpg?alt=media\&token=cb4c94f2-4864-4ed7-90c5-b9ea6a6e25c3) Jika ingin menambah Operator/CS lagi, Kamu bisa klik icon “**+**“. ![Klik icon tambah Operator di Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FYyONkNHl3wbyLsNwDIe6%2FTambah%20Operator%20Baru.jpg?alt=media\&token=11609d0c-aa9e-4b61-82b3-a29ed9fd9e54) Di samping kolom **Choose Operator**, ada kolom **Prioritas**. Kolom **Prioritas** ini berfungsi untuk mengatur tingkat prioritas CS. Semakin kecil angka Prioritas nya, maka CS tersebut akan semakin di prioritas kan untuk mendapatkan Chat dari calon Customer. Jika CS yang didaftarkan ingin sama-sama diprioritaskan, Kamu bisa atur tingkat Prioritas-nya dengan angka 1. ![Prioritas Operator di Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FtsHzPkyqYjBYNbkzDpAB%2FAtur%20Skala%20Prioritas.jpg?alt=media\&token=0c5b22ce-2d16-4f4e-935b-100f1a066192) Setelah itu, di bawah bagian **Operator**, ada **Widget Settings**. ![Widget Settings di Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2F5u6Oc98xOLRo7aSLhcWm%2FMengatur%20Widget%20Settings.jpg?alt=media\&token=aab8f7b6-300d-4118-8068-9ff395f6d0d2) Kamu bisa isi kolom **Site URL** sesuai dengan situs Website yang ingin Kamu pasangkan Live Chat (Widget). ![Site URL Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FVun4IEi7MnL7TIlcmQOz%2FMasukkan%20URL%20.jpg?alt=media\&token=ae8553e1-510f-4795-8ffb-3ffc52c18e7c) Untuk kolom **Widget Title**, Kamu bisa isi dengan kalimat yang ingin Kamu tampilkan pertama kali di Widget-nya. ![Kolom Widget Tittle Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2Fsp8GoPnuuJVPoSgaW2G8%2FAtur%20Widget%20Title.jpg?alt=media\&token=579fa1d2-349a-4e73-ab83-4668828a25c6) Untuk kolom **Widget Description**, Kamu bisa isi dengan kalimat yang ingin Kamu tampilkan setelah pelanggan Kamu klik Widget-nya. ![Widget Description](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FOPCeFT2RYL9KY3gQnTcc%2FAtur%20Widget%20Description.jpg?alt=media\&token=0bc55131-7c80-47fa-b066-c327da24615a) Selanjutnya kolom **Widget Mode**. Pilihan yang **Direct Mode** itu berfungsi saat pengguna klik Widget, maka akan langsung diarahkan ke WhatsApp yang didaftarkan. Sedangkan **Reply Mode** itu berfungsi saat pengguna klik Widget, maka akan muncul tampilan untuk Reply pesan. Ketika pengguna isi reply tersebut, baru deh diarahkan ke WhatsApp yang terhubung. ![Mode Widget di Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2Fr292Ub1Dy7YvQQjRwO04%2FAtur%20Mode%20Widget.jpg?alt=media\&token=1ad2ed70-e7e4-4ea3-a820-316748753cae) Kemudian kolom **Auto Open Widget On**. Auto Open Widget On adalah fitur yang memungkinkan pengguna bisa mengatur kapan waktunya Live Chat Widget muncul di website. Di kolom ini terdapat 3 pilihan yang berbeda-beda. Ada **Instant Open**, **Delay Time**, dan **Page Scroll**. Berikut fungsi dari 3 pilihan tersebut: * **Instant Open**: Live Chat Widget langsung muncul ketika website dibuka. * **Delay Time**: Pengguna bisa mengatur delay atau durasi waktu dari Live Chat Widget muncul di website mereka ketika website dibuka. * **Page Scroll**: Live Chat Widget akan muncul jika customer melakukan scroll terlebih dahulu di website yang dipasangi Live Chat Widget. ![Auto Widget on](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2Fj3ic1N5nvqfFLM6S542W%2FAtur%20Auto%20Open%20Widget%20On.jpg?alt=media\&token=40ec56cb-d1b8-472d-a341-3e22a6897fd6) Selanjutnya bagian **Widget Style**. Kolom **Widget Style** berfungsi untuk menentukan tampilan Widget yang Kamu inginkan. ![Widget Style](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FaLC9pbDVA8ReePvdKqm1%2FAtur%20Widget%20Style.jpg?alt=media\&token=0d8a6755-8402-4726-a318-f16b19a4ba34) Kemudian untuk kolom **Widget Position** berfungsi untuk menentukan posisi Widget-nya berada. Untuk pilihan **Left Bottom of Screen** artinya Widget akan berada diposisi sebelah kiri pojok pada Website. Sedangkan pilihan yang **Right Bottom of Screen** artinya Widget akan berapa diposisi sebelah kanan pojok pada Website. ![Widget Position](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2F6yYvw5gQ5uH2BmcLhz0u%2FAtur%20Widget%20Position.jpg?alt=media\&token=c73d6115-417e-4bdc-bebf-99a6e387b66b) Lalu untuk kolom **Widget Color** fungsinya adalah untuk menentukan warna Widget. Kamu bisa pilih warna Widget sesuai dengan keinginan Kamu dengan cara klik **Select Color**. ![Widget Color](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FpFI8pPUS361IyxwtxUz4%2FPilih%20Widget%20Color.jpg?alt=media\&token=e2c22f0a-1a17-4c16-9466-b1bddaeabf11) Berikutnya untuk kolom **Text Color** fungsinya adalah untuk menentukan warna teks pada Widget. Kamu bisa pilih warna teks sesuai dengan keinginan Kamu dengan cara klik **Select Color**. ![Text Color](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2F6qATPLyCrb1l0iCi2utD%2FPilih%20Text%20Color.jpg?alt=media\&token=ae79bd80-6a84-4e4d-8ae5-d7de7d9d0464) Nah, di menu **Live Chat Widget** ini juga ada fitur **Facebook Pixel** dan **Google Tag Manager**. Jika ingin menggunakan fitur ini, Kamu bisa isi kolom datanya. ![FacebookPixel di Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FluR99vXSCdg6tA0H50OW%2FAtur%20Facebook%20Pixel%20dan%20Google%20Tag%20Manager.jpg?alt=media\&token=3cde812d-6544-4d4b-9705-26ad2a7f8735) Selanjutnya ada kolom **Show Widget**. Dikolom ini ada 3 pilihan yakni, **All**, **Desktop Only**, dan **Mobile Only**. ![Show Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FRboUelPyZpo3FoLGUQ2m%2FAtur%20Show%20Widget.jpg?alt=media\&token=1c6667d8-0c4c-46dd-a200-48439f6bf203) Keterangan: * **All**: Menampilkan Widget baik di mode Dekstop maupun Mobile. * **Dekstop Only**: Widget akan muncul hanya saat pengguna berada di mode Desktop (Laptop/PC) saja. * **Mobile Only**: Widget akan muncul hanya saat pengguna berada di mode Mobile/Smartphone saja. Lalu kolom **Open in a new tab**. ![Open Tab](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2Fvfwpb32vxO7QKTqH7fmf%2FAtur%20Open%20in%20New%20Tab.jpg?alt=media\&token=14256ccc-b3ab-47b9-9255-b6d00047f06b) * **Enable**: Setiap orang yang klik Live Chat Widget akan diarahkan ke halaman website baru. * **Disable**: Setiap orang yang klik Live Chat Widget tidak akan pindah ke halaman website baru. Lalu yang terakhir kolom **Status**. Jika Kamu menggeser toggle ke arah **Published**, maka Live Chat Widget artinya sudah siap untuk digunakan. Sedangkan, jika Kamu menggeser toggle ke arah **Draft**, maka Live Chat Widget hanya disimpan saja dan belum bisa digunakan. ![Status di Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FhqikyLLjX1L6eqY92YFZ%2FAtur%20Status.jpg?alt=media\&token=5703993e-0056-4e71-b39f-ab9945ffc7e4) Jika sudah selesai, Kamu bisa klik tombol “**Save**“. ![Klik Save di Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FbW2ePkXSwcbzir2PEqvN%2FKlik%20Tombol%20Save.jpg?alt=media\&token=d9bc16a3-2c26-4e77-8327-cfbd4e74458b) Akan muncul notifikasi “You’re done!” artinya **Live Chat Widget** Kamu sudah berhasil dibuat. Klik tombol “**OK**“. ![Klik ok di Live Chat Widget](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FLEtMfvZ6CbfqLp7ZXMdw%2FBerhasil%20Menyimpan%20Live%20Chat%20Widget.jpg?alt=media\&token=402ce637-847c-41a0-af98-d72cd5b06076) Setelah itu akan muncul Preview Live Chat Widget seperti ini.

Preview Live Chat Widget