快速开始
在 2 分钟内将 Respondo 聊天挂件添加到您的网站。
1
添加脚本
在每个需要显示挂件的页面上,把这段代码粘贴到 </body> 之前:
HTMLhtml
<script>
window.Respondo = window.Respondo || {};
Respondo.init = Respondo.init || function(c) { window.RespondoAIConfig = c; };
Respondo.q = Respondo.q || [];
Respondo.identify = Respondo.identify || function(d) { Respondo.q.push(['identify', d]); };
Respondo.init({
agentId: 'YOUR_AGENT_ID',
channelId: 'YOUR_CHANNEL_ID'
});
</script>
<script src="https://api.respondo.ai/widget/widget.js" async></script>把
YOUR_AGENT_ID 和 YOUR_CHANNEL_ID 替换为您在渠道设置中的 Agent ID 和 Channel ID(或者直接从渠道页面复制已预填好的代码片段)。挂件会异步加载,不会影响页面性能。正在使用框架?#
同一个挂件,接入您的技术栈——选择一个标签页:
在应用根部附近渲染这个组件一次即可:
Reacttsx
// respondo-widget.tsx — render once, near the root of your app
import { useEffect } from 'react';
export function RespondoWidget() {
useEffect(() => {
const w = window as any;
w.Respondo = w.Respondo || {};
w.Respondo.init = w.Respondo.init || function (c) { w.RespondoAIConfig = c; };
w.Respondo.q = w.Respondo.q || [];
w.Respondo.identify = w.Respondo.identify || function (d) { w.Respondo.q.push(['identify', d]); };
if (!document.querySelector('script[data-respondo]')) {
w.Respondo.init({
agentId: 'YOUR_AGENT_ID',
channelId: 'YOUR_CHANNEL_ID'
});
const s = document.createElement('script');
s.src = 'https://api.respondo.ai/widget/widget.js';
s.async = true;
s.dataset.respondo = '1';
document.body.appendChild(s);
}
}, []);
return null;
}把 YOUR_AGENT_ID / YOUR_CHANNEL_ID 替换为您渠道设置中的值——或者直接从渠道页面复制已经填好这些值的现成代码片段。
2
识别用户(推荐)
在用户登录后,调用 identify() 将聊天会话与其个人资料关联:
JavaScriptjavascript
Respondo.identify({
email: 'user@example.com',
name: 'John Doe',
userId: 'usr_12345', // 您的内部用户 ID
metadata: { // 任意自定义字段
plan: 'premium',
company: 'Acme Inc'
},
properties: { // 自定义联系人属性(在 Agent Settings 中定义)
account_type: 'enterprise',
region: 'eu-west'
}
});完成!
挂件会出现在右下角。所有对话都会自动汇入您的 Conversations 仪表盘。