💬 WhatsApp 按钮容器模式示例
在页面指定容器内显示按钮，而不是浮动按钮
💡 说明： 使用 containerSelector 配置项，可以在页面中指定的容器内显示按钮，而不是创建浮动按钮。
✅ 好消息： 即使 API 返回 404 错误，如果配置了 fallbackNumber，按钮仍然可以正常工作！从您的错误日志看，按钮已经成功显示并可以使用了。
⚠️ 关于 API 404 错误： 如果第三方网站的域名（如
www.kolacash.com）与 API 服务器域名（如
web.kolacash.com）不同，API 请求会返回 404。解决方案：
- 方案 1：在
apiBaseUrl 中指定正确的 API 服务器域名（推荐）
- 方案 2：配置
fallbackNumber 作为备用号码（已配置，按钮可正常使用）
使用方法
1. 在 HTML 中创建容器
<div id="whatsapp-button-container">
<!-- 按钮将在这里显示 -->
</div>
2. 初始化按钮
<script src="https://web.kolacash.com/static/js/whatsapp-button.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (typeof WhatsAppButton !== 'undefined') {
WhatsAppButton.init({
apiBaseUrl: 'https://web.kolacash.com',
containerSelector: '#whatsapp-button-container', // 容器选择器
buttonClass: 'btn btn-primary', // 按钮 CSS 类名
buttonText: 'Contact WhatsApp to Trade Now',
fallbackNumber: '85262760329',
debug: true
});
}
});
</script>
完整示例
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
<style>
.btn {
display: inline-block;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 5px;
transition: all 0.3s ease;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #FFFFFF;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
</style>
</head>
<body>
<h1>欢迎访问</h1>
<!-- 按钮容器 -->
<div id="whatsapp-button-container" style="text-align: center; margin: 30px 0;">
<!-- 按钮将自动显示在这里 -->
</div>
<script src="https://web.kolacash.com/static/js/whatsapp-button.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (typeof WhatsAppButton !== 'undefined') {
WhatsAppButton.init({
apiBaseUrl: 'https://web.kolacash.com', // ⚠️ 使用 API 服务器域名，不是网站域名
containerSelector: '#whatsapp-button-container',
buttonClass: 'btn btn-primary',
buttonText: 'Contact WhatsApp to Trade Now',
fallbackNumber: '85262760329' // 备用号码（强烈推荐）
});
}
});
</script>
</body>
</html>
配置选项
WhatsAppButton.init({
apiBaseUrl: 'https://web.kolacash.com', // ⚠️ 必须：API 服务器地址（不是网站域名）
containerSelector: '#whatsapp-button', // 容器选择器（设置后不创建浮动按钮）
buttonClass: 'btn btn-primary', // 按钮 CSS 类名
buttonText: 'Contact WhatsApp to Trade Now', // 按钮文字
buttonIcon: '', // 按钮图标（可选）
fallbackNumber: '85262760329', // ⭐ 备用号码（强烈推荐，API 失败时使用）
debug: false // 调试模式
});
实时演示