Custom Header

Use renderHeader to replace the default chatbot header with your own React component. Access SDK state via useAsgardContext and react to the onMessageSent / onReset lifecycle callbacks.

Message Counter

Send any message in the chatbot to see the counter increase in the custom header. Click Reset in the header to clear it.

Current Count

0

Loading chatbot...

Code Example

import { Chatbot, useAsgardContext } from "@asgard-js/react";

function MyHeader({ count }: { count: number }) {
  const { avatar, resetChannel } = useAsgardContext();
  return (
    <header>
      {avatar && <img src={avatar} alt="" />}
      <span>Messages sent: {count}</span>
      <button onClick={() => resetChannel?.()}>Reset</button>
    </header>
  );
}

function Demo() {
  const [count, setCount] = useState(0);
  return (
    <Chatbot
      onMessageSent={() => setCount((c) => c + 1)}
      onReset={() => setCount(0)}
      renderHeader={() => <MyHeader count={count} />}
      {...rest}
    />
  );
}

useAsgardContext Key Fields

Inside renderHeader, use this hook to access SDK internal state:

Field	Type	Description
avatar	string	Bot avatar URL
title	string	Chatbot title
isConnecting	boolean	Whether the channel is connecting
isResetting	boolean	Whether the channel is resetting
resetChannel	() => void	Reset the channel
closeChannel	() => void	Close the channel
messages	Map<string, ConversationMessage>	All messages