# bytedesk-web Online customer service SDK, supporting multiple frameworks: - [React Guide](examples/react-demo/readme.md) - [Next.js Guide](examples/nextjs-demo/readme.md) - [Vue Guide](examples/vue-demo/readme.md) - [Svelte Guide](examples/svelte-demo/readme.md) - [Angular Guide](examples/angular-demo/readme.md) - [JavaScript Guide](examples/javascript-demo/readme.md) ![admin](images/admin/chat.png) ![chat](images/chat/react_demo.png) [English Document](readme.md) - [![npm version](https://badge.fury.io/js/bytedesk-web.svg)](https://badge.fury.io/js/bytedesk-web) - [![NPM Downloads](https://img.shields.io/npm/dm/bytedesk-web.svg?style=flat)](https://www.npmjs.com/package/bytedesk-web) - [npmjs](https://www.npmjs.com/package/bytedesk-web) ## Installation Steps ### Install Dependencies ```bash npm install bytedesk-web # 或 yarn add bytedesk-web ``` ### 导入组件 ```bash import { BytedeskReact } from 'bytedesk-web/react'; import type { BytedeskConfig } from 'bytedesk-web/react'; ``` ### 配置参数 ```bash 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', // 替换为您的组织ID t: "2", sid: 'df_rt_uid' // 替换为您的SID } }; ``` ### 使用组件 ```bash const App = () => { const handleInit = () => { console.log('BytedeskReact initialized'); }; return (
); }; ``` ### 可用方法 ```bash # 显示/隐藏按钮 (window as any).bytedesk?.showButton(); (window as any).bytedesk?.hideButton(); # 显示/隐藏气泡消息 (window as any).bytedesk?.showBubble(); (window as any).bytedesk?.hideBubble(); # 显示/隐藏聊天窗口 (window as any).bytedesk?.showChat(); (window as any).bytedesk?.hideChat(); # 显示/隐藏邀请对话框 (window as any).bytedesk?.showInviteDialog(); (window as any).bytedesk?.hideInviteDialog(); ``` ## 运行示例 ```bash 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 ``` ## 开源Demo + SDK | Project | Description | Forks | Stars | |-------------|-----------------------|----------------|-------------------| | [iOS](https://github.com/bytedesk/bytedesk-swift) | iOS | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-swift) | ![GitHub Repo stars](https://img.shields.io/github/stars/Bytedesk/bytedesk-swift) | | [Android](https://github.com/bytedesk/bytedesk-android) | Android | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-android) | ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-android) | | [Flutter](https://github.com/bytedesk/bytedesk-flutter) | Flutter | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-flutter)| ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-flutter) | | [UniApp](https://github.com/bytedesk/bytedesk-uniapp) | Uniapp | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-uniapp) | ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-uniapp) | | [Web](https://github.com/bytedesk/bytedesk-web) | Vue/React/Angular/Next.js/JQuery/... | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-web) | ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-web) | | [Wordpress](https://github.com/bytedesk/bytedesk-wordpress) | Wordpress | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-wordpress) | ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-wordpress) | | [Woocommerce](https://github.com/bytedesk/bytedesk-woocommerce) | woocommerce | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-woocommerce) | ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-woocommerce) | | [Magento](https://github.com/bytedesk/bytedesk-magento) | Magento | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-magento) | ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-magento) | | [Prestashop](https://github.com/bytedesk/bytedesk-prestashop) | Prestashop | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-prestashop) | ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-prestashop) | | [Shopify](https://github.com/bytedesk/bytedesk-shopify) | Shopify | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-shopify) | ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-shopify) | | [Opencart](https://github.com/bytedesk/bytedesk-opencart) | Opencart | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-opencart) | ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-opencart) | | [Laravel](https://github.com/bytedesk/bytedesk-laravel) | Laravel | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-laravel) | ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-laravel) | | [Django](https://github.com/bytedesk/bytedesk-django) | Django | ![GitHub forks](https://img.shields.io/github/forks/bytedesk/bytedesk-django) | ![GitHub Repo stars](https://img.shields.io/github/stars/bytedesk/bytedesk-django) |