bytedesk-web

bytedesk-web

Online customer service SDK, supporting multiple frameworks:

• React Guide
• Vue Guide
• Svelte Guide
• JavaScript Guide

English Document

Installation Steps

Install Dependencies

npm install bytedesk-web
# 或
yarn add bytedesk-web

导入组件

import { BytedeskReact } from 'bytedesk-web/react';
import type { BytedeskConfig } from 'bytedesk-web/react';

配置参数

const config: BytedeskConfig = {
  placement: 'bottom-right',
  marginBottom: 20,
  marginSide: 20,
  bubbleConfig: {
    show: true,
    icon: '👋',
    title: 'Need help?',
    subtitle: 'Click to chat'
  },
  chatConfig: {
    org: 'df_org_uid',  // 替换为您的组织ID
    t: "2",
    sid: 'df_rt_uid'      // 替换为您的SID
  }
};

使用组件

const App = () => {
  const handleInit = () => {
    console.log('BytedeskReact initialized');
  };

  return (
    <div>
      <BytedeskReact {...config} onInit={handleInit} />
      <button onClick={() => (window as any).bytedesk?.showChat()}>
        打开聊天
      </button>
    </div>
  );
};

可用方法

(window as any).bytedesk?.showChat() - 显示聊天窗口
(window as any).bytedesk?.hideChat() - 隐藏聊天窗口

运行示例

yarn install
yarn demo:react    # Run React demo
yarn demo:vue      # Run Vue demo
yarn demo:svelte   # Run Svelte demo
yarn demo:vanilla  # Run Vanilla JS demo

# JavaScript demo requires build first
yarn build
yarn demo:javascript

This site is open source. Improve this page.