Angular Integration Guide

• github
• 
• 
• npmjs

Install

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

Import components

import { BytedeskAngular } from 'bytedesk-web/angular';
import type { BytedeskConfig } from 'bytedesk-web';

Configuration

• Supports switching left/right sidebar; default: right
• Supports custom color theme; default: blue
• Supports customizing whether to show the bubble; default: show
• Supports custom i18n language; default: Chinese
• Supports dark mode; default: light
• Supports auto pop-up invite dialog (default: disabled), and customizing the invite dialog title/content, number of pop-ups, intervals, etc.

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',  // replace with your organization ID
    t: "2",
    sid: 'df_rt_uid'      // replace with your SID
  }
};

Use the component

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

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

Available methods

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

# Show/Hide button
(window as any).bytedesk?.showButton();
(window as any).bytedesk?.hideButton();

# Show/Hide bubble message
(window as any).bytedesk?.showBubble();
(window as any).bytedesk?.hideBubble();

# Show/Hide invite dialog
(window as any).bytedesk?.showInviteDialog();
(window as any).bytedesk?.hideInviteDialog();