Bắt đầu nhanh

Thêm widget chat Respondo vào website của bạn trong chưa đầy 2 phút.

Thêm script

Dán đoạn mã này ngay trước </body> trên mọi trang mà bạn muốn hiển thị widget:

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>

Thay YOUR_AGENT_ID và YOUR_CHANNEL_ID bằng Agent ID và Channel ID từ phần cài đặt kênh của bạn (hoặc sao chép đoạn mã đã điền sẵn từ trang kênh). Widget tải bất đồng bộ và sẽ không ảnh hưởng đến hiệu năng trang.

Bạn đang dùng framework?#

Cùng một widget, được nối vào stack của bạn — hãy chọn một tab:

Render component này một lần, gần root của ứng dụng:

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;
}

Thay YOUR_AGENT_ID / YOUR_CHANNEL_ID bằng các giá trị từ phần cài đặt kênh của bạn — hoặc sao chép đoạn mã có sẵn từ trang kênh, nơi các giá trị này đã được điền sẵn.

Nhận diện người dùng (khuyến nghị)

Sau khi người dùng đăng nhập, hãy gọi identify() để liên kết các phiên chat với hồ sơ của họ:

JavaScriptjavascript

Respondo.identify({
  email: 'user@example.com',
  name: 'John Doe',
  userId: 'usr_12345',       // ID người dùng nội bộ của bạn
  metadata: {                // các trường tùy chỉnh bất kỳ
    plan: 'premium',
    company: 'Acme Inc'
  },
  properties: {              // thuộc tính liên hệ tùy chỉnh (định nghĩa trong Cài đặt agent)
    account_type: 'enterprise',
    region: 'eu-west'
  }
});

Xong!

Widget sẽ xuất hiện ở góc dưới bên phải. Mọi cuộc hội thoại tự động chảy vào bảng điều khiển Conversations của bạn.