AI Chatbot Guide v1
AI Chatbot
Version 1

Card view for JavaScript

Copy link

The card view feature is a UI component designed to enhance chat interfaces by organizing messages into cards. In UI design, a 'card' is a rectangular box that contains and displays a piece of related information cohesively, like a single chat message or a group of messages. This layout not only makes information presentation cleaner and more structured but also allows for greater user engagement and improved aesthetics. The cards are customizable, supporting integration of images, text, and interactive elements, and can be easily adapted to match your brand's style. This page guides you to render custom message views such as a card view, in React applications using Sendbird UIKit for Chat.


Copy link

The minimum requirements for Javascript are:

  • Sendbird Chat SDK 4.10.1
  • Sendbird Chat UIKit for React 3.71

Components supporting renderMessage prop

Copy link

You can pass the renderMessage prop to the following components from @sendbird/uikit-react` for rendering custom message views.

List of components





Implement the card view UI

Copy link

To implement a custom message view, such as a card view, you need to define a custom channel component first. Then, define a CardViewMessage component to specify the layout and style of your custom card view message.

// The implementation is the same for Channel, MessageList, and Message.
import ChannelUI from '@sendbird/uikit-react/Channel/components/ChannelUI';

interface ChannelProps {
  // Define your props here.
function ChannelComponent(props: ChannelProps) {
      renderMessage={({ message }) => {
        if (isCardViewMessage(message)){
          return (
            <CardViewMessage messageData={getCardViewMessage(message)} />

interface CardViewMessageProps {
 messageData: CardMessageData;
function CardViewMessage(props: CardViewMessageProps) {
  return (
    // your custom card view component

Check for card view message

Copy link

You can determine if a message is of the card view type by creating a utility function as shown below.

import { ClientUserMessage } from 'SendbirdUIKitGlobal';

function getCardViewMessage(message: ClientUserMessage) {
  return message?.extendedMessagePayload != null 
    && 'custom_view' in message.extendedMessagePayload
    && message.extendedMessagePayload.custom_view != null
      ? message.extendedMessagePayload.custom_view
      : null;

function isCardViewMessage(message: ClientUserMessage) {
  return getCardViewMessage(message) != null;