bytedesk-web

Online customer service SDK, supporting multiple frameworks:

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

中文文档

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

Configure Parameters

const config: BytedeskConfig = {
  placement: 'bottom-right',
  marginBottom: 20,
  marginSide: 20,
  bubbleConfig: {
    show: true,
    icon: '👋',
    title: 'Need help?',
    subtitle: 'Click to chat'
  },
  chatParams: {
    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

(window as any).bytedesk?.showChat() - Show chat window
(window as any).bytedesk?.hideChat() - Hide chat window

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

Chat SDK

Project	Description	Forks	Stars
iOS-swift	iOS swift
Android	Android
Flutter	Flutter
UniApp	Uniapp
Web	Web
Wordpress	Wordpress
Woocommerce	woocommerce
Magento	Magento
Prestashop	Prestashop
Shopify	Shopify
Opencart	Opencart
Laravel	Laravel
Django	Django

Next.js Usage

'use client';

import { BytedeskNextjs } from 'bytedesk-web/nextjs';
import type { BytedeskConfig } from 'bytedesk-web/nextjs';

export default function Page() {
  const config = {
    // ... configuration
  };

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