跳至主要内容

REFERENCE

SDK 範例

@asgard-js/core 與 @asgard-js/react 的用法與可以直接操作的範例。

自訂渲染

使用 renderMessageContent 接管特定訊息的渲染方式。你可以依照 自訂 payload type 分派成不同的 React 元件,並決定是否保留預設 的頭像與泡泡包裝。

  1. 模式​

    模式使用時機
    with-avatar客製內容,但保留預設頭像與泡泡
    no-avatar完全客製渲染,不使用 MessageContainer
    wrapper在預設內容之外加入時間戳 / metadata 等包裝
    default回到預設渲染
  2. 程式範例​

    <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();
    }}
    />
  3. 也看看​

準備好開始了嗎?

想知道 Asgard 怎麼用在你的團隊?跟我們聊聊。

聯絡我們