Skip to navigation
Components

Chat element

The chat element renders a real-time chat UI connected to a specific channel.

Basic usage

Pass a channelId to connect to a specific channel, DM, or support chat.

"use client";
import { useMemo } from "react";
import {
	ChatElement,
	ChatSession,
	Elements,
} from "@whop/embedded-components-react-js";
import { loadWhopElements } from "@whop/embedded-components-vanilla-js";
import type { ChatElementOptions } from "@whop/embedded-components-vanilla-js/types";
const elements = loadWhopElements();
async function getToken() {
	const response = await fetch("/api/token");
	const data = await response.json();
	return data.token;
}
export function ChatPage() {
	const chatOptions: ChatElementOptions = useMemo(() => {
		return {
			channelId: "chat_feed_XXXXXXXXXXXXXX",
		};
	}, []);
	return (
		<Elements elements={elements}>
			<ChatSession token={getToken}>
				<ChatElement
					options={chatOptions}
					style={{ height: "100dvh", width: "100%" }}
				/>
			</ChatSession>
		</Elements>
	);
}

Deeplinking to messages

To scroll to and highlight a specific message, pass deeplinkToPostId. The view will automatically navigate to that message.

const chatOptions: ChatElementOptions = useMemo(() => {
	return {
		channelId: "chat_feed_XXXXXXXXXXXXXX",
		deeplinkToPostId: "post_XXXXXXXXXXXXXX",
	};
}, []);
<ChatElement options={chatOptions} />;

Event handling

Listen to user interactions like profile clicks, link clicks, and sent messages using the event callback for your platform.

EventDetailDescription
profileClick{ id: string }Emitted when the user clicks on a profile
linkClick{ url: string }Emitted when the user clicks on a link
messageSent{ id: string, content: string, channelId: string }Emitted when the user sends a message
experienceClick{ id: string }Emitted when the user clicks on an experience mention
import { useCallback, useMemo } from "react";
import type {
	ChatElementEvent,
	ChatElementOptions,
} from "@whop/embedded-components-vanilla-js/types";
const handleChatEvent = useCallback((event: ChatElementEvent) => {
	switch (event.type) {
		case "profileClick":
			console.log("Profile clicked:", event.detail.id);
			break;
		case "linkClick":
			console.log("Link clicked:", event.detail.url);
			break;
		case "messageSent":
			console.log("Message sent:", event.detail.id, event.detail.content, event.detail.channelId);
			break;
		case "experienceClick":
			console.log("Experience clicked:", event.detail.id);
			break;
	}
}, []);
const chatOptions: ChatElementOptions = useMemo(() => {
	return {
		channelId: "chat_feed_XXXXXXXXXXXXXX",
		onEvent: handleChatEvent,
	};
}, [handleChatEvent]);
<ChatElement options={chatOptions} />;