需完成api密钥配置、前端sdk加载、后端代理设置、ui定制与事件钩子、webhook接收验证五步:一、在开发者平台创建绑定域名的api密钥并存入环境变量;二、通过script标签加载sdk并初始化widget;三、用node.js搭建代理路由透传请求并处理sse流;四、配置theme及onmessagesent等钩子实现ui统一与行为捕获;五、配置webhook地址并处理incoming_message等事件,返回200响应。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

如果您希望在网站中集成Clawdbot API提供的AI聊天功能,则需要完成API密钥配置、前端SDK加载与后端代理设置等关键环节。以下是实现此集成的具体步骤:
一、获取并配置Clawdbot API密钥
Clawdbot要求所有请求携带有效的API密钥进行身份验证,该密钥需在开发者控制台中创建并绑定对应域名。未正确配置密钥将导致401错误响应。
1、登录Clawdbot开发者平台,进入“API管理”页面。
2、点击“新建密钥”,填写应用名称及授权域名(例如:example.com)。
3、复制生成的API Key字符串,保存至安全位置,该密钥不可再次查看。
4、在服务器环境变量中设置CLAWDBOT_API_KEY,或在后端配置文件中写入该值。
二、部署前端嵌入式聊天窗口
Clawdbot提供轻量级JavaScript SDK,支持通过script标签直接加载,并自动注入浮动聊天按钮。该方式无需修改现有HTML结构,适合快速上线。
1、在网站HTML的</body>标签前添加以下脚本:
<script src="https://cdn.clawdbot.ai/sdk/v1/chat-widget.js"></script>
2、在script标签后立即插入初始化代码块:
ClawdbotWidget.init({ apiKey: "您的API Key", position: "right-bottom" });
3、确保网页已启用HTTPS协议,否则浏览器将阻止SDK加载。
三、搭建后端API代理服务
为避免前端直接暴露API密钥及绕过CORS限制,建议通过自有服务器中转Clawdbot请求。代理服务需转发消息体、保留HTTP头并处理流式响应。
1、使用Node.js Express创建路由:/api/clawdbot/chat
2、在该路由中构造对Clawdbot官方接口https://api.clawdbot.ai/v1/chat的POST请求。
3、将客户端发送的JSON payload原样透传,并在headers中添加Authorization: Bearer CLAWDBOT_API_KEY。
4、设置response类型为text/event-stream,逐块转发Clawdbot返回的SSE数据。
四、自定义聊天界面与事件钩子
SDK支持通过配置对象注入UI定制参数和生命周期回调,便于与网站主题统一并捕获用户行为。
1、在ClawdbotWidget.init()调用中加入theme配置项:
theme: { primaryColor: "#2563eb", borderRadius: "12px" }
2、注册onMessageSent钩子函数,在每次用户发送消息后触发:
onMessageSent: (message) => console.log("用户发送:", message)
3、调用ClawdbotWidget.open()可在特定按钮点击时强制展开聊天窗口,而非仅依赖浮动图标。
五、验证Webhook接收能力
当启用会话状态同步或第三方系统对接时,Clawdbot可向指定URL推送事件通知,如新消息到达、会话关闭等。该URL必须支持POST且响应200状态码。
1、在开发者控制台“Webhook设置”中填写目标地址,例如:https://yourdomain.com/webhook/clawdbot
2、在后端路由中解析application/json格式的请求体,提取event_type字段判断事件类型。
3、对incoming_message事件中的message.content字段进行日志记录或存入数据库。
4、返回HTTP 200响应,响应体可为空,但禁止返回任何非2xx状态码,否则Clawdbot将停止重试推送。










