bytedesk-web

Online customer service SDK, supporting multiple frameworks:

• React Guide
• Next.js Guide
• Vue Guide
• Svelte Guide
• Angular Guide
• JavaScript Guide

中文文档

• 
• 
• npmjs

Installation Steps

Install Dependencies

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

Import Component

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

Configure Parameters

const config: BytedeskConfig = {
  placement: 'bottom-right',
  marginBottom: 20,
  marginSide: 20,
  bubbleConfig: {
    show: true,
    icon: '👋',
    title: 'Need help?',
    subtitle: 'Click to chat'
  },
  buttonConfig: {
    show: true,
    width: 60,
    height: 60,
    // icon: '👋',
    // text: '需要帮助吗？',
  },
  chatConfig: {
    org: 'df_org_uid',  // Replace with your organization ID
    t: "2",
    sid: 'df_rt_uid'      // Replace with your SID
  }
};

Use Component

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

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

Available Methods

# show/hide button
(window as any).bytedesk?.showButton();
(window as any).bytedesk?.hideButton();

# show/hide bubble
(window as any).bytedesk?.showBubble();
(window as any).bytedesk?.hideBubble();

# show/hide chat window
(window as any).bytedesk?.showChat();
(window as any).bytedesk?.hideChat();

# show/hide invite dialog
(window as any).bytedesk?.showInviteDialog();
(window as any).bytedesk?.hideInviteDialog();

Run Examples

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
yarn demo:angular  # Run Angular demo
yarn demo:nextjs   # Run Next.js demo

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

CDN

# https://cdn.jsdelivr.net/npm/[email protected]/dist/
https://cdn.jsdelivr.net/npm/[email protected]/dist/bytedesk-web.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/bytedesk-web.umd.js

Open Source Demo + SDK

Project	Description	Forks	Stars
iOS	iOS
Android	Android
Flutter	Flutter
UniApp	Uniapp
Web	Vue/React/Angular/Next.js/JQuery/...
Wordpress	Wordpress
Woocommerce	woocommerce
Magento	Magento
Prestashop	Prestashop
Shopify	Shopify
Opencart	Opencart
Laravel	Laravel
Django	Django