REFERENCE
SDK Demos
How to use @asgard-js/core and @asgard-js/react, with demos you can try on the page.
Custom 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.
Modes
Mode Use when with-avatarCustom content but keep the default avatar and bubble no-avatarFully custom rendering, bypass MessageContainerwrapperAdd timestamps / metadata around the default content defaultFall 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();
}}
/>See Also
- Composition — the lighter path: change the content, keep the layout
- Message Actions — the action row under a message
- Custom Header — customizing the heading bar