---
description: Pelajari cara memasang widget obrolan web di situs web WordPress Anda.
title: Instal Widget Obrolan Situs Web di WordPress
image: https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F3f43c48b21b24f4e8b02b100c0c8fab0
---

[Baru🔥 Jadilah orang pertama yang mencoba WhatsApp Business Calling API (Beta Terbuka)!![arrow-icon](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2Fe43213a7a9314673bd8d2060c25f9b87)](/id/whatsapp-business-calling-api)

Bantu saya dengan... ⌘ 

1. [All Collections >](/id/help)
2. [ Saluran >](/id/help/channels)
3. [ Widget Obrolan Situs Web >](/id/help/website-chat-widget)
4. Instal Widget Obrolan Situs Web di WordPress

# Instal Widget Obrolan Situs Web di WordPress

![Avatar](https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg)

JQ Lee

· 28 Aug 2025

3 menit baca

Menambahkan widget obrolan web ke situs web WordPress Anda adalah proses yang cepat dan mudah. Tidak memerlukan keterampilan coding atau pengetahuan teknis apa pun.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png?fm=jpg&q=80&w=500) 

## Menyiapkan Instalasi

Untuk memasang widget obrolan web di WordPress, Anda memerlukan hal berikut:

* Akses ke Dasbor WordPress situs web Anda.
* Cuplikan kode untuk widget obrolan web Anda.

Jika Anda belum memiliki kode snippet, Anda akan menghasilkan satu saat membuat [Widget Obrolan Situs Web](https://respond.io/id/help/website-chat-widget/website-chat-widget-overview) atau menggunakan [Plugin Obrolan Facebook](https://respond.io/id/help/facebook-messenger/facebook-chat-plugin) untuk [Facebook Messenger](https://respond.io/id/help/facebook-messenger/facebook-messenger-overview).

> Jika Anda memiliki saluran yang sudah terhubung pada platform respond.io dan Anda perlu mengambil cuplikan kode yang dihasilkan, ikuti petunjuk [di sini](https://respond.io/id/help/website-chat-widget/website-chat-widget-overview#finding%5Fthe%5Fwebsite%5Fchat%5Fwidget%5Fcode%5Fafter%5Fconnecting%5Fthe%5Fchannel).

Agar instalasi berhasil, pastikan domain situs web Anda diisi. Ada dua cara untuk melakukan ini.

Buka respond.io **Pengaturan** \> pilih **Saluran** \> pilih saluran obrolan situs web Anda > klik konfigurasikan > tambahkan domain situs web. 

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/1e7uaH6kDm1O7pGveCSLtj/cd6e069ed2d3ba023349b508560e3fab/screen-shot-2023-02-14-at-7-47-59-pm.png?fm=jpg&q=80&w=640) 

Buka pengaturan respond.io > pilih **Widget Pertumbuhan** \> klik widget yang ingin Anda tambahkan ke situs web Anda > pada tombol alih **Umum** , tambahkan domain situs web Anda ke kolom **Domain Situs Web** .

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3p3pQU8wHpzk061bqvS0Tr/65706ba2cdd4a08d5972ca1c7f0fe11f/chat-widget-settings.png?fm=jpg&q=80&w=640) 

## Menginstal di WordPress

**Langkah 1: Masuk ke WordPress**

Navigasi ke Dasbor Admin WordPress situs web Anda dan masuk.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7BEtXv2z3DbKUr6hji7TOm/aeb0a76500168de0c4db1758459f36d4/install-webchat-on-word-press.png?fm=jpg&q=80&w=640) 

**Langkah 2: Navigasi ke Halaman Plugin**

Dari panel navigasi kiri, klik **Plugin**. Pada Halaman Plugin, tekan tombol biru **Tambah Baru** di bagian atas halaman.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/4yyIZmSrxmxdrhKGl8VcOl/b9881e62aab33064babb824daffbfe66/install-webchat-on-word-press-2.png?fm=jpg&q=80&w=640) 

**Langkah 3: Tambahkan Plugin Baru**

Gunakan bilah pencarian, cari plugin **WPCode** . Anda akan melihat banyak pilihan pada halaman hasil pencarian yang dapat Anda gunakan, tetapi kami akan menggunakan plugin "Sisipkan Header dan Footer" oleh WPCode untuk tutorial ini. Tekan tombol **Instal Sekarang** dan pastikan Anda mengaktifkan plugin untuk menggunakannya.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/5GGHqfES2lXgv5NzIoFz1P/15f02cef289ef90f490c4aecd1601ce7/add_new_plugin.png?fm=jpg&q=80&w=640) 

**Langkah 4: Buka Konsol Header dan Footer**

Dari menu navigasi sebelah kiri, klik pada Cuplikan Kode dan pilih **Header & Footer** dari submenu.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/2DwpPlV3Td8AqC1JJByNz0/7806704ac1df123f86c8a1ecbe5a5afb/Screenshot_2025-04-09_at_5.34.35_PM.png?fm=jpg&q=80&w=640) 

**Langkah 5: Tambahkan Skrip Obrolan Langsung**

Salin skrip plugin Anda dari respond.io dan tempel ke bagian **Skrip di Footer** di halaman konsol Header dan Footer.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/Ian351FEXVFMTGKlYGxmH/861c265623900ca5302d72ea4a4606ed/wpcode-live_chat_script.png?fm=jpg&q=80&w=640) 

Setelah Anda menempelkan skrip, klik tombol biru "**Simpan**" di bagian bawah halaman.

**Selesai!**

Buka situs web dan periksa plugin obrolan. Anda akan menemukannya di sudut kanan bawah. Sekarang pengunjung situs web Anda dapat mengobrol dengan Anda dengan mudah. Jika Anda menggunakan cuplikan kode yang dihasilkan dari platform respond.io, Anda akan dapat mengelola percakapan dan memperbarui tampilan widget dari platform.

> Widget obrolan sekarang aktif di situs web Anda!

## Identifikasi Pengguna yang Masuk

> Bagian ini hanya berlaku jika situs web Anda memiliki fitur login pengguna.

**Langkah 1: Masuk ke akun WordPress**

Navigasi ke Dasbor Admin WordPress situs web Anda'dan masuk.

**Langkah 2: Buka File Header Tema**

Dari menu navigasi sebelah kiri, klik **Tampilan** dan pilih **Editor Berkas Tema**. Lanjutkan untuk memilih file **Theme Header** .

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/64VlcD24OVD9CUaFiK9U5B/91eb153aabead2673c1674395a0605a1/identify-logged-in-users.png?fm=jpg&q=80&w=640) 

**Langkah 3: Tambahkan ID Pengguna dan kode nama yang diambil**

Salin kode contoh di bawah ini dan tempel ke berkas Header Tema. Setelah Anda menempelkan kode, klik tombol **Perbarui Berkas** di bagian bawah halaman.

> Contoh kode di bawah ini adalah untuk mendapatkan ID pengguna, nama depan dan nama belakang dari WordPress. Jangan ragu untuk mengubahnya jika Anda ingin mendapatkan kolom kontak lainnya.

```html
<?php 
	$user_info = dapatkan_data_pengguna(dapatkan_id_pengguna_saat_ini());
?>

<script type="text/javascript">
	jendela.$wp_ID = "<?php echo $user_info->ID; ?>";
	jendela.$wp_firstname = "<?php echo $user_info->nama_depan; ?>";
	jendela.$wp_lastname = "<?php echo $user_info->nama_belakang; ?>";
</script>
```

"

**Langkah 4: Buka Konsol Header dan Footer**

Dari menu navigasi sebelah kiri, klik **Pengaturan** dan pilih plugin **Header & Footer** dari submenu pengaturan.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7gZgsdh0AM40EiyW1iCfQR/a5102c94de84f92388de60fe9b6f3602/wpcode-open_console.png?fm=jpg&q=80&w=640) 

**Langkah 5: Tambahkan Skrip Identifikasi Pengguna yang Masuk**

Salin kode contoh di bawah ini dan tempel ke bagian Skrip **di Footer** pada halaman konsol Header dan Footer. Perlu diperhatikan, skrip identifikasi pengguna yang login  harus diletakkan di atas skrip Obrolan Langsung .

> Kode contoh di bawah ini menggunakan ID pengguna sebagai pengenal dan diteruskan bersama nama depan dan nama belakang. Jangan ragu untuk mengubahnya jika Anda ingin mendapatkan kolom kontak lainnya.

```html
<script>  
      jendela.\_\_respond\_settings = {  
    	pengenal: $wp\_ID,  
        namadepan: $wp\_namadepan,  
        namabelakang: $wp\_namabelakang,    
      };  
</script>
```

Setelah Anda menempelkan skrip, klik tombol biru "**Simpan**" di bagian bawah halaman.

**Selesai!**

Buka situs web dan periksa plugin obrolan. Pengguna yang masuk ke WordPress Anda dapat diidentifikasi. Setelah pengenal yang diberikan cocok dengan kontak yang ada, percakapan saat ini akan dilanjutkan.

## FAQ dan Pemecahan Masalah

### 

Kode WP

Jika Anda menggunakan plugin cache WordPress seperti WPCode, lakukan langkah-langkah ini agar widget muncul dengan benar.

**Nonaktifkan fitur pengecilan data untuk JavaScript**

Buka **Pengaturan Wordpress** \> Pilih **WPCode** \> Pada halaman WPCode, pilih tab **Pengoptimalan File** \> hapus centang **Minimalkan file JavaScript**

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7u1DdW6UTB1nHdrE0QlgIB/f3412a5f90adf94cab31a67c4a42d108/css-and-js-files-minified-source-wp-rocket.png?fm=jpg&q=80&w=640) 

**Tambahkan domain widget kami ke File Javascript yang Dikecualikan**

`https://cdn.respond.io/webchat/widget/(.*).js`

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3TcEXrKx1zKh7IhvT4G7Cp/6308494d1b35b918e250d3ebc387b87e/wp-rocket-javascript-excluded-files.png?fm=jpg&q=80&w=640) 

> Setelah disimpan, disarankan untuk menghapus cache di WordPress.

Bagikan artikel ini

[![Telegram](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F44daca77a4844f0c8fd29040ddeba057?width=22)](https://api.whatsapp.com/send?text=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Facebook](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/fff57eeb01160bc604392f519b4f3461ca16f0fa1b6a587b20b142cdf1ad0ba7?placeholderIfAbsent=true&width=22)](https://www.facebook.com/sharer/sharer.php?u=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Linkedin](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/7aaf8d87b5410844d83e06a4ed663e4f551b8c5ef51dbb20a8ff064a1eed9a0f?placeholderIfAbsent=true&width=22)](https://www.linkedin.com/sharing/share-offsite/?url=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Twitter](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F4e03e02422a94e8eab9b8b41457c2371?width=22)](http://twitter.com/share?url=https://respond.io/help/website-chat-widget/install-on-wordpress)

## 

Artikel terkait 👩‍💻

* [Instal Widget Obrolan Situs Web di SquarespacePelajari cara memasang widget obrolan web di situs web Squarespace Anda. ](/id/help/website-chat-widget/install-on-squarespace)
* [Instal Widget Obrolan Situs Web di JoomlaPelajari cara memasang widget obrolan web di situs web Joomla Anda. ](/id/help/website-chat-widget/install-on-joomla)
* [Instal Widget Obrolan Situs Web di WixPelajari cara memasang widget obrolan web di situs web Wix Anda. ](/id/help/website-chat-widget/install-on-wix)
* [Instal Widget Obrolan Situs Web di ShopifyPelajari cara memasang widget obrolan web di toko Shopify Anda. ](/id/help/website-chat-widget/install-on-shopify)
* [Mulai Cepat Widget Obrolan Situs WebTambahkan Widget Obrolan Situs Web respond.io ke situs Anda. ](/id/help/website-chat-widget/website-chat-widget)

Tidak dapat menemukan yang Anda cari? 🔎

[Hubungi Dukungan](/id/contact-us)

2025-12-05T03:59:42.437Z

help

```json
[{"@context":"https://schema.org","@type":"TechArticle","articleBody":"Pelajari cara memasang widget obrolan web di situs web WordPress Anda.","author":{"@type":"Person","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg","name":"JQ Lee","url":"https://respond.io/id/author"},"dateCreated":"2023-03-01T07:06:53.000Z","dateModified":"2025-08-28T08:51:51.275Z","datePublished":"2023-03-01T07:06:53.000Z","headline":"Instal Widget Obrolan Situs Web di WordPress","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png","mainEntityOfPage":"https://respond.io/id/help/website-chat-widget","publisher":{"@type":"Organization","logo":"https://respond.io/favicon/favicon.svg","name":"respondio"},"thumbnailUrl":"https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png","url":"https://respond.io/id/help/website-chat-widget/install-on-wordpress"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Help","item":"https://respond.io/id/help","position":1},{"@type":"ListItem","name":"Saluran","item":"https://respond.io/id/help/channels","position":2},{"@type":"ListItem","name":"Widget Obrolan Situs Web","item":"https://respond.io/id/help/website-chat-widget","position":3},{"@type":"ListItem","name":"Instal Widget Obrolan Situs Web di WordPress","item":"https://respond.io/id/help/website-chat-widget/install-on-wordpress","position":4}]}]
{
  "@context": "http://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "WPCode",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>If you are using a WordPress cache plugin such as WPCode, take these steps so that the widget appears correctly.</p><p><b>Disable data-minify feature for JavaScript</b></p><p>Go to <b>Wordpress Settings</b> > Select <b>WPCode</b> > On WPCode page, select <b>File Optimization</b> tab > untick <b>Minify JavaScript files</b></p> <p><b>Add our widget domain to the Javascript Excluded Files</b></p><p><code>https://cdn.respond.io/webchat/widget/(.*).js</code></p> <blockquote><p>Once saved, it is recommended to clear the cache in WordPress.</p></blockquote><p></p>"
      }
    }
  ]
}
```
