เริ่มต้นใช้งานอย่างรวดเร็ว
เพิ่มวิดเจ็ตแชท Respondo ลงในเว็บไซต์ของคุณได้ในเวลาไม่ถึง 2 นาที
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 จากการตั้งค่าช่องทางของคุณ (หรือคัดลอกสไนปเป็ตที่กรอกค่าไว้ให้แล้วจากหน้าช่องทาง) วิดเจ็ตจะโหลดแบบอะซิงโครนัสและจะไม่กระทบต่อประสิทธิภาพของหน้าเว็บใช้เฟรมเวิร์กอยู่ไหม?#
วิดเจ็ตเดียวกัน เชื่อมเข้ากับสแตกของคุณ — เลือกแท็บ:
เรนเดอร์คอมโพเนนต์นี้หนึ่งครั้ง ใกล้กับ root ของแอปของคุณ:
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 ของคุณ โดยอัตโนมัติ