Having a custom chat built using the SendBird service, it’s not a rare situation to add Voice and a Video conversation into the chat module. This allows for seamless switching between chats and calls.

SendBird Calls API was launched in early 2020 and it increases the number of features every couple of months. Let’s find out how to enable integration between calls and chat.

Enabling integration

Chat and Call APIs use separate SDKs. To enable integration between the two, we need to follow an extra step. In the SB Panel: Settings / Chat / Messages – ‘Calls integration to Chat’ checked -> direct_call:end checkbox.

SendBirdChatOptions

We need to inform the Calls component about the current channelUrl. Having this, a special message will be automatically sent to the chat after a call ends. The trick is to extend dialParams with sendBirdChatOptions options and pass the channelUrl value.

// SendBird in React - calls integration
// method for initializing the Call
makeCall() {
  let callOption = this.getCallOptions();
  const channelUrl = this.props.channelUrl;
  const dialParams = {
    userId: this.state.targetUserId,
    isVideoCall: this.isVideoCall(),
    callOption,
    sendBirdChatOptions: {
      channelUrl
    },
  };
  const call = SendBirdCall.dial(dialParams, (call, error) => {
    if (error) {
      console.log(error);
      this.setState({errorMsg: error.toString()})
    } else {
      this.setState({errorMsg: ''})
    }
  });
  this.addDialOutListener(call)
}

Handling message text

After a call is finished, the chat will receive the message: direct_call:end. It would be better to display a more human friendly text. To achieve this, we need to prepare a custom message component to change the rendering of the message. The first step is to overwrite the renderChatItem attribute. The chat will now use our function.

<SendBirdProvider>
<Channel
  renderChatItem={({ message, onDeleteMessage, onUpdateMessage, channel, chainBottom}) => (
      <MyCustomChatMessage
          message={message}
          onDeleteMessage={onDeleteMessage}
          onUpdateMessage={onUpdateMessage}
          channelUrl={configStore.channelUrl}
          channel={channel}
          chainBottom={chainBottom}
      />
  )}
/></SendBirdProvider>

As for the message handler, we’re simply checking the message.message parameter and showing a different value.

// src/Chat/Message.jsx
export const MyCustomChatMessage = React.memo((props) => {
    // eslint-disable-next-line
    const {message, onDeleteMessage, onUpdateMessage, channelUrl, channel, chainBottom} = props;
    // hack - to translate "direct_call:end"
    if(message.message === "direct_call:end") {
        message.customType = "info";
        message.message = 'Conversation has been recorded and completed successfully.';
    }
    return  (
        <>
            {message.message}
        </>
    )
});

That’s it for today’s tutorial, make sure to follow us for other tips and guidelines, and don’t forget to subscribe to our newsletter