Custom Message Renderer

Use renderMessageContent to take over how specific messages are rendered. You can detect custom payload types and return any React node, with or without the default avatar + bubble wrapper.

Renderer Mode

Loading chatbot...

Modes

Mode	Use when
with-avatar	Custom content but keep the default avatar and bubble
no-avatar	Fully custom rendering, bypass MessageContainer
wrapper	Add timestamps / metadata around the default content
default	Fall back to built-in rendering

Code Example

<Chatbot
  renderMessageContent={({ message, renderDefaultContent, MessageContainer }) => {
    if (message.type === "bot") {
      const payload = message.message.payload;
      if (payload?.customType === "order_card") {
        return (
          <MessageContainer>
            <OrderCard payload={payload} />
          </MessageContainer>
        );
      }
    }
    return renderDefaultContent();
  }}
/>