Fuse Interactive Activities

Word Cloud

Submit words or phrases and watch an animated word cloud form in real-time.

Activity type: word_cloud

Configuration

Property	Type	Description	Default
`maxWordsPerUser`	number	Maximum number of words/phrases each participant can submit.	`3`
`prompt`	string	Optional prompt to guide submissions (e.g., "Describe your ideal vacation in one word").	`""`

Behavior

Participants type words or short phrases and submit them.
Each submission appears in the word cloud.
Words that are submitted by multiple participants appear larger in the cloud.
The cloud animates and rearranges as new words are added.
Each participant can submit up to maxWordsPerUser words.
This is a multi-action activity.

Aggregated State

Field	Type	Description
`words`	array	Words with `text` and `count` (number of times submitted).
`totalSubmissions`	number	Total number of word submissions.

CSS Selectors

.fuse-word-cloud, .fuse-cloud, .fuse-word, .fuse-input, .fuse-submit-btn, .fuse-hint, .fuse-status

Word Clouds are particularly effective for icebreakers, brainstorming, and gathering quick impressions from a group. The visual nature of the cloud makes it engaging for presentations.

Hot Takes

Agree or disagree with a bold statement. A live tug-of-war visual shows the split.

Activity type: hot_takes

Configuration

Property	Type	Description	Default
`statement`	string	The statement to agree or disagree with.	`""`
`agreeColor`	string	Color for the "Agree" side.	`"#27ae60"` (green)
`disagreeColor`	string	Color for the "Disagree" side.	`"#e74c3c"` (red)
`agreeLabel`	string	Custom label for the agree button (e.g., "Love it").	`""` (defaults to "Agree")
`disagreeLabel`	string	Custom label for the disagree button (e.g., "Hate it").	`""` (defaults to "Disagree")

Behavior

The bold statement is displayed prominently.
Two buttons are shown: Agree and Disagree.
Participants click one button to cast their vote.
A tug-of-war bar visualization shows the live percentage split between agree and disagree.
This is a single-action activity.

Aggregated State

Field	Type	Description
`statement`	string	The statement text.
`agreeCount`	number	Number of agree votes.
`disagreeCount`	number	Number of disagree votes.
`agreePercentage`	number	Percentage of agree votes (0-100).
`disagreePercentage`	number	Percentage of disagree votes (0-100).
`totalVotes`	number	Total votes cast.

CSS Selectors

.fuse-hot-takes, .fuse-statement, .fuse-tug-bar, .fuse-percentage--agree, .fuse-percentage--disagree, .fuse-vote-btn--agree, .fuse-vote-btn--disagree, .fuse-total-count

Q&A Board

Submit and upvote questions. Perfect for AMAs, events, and classrooms.

Activity type: qa_board

Configuration

Property	Type	Description	Default
`maxReplyDepth`	number	Maximum depth of replies/threads on questions.	`2`

Behavior

Participants submit questions as text.
All participants can upvote or downvote any question.
Questions are sorted by net score (most upvoted first).
This surfaces the most popular questions to the top.
This is a multi-action activity.

Aggregated State

Field	Type	Description
`questions`	ListItem[]	All submitted questions, sorted by score.

CSS Selectors

.fuse-qa-board, .fuse-list-item, .fuse-item-text, .fuse-item-author, .fuse-score, .fuse-upvote, .fuse-downvote, .fuse-input, .fuse-submit-btn, .fuse-hint

Q&A Boards are ideal for live events, webinars, and all-hands meetings. The upvoting mechanism ensures the most important questions rise to the top, making it easy for the presenter to prioritize.

Predictions

Make predictions and see the crowd consensus. Optionally reveal results later.

Activity type: predictions

Configuration

Property	Type	Description	Default
`question`	string	The prediction question (e.g., "Who will win the championship?").	`""`
`predefinedOptions`	array	Optional predefined options with `id` and `label`. If provided, participants choose from these.	`[]`
`allowCustom`	boolean	Whether participants can enter custom predictions in addition to or instead of predefined options.	`true`

Behavior

The prediction question is displayed.
If predefined options are provided, participants select from them.
If allowCustom is true, participants can type their own prediction.
After submitting, participants see the aggregated results.
Predictions are grouped by value, with the most popular shown first.
This is a single-action activity.

Aggregated State

Field	Type	Description
`predictions`	array	Unique predictions with `value`, `count`, and `percentage`.
`totalPredictions`	number	Total number of predictions submitted.

CSS Selectors

.fuse-predictions, .fuse-option, .fuse-option-label, .fuse-option-percentage, .fuse-input, .fuse-submit-btn, .fuse-hint, .fuse-consensus

Tier List

Drag items into S, A, B, C, D, F tiers and see the community average rankings.

Activity type: tier_list

Configuration

Property	Type	Description	Default
`items`	array	Items to be ranked into tiers.	`[]`
`tiers`	string[]	The tier labels (from best to worst).	`["S", "A", "B", "C", "D", "F"]`

Item Object

Field	Type	Description
`id`	string	Unique identifier.
`label`	string	Display text for the item.
`imageUrl`	string	Optional image URL for the item.
`mediaUrl`	string	Optional media URL.
`mediaType`	string	Media type: `image`, `video`, `icon`, or `qrcode`.
`iconName`	string	React-icons icon name (when mediaType is `icon`).
`iconColor`	string	Icon color (when mediaType is `icon`).
`qrCodeUrl`	string	QR code URL (when mediaType is `qrcode`).

Behavior

Items are displayed in an "unranked" pool.
Participants drag items into their chosen tier.
Once all items are placed, the ranking is submitted.
After submission, participants see the community average tier for each item.
This is a single-action activity.

Aggregated State

Field	Type	Description
`items`	array	Items with `id`, `label`, `imageUrl`, `avgTier` (community average), and `tierCounts` (how many placed it in each tier).
`tiers`	string[]	The tier labels.
`totalParticipants`	number	Total participants who submitted tier rankings.

CSS Selectors

.fuse-tier-list, .fuse-tier-row, .fuse-tier-label, .fuse-tier-item, .fuse-tier-badge, .fuse-consensus

Tier Lists support rich media items. You can use images, icons, or even QR codes for the items being ranked, making them visually engaging for product comparisons, character rankings, or any categorization exercise.

Caption This

Submit funny captions for an image and upvote the best ones. Comedy gold.

Activity type: caption_this

Configuration

Property	Type	Description	Default
`mediaUrl`	string	URL of the media to caption.	`""`
`mediaType`	string	Type of media: `image`, `video`, `icon`, or `qrcode`.	`"image"`
`imageUrl`	string	Legacy field for backward compatibility (use `mediaUrl` instead).	None
`iconName`	string	React-icons icon name (when mediaType is `icon`).	`""`
`iconColor`	string	Icon color.	`""`
`qrCodeUrl`	string	QR code URL (when mediaType is `qrcode`).	`""`

Behavior

The image (or other media) is displayed prominently.
Participants type and submit captions.
All participants can upvote or downvote captions.
Captions are sorted by net score, surfacing the best ones.
This is a multi-action activity.

Aggregated State

Uses the standard ListAggregatedState:

Field	Type	Description
`items`	ListItem[]	Submitted captions sorted by score.
`totalItems`	number	Total captions submitted.

CSS Selectors

.fuse-caption-this, .fuse-list-item, .fuse-item-text, .fuse-item-author, .fuse-score, .fuse-upvote, .fuse-downvote, .fuse-input, .fuse-submit-btn

Bracket

Tournament-style bracket where the crowd votes on each matchup to crown a champion.

Activity type: bracket

Configuration

Property	Type	Description	Default
`participants`	array	Array of bracket participants. Each has `id` and `label`.	`[]`

Behavior

Participants are paired into matchups in a tournament bracket format.
For each matchup, all participants vote for their preferred option.
Once voting for a round is complete, winners advance to the next round.
The bracket progresses through multiple rounds until a champion is crowned.
This is a multi-round activity: participants continue voting in each round.
The bracket automatically determines the number of rounds based on participant count.

Aggregated State

Field	Type	Description
`matchups`	BracketMatchup[]	All matchups across all rounds.
`currentRound`	number	The current active round.
`totalRounds`	number	Total rounds in the tournament.

Matchup Object

Field	Type	Description
`id`	string	Unique matchup identifier.
`optionA`	object	First option with `id`, `label`, and `votes`.
`optionB`	object	Second option with `id`, `label`, and `votes`.
`round`	number	Which round this matchup belongs to.
`winner`	string	ID of the winning option (set after the round completes).

CSS Selectors

.fuse-bracket, .fuse-matchup, .fuse-matchup-entry, .fuse-matchup-label, .fuse-matchup-votes, .fuse-round-label, .fuse-champion

For a proper tournament bracket, the number of participants should ideally be a power of 2 (4, 8, 16, 32). If the number is not a power of 2, some participants may receive a "bye" in the first round.

Map Pins

Pin your location on a map and see where everyone else is from in real-time.

Activity type: map_pins

Configuration

Property	Type	Description	Default
`mapCenter`	object	The initial center of the map with `lat` and `lng`.	`{ lat: 40, lng: -95 }` (center of US)
`mapZoom`	number	The initial zoom level of the map.	`3`
`prompt`	string	Optional prompt (e.g., "Pin where you're from!" or "Pin your favorite vacation spot").	`""`

Behavior

An interactive map is displayed.
Participants click on the map to place a pin at their desired location.
All pins appear in real-time for all participants.
Each pin shows the participant's display name on hover.
This is a single-action activity.

Aggregated State

Field	Type	Description
`pins`	array	All pins with `participantId`, `displayName`, `lat`, and `lng`.
`totalPins`	number	Total number of pins placed.

CSS Selectors

.fuse-map-pins, .fuse-hint, .fuse-status

Map Pins are excellent for distributed teams, conference audiences, or any scenario where you want to visualize the geographic distribution of your group. The initial center and zoom can be adjusted to focus on any region.

Activity Indicator Styles

All interactive activities support activity indicators -- floating notifications that appear when participants interact. You can configure the style in the Fuse settings:

Style	Description
`pill`	A pill-shaped notification that slides in from the side.
`float_up`	A notification that floats upward and fades out.
`spark`	A spark/flash effect at the interaction point.
`none`	Disable activity indicators entirely.

Activity indicators can be styled via the .fuse-activity-indicator CSS selector and the --fc-indicator-bg, --fc-indicator-text, and --fc-font-indicator CSS variables.