Discussion

Interactive threaded commenting widget that enables conversations tied to any piece of content. Supports 2-level threads (posts + replies), reactions, sorting, cursor-based pagination, and reporting.

<div
	data-component="fu-widget"
	data-content-type="discussion"
	data-content-id="your-entity-id"
	data-discussion-label="Match Day Chat"
></div>

Configuration Attributes

Attribute	Description	Options / Type	Default
`data-discussion-label`	Title used when the discussion is first created	`string`	—
`data-discussion-url`	URL associated with the discussion content	`string`	—
`data-discussion-default-sort`	Initial sort order for posts	`"LATEST"`, `"OLDEST"`, `"POPULAR"`, `"INTERACTED"`	`"LATEST"`
`data-discussion-posts-per-page`	Number of posts loaded per page	`number`	`20`
`data-discussion-show-reactions`	Show/hide reaction buttons on posts	`"true"` / `"false"`	`true`
`data-discussion-show-replies`	Enable/disable reply functionality	`"true"` / `"false"`	`true`
`data-discussion-show-report-post`	Show/hide the report option in the post menu	`"true"` / `"false"`	`true`
`data-discussion-show-moderated-posts`	Show moderated posts with a masked design	`"true"` / `"false"`	`false`
`data-discussion-infinite-scroll`	Load more posts on scroll instead of "Load More"	`"true"` / `"false"`	`false`
`data-discussion-allow-anonymous`	Allow anonymous (non-logged-in) users to post	`"true"` / `"false"`	`false`
`data-discussion-on-sign-in-click`	JS code string executed when sign-in prompt clicked	`string` (JS expression)	—

Sort Modes

Value	Description
`LATEST`	Newest posts first
`OLDEST`	Oldest posts first
`POPULAR`	Most reactions first
`INTERACTED`	Most replies first

Features

Threaded 2-level comments (posts and replies)
Four sort modes: Latest, Oldest, Popular, Most Replied
Cursor-based pagination with configurable posts-per-page
Post reporting with reason and optional details
Delete own posts with confirmation dialog
Two reaction types: LIKE, DISLIKE
Moderated and deleted post handling
Custom theming via themeOptions

Authentication

When userIsLoggedIn is false (determined automatically from the widget auth), the post composer is replaced with a sign-in prompt. Use data-discussion-on-sign-in-click to wire up your own sign-in flow:

<div
	data-component="fu-widget"
	data-content-type="discussion"
	data-content-id="article-123"
	data-discussion-label="Article Comments"
	data-discussion-on-sign-in-click="window.location.href='/login'"
></div>

Global Configuration

Set defaults for all Discussion widgets in FuWidget.init():

FuWidget.init({
	// ... other config
	discussion: {
		defaultSort: "LATEST",        // "LATEST" | "OLDEST" | "POPULAR" | "INTERACTED"
		postsPerPage: 20,
		showReactions: true,
		showReplies: true,
		showReportPost: true,
		showModeratedPosts: false,
		infiniteScroll: false,
		allowAnonymous: false,
	},
});

Per-Widget Override (data attributes)

Data attributes override global discussion config values for a specific widget instance:

<div
	data-component="fu-widget"
	data-content-type="discussion"
	data-content-id="match-456"
	data-discussion-label="Match Day Chat"
	data-discussion-url="https://your-site.com/matches/456"
	data-discussion-default-sort="POPULAR"
	data-discussion-posts-per-page="10"
	data-discussion-show-reactions="true"
	data-discussion-show-replies="true"
	data-discussion-show-moderated-posts="false"
	data-discussion-infinite-scroll="true"
	data-discussion-allow-anonymous="false"
	data-discussion-on-sign-in-click="openSignInModal()"
></div>

loadWidget() Usage

FuWidget.loadWidget({
	apiKey: "your-api-key",
	clientId: "your-client-id",
	configId: "your-config-id",
	contents: [
		{
			id: "article-123",
			type: "discussion",
			container: "discussion-container",
		},
	],
	configOverrides: {
		discussion: {
			defaultSort: "LATEST",
			postsPerPage: 20,
		},
	},
});

<div id="discussion-container"></div>