WordPress客服插件代碼實現(xiàn)指南

來自：素雅營銷研究院

方知筆記

2025年05月29日 04:29

一、WordPress客服插件概述

WordPress客服插件是網(wǎng)站與訪客建立即時溝通渠道的重要工具，通過簡單的代碼實現(xiàn)，可以為網(wǎng)站添加專業(yè)的在線客服功能。這類插件通常包含即時聊天、消息記錄、多客服分配等核心功能，能夠顯著提升網(wǎng)站的用戶體驗和轉(zhuǎn)化率。

二、基礎(chǔ)客服插件代碼實現(xiàn)

以下是一個簡單的WordPress客服插件基礎(chǔ)代碼框架：

/*
Plugin Name: 簡易網(wǎng)站客服
Description: 為WordPress網(wǎng)站添加浮動客服按鈕
Version: 1.0
Author: Your Name
*/

function simple_customer_service() {
echo '<div id="cs-float-btn" style="position:fixed; right:20px; bottom:20px; z-index:9999;">
<a href="javascript:void(0);" style="display:block; width:60px; height:60px; background:#1E88E5; border-radius:50%; text-align:center; line-height:60px; color:#fff; font-size:24px;">
<i class="dashicons dashicons-format-chat"></i>
</a>
</div>';
}
add_action('wp_footer', 'simple_customer_service');

三、高級功能代碼擴(kuò)展

1. 添加客服聊天窗口

function cs_chat_window() {
echo '<div id="cs-chat-window" style="display:none; position:fixed; right:20px; bottom:80px; width:300px; height:400px; background:#fff; border-radius:5px; box-shadow:0 0 15px rgba(0,0,0,0.1); z-index:9998;">
<div style="padding:10px 15px; background:#1E88E5; color:#fff; border-radius:5px 5px 0 0;">
<h3 style="margin:0; font-size:16px;">在線客服</h3>
<span id="cs-close" style="float:right; cursor:pointer;">×</span>
</div>
<div id="cs-messages" style="height:300px; padding:10px; overflow-y:auto;"></div>
<div style="padding:10px; border-top:1px solid #eee;">
<input type="text" id="cs-message" style="width:70%; padding:8px;" placeholder="輸入消息...">
<button id="cs-send" style="width:25%; padding:8px; background:#1E88E5; color:#fff; border:none;">發(fā)送</button>
</div>
</div>

<script>
jQuery(document).ready(function($){
$("#cs-float-btn").click(function(){
$("#cs-chat-window").toggle();
});

$("#cs-close").click(function(){
$("#cs-chat-window").hide();
});

$("#cs-send").click(sendMessage);
$("#cs-message").keypress(function(e){
if(e.which == 13) sendMessage();
});

function sendMessage() {
var msg = $("#cs-message").val();
if(msg.trim() != "") {
$("#cs-messages").append("<p><strong>您:</strong> "+msg+"</p>");
$("#cs-message").val("");
}
}
});
</script>';
}
add_action('wp_footer', 'cs_chat_window');

2. 添加客服工作時間判斷

function cs_check_working_hours() {
$current_hour = date('G');
$working_hours_start = 9; // 早上9點
$working_hours_end = 18;  // 晚上6點

if($current_hour >= $working_hours_start && $current_hour < $working_hours_end) {
return true;
} else {
echo '<div id="cs-notice" style="position:fixed; right:20px; bottom:80px; padding:10px 15px; background:#f8f8f8; border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,0.1); z-index:9997;">
當(dāng)前是非工作時間，請留言，我們將在工作時間盡快回復(fù)您。
</div>';
return false;
}
}