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}
    />
  );
}