Phone & video calling

Call buttons appear only in direct-message chats and are hidden for groups. The package owns the UI affordances; you own the calling SDK. Control visibility and callbacks through the features prop (showPhoneCall, showVideoCall, onPhoneCall, onVideoCall), or replace the buttons entirely with the options below.

Choose Option A when the default icons are fine, Option B when you need a custom button group, or Option C when you want per-button replacements (or to hide calls completely). Tenant-level call toggles live in the API Settings docs; feature overview is on Features.

Fastest path: keep package buttons and wire your voice/video SDK inside the callbacks. Each callback receives the active channel and conversation id.

features={{
  showPhoneCall: true,
  showVideoCall: true,
  onPhoneCall: ({ activeChannel, conversationId }) => {
    yourVoiceSDK.start(activeChannel.id, conversationId);
  },
  onVideoCall: ({ activeChannel, conversationId }) => {
    yourVideoSDK.start(activeChannel.id, conversationId);
  },
}}

Pass a custom HeaderCallActions component when you need different icons, ordering, or labels than the defaults.

components={{
  HeaderCallActions: ({ onPhoneCall, onVideoCall, activeChannel }) => (
    <div className="flex gap-2">
      <button onClick={onPhoneCall}>Call {activeChannel.name}</button>
      <button onClick={onVideoCall}>Video</button>
    </div>
  ),
}}

Override PhoneCallButton and/or VideoCallButton when you only need one branded control. To hide calls entirely without custom components:

features={{ showPhoneCall: false, showVideoCall: false }}

components={{
  PhoneCallButton: ({ onPhoneCall, className }) => (
    <button className={className} onClick={onPhoneCall}>Call</button>
  ),
  VideoCallButton: ({ onVideoCall, className }) => (
    <button className={className} onClick={onVideoCall}>Video</button>
  ),
}}