---
description: เรียนรู้วิธีการติดตั้งวิดเจ็ตแชทเว็บบนเว็บไซต์ WordPress ของคุณ
title: ติดตั้งวิดเจ็ตแชทเว็บไซต์บน WordPress
image: https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F3f43c48b21b24f4e8b02b100c0c8fab0
---

[ใหม่🔥 เป็นคนแรกที่จะได้ลองใช้ WhatsApp Business Calling API (Open Beta)!![arrow-icon](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2Fe43213a7a9314673bd8d2060c25f9b87)](/th/whatsapp-business-calling-api)

ช่วยฉันด้วย... ⌘ 

1. [All Collections >](/th/help)
2. [ ช่องทางการ >](/th/help/channels)
3. [ วิดเจ็ตแชทบนเว็บไซต์ >](/th/help/website-chat-widget)
4. ติดตั้งวิดเจ็ตแชทเว็บไซต์บน WordPress

# ติดตั้งวิดเจ็ตแชทเว็บไซต์บน WordPress

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

JQ Lee

· 28 Aug 2025

less than a minute read

การเพิ่มวิดเจ็ตแชทเว็บลงในเว็บไซต์ WordPress ของคุณเป็นกระบวนการที่รวดเร็วและง่ายดาย ไม่จำเป็นต้องมีทักษะการเขียนโค้ดหรือความรู้ด้านเทคนิคใดๆ

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

## การตั้งค่าสำหรับการติดตั้ง

เพื่อติดตั้งวิดเจ็ตแชทเว็บบน WordPress คุณจะต้องมีสิ่งต่อไปนี้:

* เข้าถึงแดชบอร์ด WordPress ของเว็บไซต์ของคุณ
* ตัวอย่างโค้ดสำหรับวิดเจ็ตแชทบนเว็บของคุณ

หากคุณยังไม่มีชิ้นส่วนโค้ด คุณจะสร้างชิ้นส่วนเมื่อสร้าง [วิดเจ็ตแชทบนเว็บไซต์](https://respond.io/th/help/website-chat-widget/website-chat-widget-overview) หรือใช้ [ปลั๊กอินการแชทของ Facebook](https://respond.io/th/help/facebook-messenger/facebook-chat-plugin) สำหรับ [Facebook Messenger](https://respond.io/th/help/facebook-messenger/facebook-messenger-overview).

> หากคุณเชื่อมต่อช่องต่างๆ บนแพลตฟอร์ม respond.io แล้ว และคุณต้องการดึงข้อมูลโค้ดที่สร้างขึ้น ให้ทำตามคำแนะนำ [ที่นี่](https://respond.io/th/help/website-chat-widget/website-chat-widget-overview#finding%5Fthe%5Fwebsite%5Fchat%5Fwidget%5Fcode%5Fafter%5Fconnecting%5Fthe%5Fchannel)

เพื่อให้การติดตั้งสำเร็จ ตรวจสอบให้แน่ใจว่าได้กรอกโดเมนเว็บไซต์ของคุณแล้ว มีสองวิธีในการดำเนินการนี้

ไปที่ respond.io **การตั้งค่า** \> เลือก **ช่อง** \> เลือกช่องแชทในเว็บไซต์ของคุณ > คลิกกำหนดค่า > เพิ่มโดเมนเว็บไซต์ 

![](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) 

ไปที่การตั้งค่า respond.io > เลือก **Growth Widgets** \> คลิกที่วิดเจ็ตที่คุณต้องการเพิ่มไปยังเว็บไซต์ของคุณ > ในการสลับ **ทั่วไป** เพิ่มโดเมนเว็บไซต์ของคุณไปที่ฟิลด์ **โดเมนเว็บไซต์**

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

## การติดตั้งบน WordPress

**ขั้นตอนที่ 1: เข้าสู่ระบบ WordPress**

ไปที่แผงควบคุมผู้ดูแลระบบ WordPress ของเว็บไซต์ของคุณและเข้าสู่ระบบ

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

**ขั้นตอนที่ 2: ไปที่หน้าปลั๊กอิน**

จากแผงการนำทางด้านซ้าย คลิกที่ **ปลั๊กอิน** ในหน้าปลั๊กอิน ให้กดปุ่มสีน้ำเงิน **เพิ่มใหม่** ที่ด้านบนของหน้า

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

**ขั้นตอนที่ 3: เพิ่มปลั๊กอินใหม่**

ใช้แถบค้นหาค้นหาปลั๊กอิน **WPCode** คุณจะเห็นตัวเลือกมากมายบนหน้าผลลัพธ์การค้นหาที่คุณสามารถใช้ได้ แต่เราจะใช้ปลั๊กอิน "Insert Header and Footers" โดย WPCode สำหรับบทช่วยสอนนี้ กดปุ่ม **Install Now** และตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้งานปลั๊กอินแล้วเพื่อใช้งาน

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

**ขั้นตอนที่ 4: เปิดคอนโซลส่วนหัวและส่วนท้าย**

จากเมนูการนำทางด้านซ้าย คลิกที่ Code Snippets และเลือก **Header & Footer** จากเมนูย่อย

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

**ขั้นตอนที่ 5: เพิ่มสคริปต์แชทสด**

คัดลอกสคริปต์ปลั๊กอินของคุณจาก respond.io และวางลงในสคริปต์ **ในส่วนท้าย** ของหน้าคอนโซลส่วนหัวและส่วนท้าย

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

เมื่อคุณวางสคริปต์แล้ว ให้คลิกที่ปุ่มสีน้ำเงิน "**บันทึก**" ที่ด้านล่างสุดของหน้า

**เสร็จแล้ว!**

เปิดเว็บไซต์และดูปลั๊กอินแชท คุณจะพบมันในมุมขวาล่าง ตอนนี้ผู้เยี่ยมชมเว็บไซต์ของคุณสามารถสนทนากับคุณได้อย่างง่ายดาย หากคุณใช้ชิ้นส่วนโค้ดที่สร้างจากแพลตฟอร์ม respond.io คุณจะสามารถจัดการการสนทนาและอัปเดตรูปลักษณ์ของวิดเจ็ตจากแพลตฟอร์มได้

> ตอนนี้วิดเจ็ตแชทเปิดใช้งานบนเว็บไซต์ของคุณแล้ว!

## ระบุผู้ใช้ที่เข้าสู่ระบบ

> ส่วนนี้ใช้ได้เฉพาะในกรณีที่เว็บไซต์ของคุณมีฟีเจอร์การเข้าสู่ระบบของผู้ใช้

**ขั้นตอนที่ 1: เข้าสู่ระบบบัญชี WordPress**

ไปที่แดชบอร์ด WordPress ของเว็บไซต์ของคุณและลงชื่อเข้าใช้.

**ขั้นตอนที่ 2: เปิดไฟล์ส่วนหัวของธีม**

จากเมนูการนำทางด้านซ้าย คลิกที่ **รูปลักษณ์** และเลือก **Theme File Editor** ดำเนินการเลือกไฟล์ **Theme Header**

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

**ขั้นตอนที่ 3: เพิ่มรหัสผู้ใช้และรหัสชื่อที่ดึงมา**

คัดลอกโค้ดตัวอย่างด้านล่างนี้และวางลงในไฟล์ส่วนหัวของธีม เมื่อคุณวางรหัสแล้ว ให้คลิกที่ปุ่ม **อัปเดตไฟล์** ที่ด้านล่างของหน้า

> โค้ดตัวอย่างด้านล่างนี้ใช้สำหรับรับ ID ผู้ใช้ ชื่อ และนามสกุลจาก WordPress โปรดอย่าลังเลที่จะแก้ไขหากคุณต้องการรับช่องติดต่ออื่น

```html
<?php 
	$user_info = get_userdata(get_current_user_id());
?>

<script type="text/javascript">
	หน้าต่าง$wp_ID = "<?php echo $user_info->ID; ?>";
	หน้าต่าง.$wp_firstname = "<?php echo $user_info->ชื่อจริง; ?>";
	window.$wp_lastname = "<?php echo $user_info->นามสกุล; ?>";
</script>
```

\-

**ขั้นตอนที่ 4: เปิดคอนโซลส่วนหัวและส่วนท้าย**

จากเมนูการนำทางด้านซ้าย คลิกที่ **การตั้งค่า** และเลือกปลั๊กอิน **ส่วนหัว & ส่วนท้าย** จากเมนูย่อยการตั้งค่า

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

**ขั้นตอนที่ 5: เพิ่มสคริปต์ระบุตัวตนผู้ใช้ที่เข้าสู่ระบบ**

คัดลอกโค้ดตัวอย่างด้านล่างและวางลงในสคริปต์ **ในส่วนท้าย** ของหน้าคอนโซลส่วนหัวและส่วนท้าย โปรดทราบว่าควรวางสคริปต์ระบุตัวตนผู้ใช้ที่เข้าสู่ระบบ **ไว้เหนือ** สคริปต์แชทสด **เพื่อความถูกต้อง**.

> ตัวอย่างโค้ดด้านล่างนี้ใช้รหัสผู้ใช้เป็นตัวระบุและส่งต่อพร้อมกับชื่อและนามสกุล โปรดอย่าลังเลที่จะแก้ไขหากคุณต้องการรับช่องติดต่ออื่น

```html
<script>  
      หน้าต่าง.\_\_respond\_settings = {  
    	ตัวระบุ: $wp\_ID,  
        ชื่อ: $wp\_ชื่อแรก,  
        นามสกุล: $wp\_นามสกุล,    
      };  
</script>
```

เมื่อคุณวางสคริปต์แล้ว ให้คลิกที่ปุ่มสีน้ำเงิน "**บันทึก**" ที่ด้านล่างสุดของหน้า

**เสร็จแล้ว!**

เปิดเว็บไซต์และดูปลั๊กอินแชท คุณสามารถระบุผู้ใช้ที่เข้าสู่ระบบ WordPress ของคุณได้ เมื่อตัวระบุที่ผ่านไปจับคู่กับผู้ติดต่อที่มีอยู่แล้ว การสนทนาปัจจุบันจะดำเนินต่อไป

## คำถามที่พบบ่อยและการแก้ไขปัญหา

### 

WPCode

หากคุณใช้ปลั๊กอินแคช WordPress เช่น WPCode โปรดทำตามขั้นตอนเหล่านี้เพื่อให้วิดเจ็ตปรากฏขึ้นอย่างถูกต้อง

**ปิดใช้งานคุณสมบัติการย่อข้อมูลสำหรับ JavaScript**

ไปที่ **การตั้งค่า Wordpress** \> เลือก **WPCode** \> ในหน้า WPCode เลือก **การเพิ่มประสิทธิภาพไฟล์ แท็บ** \> ยกเลิกการเลือก **ย่อขนาดไฟล์ JavaScript**

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

**เพิ่มโดเมนวิดเจ็ตของเราลงในไฟล์ที่ไม่รวม Javascript**

`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) 

> เมื่อบันทึกแล้ว ขอแนะนำให้ล้างแคชใน WordPress

แชร์บทความนี้

[![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)

## 

บทความที่เกี่ยวข้อง 👩‍💻

* [ติดตั้งวิดเจ็ตแชทเว็บไซต์บน Squarespaceเรียนรู้วิธีการติดตั้งวิดเจ็ตแชทเว็บบนเว็บไซต์ Squarespace ของคุณ ](/th/help/website-chat-widget/install-on-squarespace)
* [ติดตั้งวิดเจ็ตแชทเว็บไซต์บน Joomlaเรียนรู้วิธีการติดตั้งวิดเจ็ตแชทเว็บบนเว็บไซต์ Joomla ของคุณ ](/th/help/website-chat-widget/install-on-joomla)
* [ติดตั้งวิดเจ็ตแชทเว็บไซต์บน Wixเรียนรู้วิธีการติดตั้งวิดเจ็ตแชทเว็บบนเว็บไซต์ Wix ของคุณ ](/th/help/website-chat-widget/install-on-wix)
* [ติดตั้งวิดเจ็ตแชทเว็บไซต์บน Shopifyเรียนรู้วิธีการติดตั้งวิดเจ็ตแชทเว็บบนร้านค้า Shopify ของคุณ ](/th/help/website-chat-widget/install-on-shopify)
* [การเริ่มต้นอย่างรวดเร็วของวิดเจ็ตแชทบนเว็บไซต์เพิ่มวิดเจ็ตแชทเว็บไซต์ respond.io ลงในเว็บไซต์ของคุณ ](/th/help/website-chat-widget/website-chat-widget)

ไม่พบสิ่งที่คุณกำลังมองหาใช่ไหม? 🔎

[ติดต่อฝ่ายสนับสนุน](/th/contact-us)

2025-12-05T04:03:45.470Z

help

```json
[{"@context":"https://schema.org","@type":"TechArticle","articleBody":"เรียนรู้วิธีการติดตั้งวิดเจ็ตแชทเว็บบนเว็บไซต์ WordPress ของคุณ","author":{"@type":"Person","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg","name":"JQ Lee","url":"https://respond.io/th/author"},"dateCreated":"2023-03-01T07:06:53.000Z","dateModified":"2025-08-28T08:51:51.275Z","datePublished":"2023-03-01T07:06:53.000Z","headline":"ติดตั้งวิดเจ็ตแชทเว็บไซต์บน WordPress","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png","mainEntityOfPage":"https://respond.io/th/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/th/help/website-chat-widget/install-on-wordpress"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Help","item":"https://respond.io/th/help","position":1},{"@type":"ListItem","name":"ช่องทางการ","item":"https://respond.io/th/help/channels","position":2},{"@type":"ListItem","name":"วิดเจ็ตแชทบนเว็บไซต์","item":"https://respond.io/th/help/website-chat-widget","position":3},{"@type":"ListItem","name":"ติดตั้งวิดเจ็ตแชทเว็บไซต์บน WordPress","item":"https://respond.io/th/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>"
      }
    }
  ]
}
```
