Message Templates

@asgard-js/react ships with 8 built-in message template types. Select a template below to see how it renders inside the chatbot panel.

Select Template

Click a template type to see how it renders.

Loading chatbot...

Code Example

import { Chatbot } from "@asgard-js/react";
import { createTextTemplateExample } from "./mocks/messages";

export function Demo() {
  return (
    <Chatbot
      title="Text Template Demo"
      config={{ botProviderEndpoint: "skip" }}
      customChannelId="templates-demo"
      initMessages={[createTextTemplateExample()]}
    />
  );
}

Supported Templates

Template	Description
text	Plain or rich text messages with optional quick replies
hint	Contextual hint bubbles
button	Inline action buttons (uri, message, emit)
carousel	Swipeable card carousel
image	Image with caption
chart	Vega-lite chart rendering
table	Structured tabular data
math	LaTeX-style math formulas