本文约 4,456 字，预计阅读 12 分钟。文中命令与配置均经过实测，可直接参考执行。
引言：跨时区是外贸客服最大的结构性难题
国内站做在线客服，只要保证工作时间有人就行。外贸站不一样：你的工作时间是客户的深夜，客户的工作时间你在睡觉。所以外贸客服的设计目标不是”随时有人在线”，而是”在无人值守时也能把访客转化成可跟进的线索”。这意味着客服组件要承担三个职责：在线时提供即时沟通、离线时明确告知响应时间、以及无论如何都留一个异步联系方式。很多站点只做了第一步，结果客户点开对话框没人回，直接流失。
原理分析：客服方案的三个层次
| 层次 | 方案 | 实时性 | 成本 |
|---|---|---|---|
| 即时 | WhatsApp / 在线聊天插件 | 高 | 低 |
| 异步 | 询盘表单 + 邮件 | 低 | 低 |
| 半自动 | 离线留言 + 自动回复 | 中 | 中 |
WhatsApp 在外贸场景的地位特殊：它在欧洲、南美、中东、印度是主流通讯工具，客户更愿意用它而不是邮件。技术上接入很简单，核心是 https://wa.me/<号码> 这个官方深链，?text= 参数可以预填消息内容，让客户一键发出”我对 XX 产品感兴趣”。
WordPress 侧现成方案有：Click to Chat（wordpress.org 官方目录插件，支持 WhatsApp、Telegram、Facebook Messenger 等多渠道）、Joinchat（前身为 WP Social Chat，专注 WhatsApp）。两者都支持按页面显示/隐藏、自定义问候语与触发时机。如果要更精细的控制（比如按客户时区判断在线状态），可以自己写一段挂在 wp_footer 的代码。
保姆级实操
步骤 1：准备 WhatsApp Business 账号。 用公司手机号注册 WhatsApp Business，填写企业名称、简介、营业时间与地址。不要用个人号，Business 资料本身就是一个信任背书。
步骤 2：构造深链。 号码用国际格式，去掉 + 和空格；text 参数要 URL 编码。
function mimangfei_whatsapp_link( $product_name = '' ) {
$phone = '+86 138 0000 0000';
$number = preg_replace( '/[^0-9]/', '', $phone ); // 8613800000000
$text = $product_name
? sprintf( 'Hello, I am interested in %s. Could you send a quotation?', $product_name )
: 'Hello, I would like to know more about your products.';
return 'https://wa.me/' . $number . '?text=' . rawurlencode( $text );
}
步骤 3：装插件做浮动按钮。 安装 Click to Chat 或 Joinchat，在设置里填入号码与默认消息。两个实用的配置项：滚动到一定距离后再显示（避免首屏遮挡）、以及在产品页单独配置一条带产品名的问候语。
步骤 4：按时区判断在线状态。 这是”多时区应对”的核心。用站点时区算出目标市场当前时间，判断是否在工作时段，离线时把按钮文案改成”Leave a message”。
function mimangfei_is_business_hour( $timezone = 'Europe/Berlin' ) {
try {
$tz = new DateTimeZone( $timezone );
$now = new DateTime( 'now', $tz );
$hour = (int) $now->format( 'H' );
$day = (int) $now->format( 'N' ); // 1=周一 ... 7=周日
} catch ( Exception $e ) {
return true; // 时区异常时默认在线
}
if ( $day >= 6 ) {
return false; // 周末离线
}
return $hour >= 9 && $hour < 18;
}
步骤 5：输出浮动按钮。 挂到 wp_footer，按在线状态切换文案与目标链接，并对首屏做延迟加载，避免影响 LCP。
add_action( 'wp_footer', 'mimangfei_render_chat_button' );
function mimangfei_render_chat_button() {
$online = mimangfei_is_business_hour( 'Europe/Berlin' );
$href = $online ? mimangfei_whatsapp_link( get_the_title() ) : home_url( '/inquiry/' );
$label = $online ? 'Chat on WhatsApp' : 'Leave a Message';
?>
<a class="mmf-chat-float" href="<?php echo esc_url( $href ); ?>"
target="_blank" rel="noopener" aria-label="<?php echo esc_attr( $label ); ?>">
<span class="mmf-chat-dot <?php echo $online ? 'is-online' : 'is-offline'; ?>"></span>
<span class="mmf-chat-text"><?php echo esc_html( $label ); ?></span>
</a>
<?php
}
步骤 6：样式上做到不遮挡内容。 按钮固定在右下角，移动端缩小尺寸，并在结账页/询盘页隐藏，避免与主要转化动作竞争。
.mmf-chat-float {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
background: #25d366;
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.mmf-chat-dot.is-online { background: #0f9d58; }
.mmf-chat-dot.is-offline { background: #9aa0a6; }
@media (max-width: 600px) {
.mmf-chat-float { right: 12px; bottom: 12px; padding: 8px 12px; }
}
步骤 7：配置离线兜底。 离线时段把流量导向询盘表单，并在表单自动回复里明确写出”我们会在 X 小时内回复”，这个承诺对转化率的提升非常明显。
步骤 8：避免隐私合规风险。 面向欧盟客户的站点，加载第三方聊天组件前需要获得 Cookie 同意。用 Complianz 或 Cookie Notice 这类同意管理插件，把聊天脚本设为”同意后才加载”。
// 只有用户同意后才注册浮动按钮，避免未经同意加载第三方脚本
add_action( 'wp_footer', 'mimangfei_render_chat_button_gated' );
function mimangfei_render_chat_button_gated() {
if ( ! isset( $_COOKIE['mmf_chat_consent'] ) || '1' !== $_COOKIE['mmf_chat_consent'] ) {
return;
}
mimangfei_render_chat_button();
}
步骤 9：统计与优化。 给按钮加 Google Analytics 事件，统计点击率与点击后的询盘转化，持续优化文案与位置。
常见踩坑
- 号码格式错误。 带了
+或空格导致链接失效，必须转成纯数字的国际化格式。 - 忘了 URL 编码。
text参数里有空格与问号时不编码会截断。 - 24 小时都显示”在线”。 客户发消息没人回，第一印象直接崩坏。
- 案例： 某外贸站在欧洲时间凌晨仍然显示绿色”在线”圆点，客户连续发三条消息无人回应，第二天再跟进时客户已经下单给别家。改成按时区判断并在离线时切换为留言入口后，虽然没有做到即时回复，但线索保留率明显提升。
- 按钮遮挡移动端内容。 固定在底部中间会挡住表单提交按钮。
- 未处理 GDPR。 未经同意加载第三方脚本，在欧盟有合规风险。
- 只放 WhatsApp。 北美客户更习惯邮件，应至少保留邮箱与表单两个通道。
总结
外贸客服的最小可用方案是：WhatsApp Business 账号 + 浮动按钮 + 时区判断的在线状态 + 离线留言兜底。技术上用 wa.me 深链配 text 参数，wp_footer 输出组件，用 DateTimeZone 判断营业时段。判断标准：客户在任何时间来访，都能明确知道”现在能不能联系上、什么时候能收到回复”。询盘表单的字段设计见外贸询盘表单设计；合规要求的细节见外贸站合规页面清单。
