在BigCommerce主题中添加含页面标题与URL的WhatsApp链接

需求说明 #

要添加的WhatsApp链接需自动携带以下内容的预定义消息：

hello customer, may i help you
[当前页面标题]
[当前页面URL]

同时需要在店铺的页眉和页脚都显示该链接，无需专业技术能力操作。

操作步骤 #

1. 在页眉、页脚添加链接占位符 #

登录BigCommerce后台，依次操作：

• 进入「在线商店」→「网站内容」
• 找到页眉对应的内容区块，编辑并添加以下代码：

  <a href="#" class="whatsapp-link" rel="nofollow noreferrer">WhatsApp联系我们</a>
  

• 同样找到页脚对应的内容区块，添加完全相同的代码

2. 添加动态生成链接的脚本 #

继续在后台操作：

• 进入「商店设置」→「脚本管理器」
• 点击「创建脚本」，填写以下信息：
  • 脚本名称：WhatsApp动态链接（自定义即可）
  • 位置：选择「全局页脚」（确保页面加载完成后执行）
  • 脚本类型：选择「脚本」
• 在脚本内容框中粘贴以下代码，替换你的电话号码为实际WhatsApp号码（带国际区号，无需+号，例如6281381534824）：

  // 组合消息内容
  const message = `hello customer, may i help you
  ${document.title}
  ${window.location.href}`;
  // 编码消息内容（适配URL格式）
  const encodedMsg = encodeURIComponent(message);
  // 替换为你的WhatsApp号码
  const phoneNumber = "你的电话号码";
  // 为所有WhatsApp链接设置正确地址
  document.querySelectorAll('.whatsapp-link').forEach(link => {
    link.href = `https://wa.me/${phoneNumber}?text=${encodedMsg}`;
  });
  

• 保存脚本

3. 可选：美化链接样式 #

如果想让链接更显眼，可以在脚本内容的最上方添加CSS样式（放在JS代码前面）：

.whatsapp-link {
  color: #25d366; /* WhatsApp绿色 */
  font-weight: bold;
  margin: 0 10px;
}

测试验证 #

刷新店铺页面，点击页眉或页脚的WhatsApp链接，检查跳转后的WhatsApp消息框是否包含正确的固定文本、页面标题和URL。

内容的提问来源于stack exchange，提问作者Andrea Febrian