Flux Product Docs
  • What is Flux?
  • Guides
    • Creating a Premium Video
    • Creating Your First Site
    • Creating a Countdown
    • Creating a Navigation Bar
    • Creating a Group
    • Custom 404 Page
    • Adding a Favicon to Your Site
    • Adding Videos to Your Site
    • Managing Your Guest List
    • Asset Management
    • Creating Sites from Site Templates
    • Publishing Site Versions
    • Advanced Debugging
  • Fundamentals
    • Key Concepts
    • Sites
    • Guests
    • Environments
      • Show Variables
    • Flows
      • Anatomy of a Node
      • Connecting Nodes and Building Flows
      • Passing Data
      • Scope
      • Interpolation
    • Keyboard Shortcuts
      • Keyboard Shortcuts - Page Editor
    • Animation States
    • Local Variables
    • Groups
  • Use Cases
    • For Designers
    • For Engineers
      • Custom CSS
      • Custom Modules
    • For Event Manager
      • Intercom Integration
  • Documentation
    • FAQ
    • Glossary
    • 🚀Show Controller
      • Modes
    • Domains and Subdomains
      • Hover
      • AWS Route 53
    • Premium Live Channels
    • Basic Video
    • Premium Video
      • AI Generated Subtitles
      • Supported Input Codecs and Containers
      • Supported Language Labels
      • Serverside Forensic Watermarking
    • Flow Nodes
      • Middleware
  • Modules
    • Access Code
    • Audio
    • Button
    • Carousel
    • Chat
    • Checkbox
    • Container
    • Countdown
    • Date
    • Embed
    • Image
    • Intercom
    • Link
    • Lottie
    • Page
    • Meter
    • Modal
    • Photobooth Gallery
    • Open Login
    • QR Code
    • Radio
    • Rich Text
    • Stack
    • Style
    • Spline
    • Switch
    • Text Input
    • Video
  • Template Guides
    • NatGeo FYC
      • Adding a Panel
    • Meow Wolf All Shrimps
  • 🚀Change Logs
    • July 12, 2024
    • June 08, 2024
    • April 26, 2024
    • April 12, 2024
    • March 29, 2024
    • March 15, 2024
    • March 1, 2024
    • September 2022
    • August 2022
    • July 2022
    • June 2022
Powered by GitBook
On this page
  • Overview
  • Chat Modes
  • Properties
  • Quick Access Emoji
  • Nodes
  • Broadcasters
  • Listeners

Was this helpful?

  1. Modules

Chat

Last updated 2 years ago

Was this helpful?

Different states available for Chat module

Overview

The Chat module can be used to allow attendees to chat on a specific page of a site/event. This module provides settings such as emoji only mode to prevent word-based messaging, as well as verified user only mode to allow for verified user messaging.

Be Aware!

Chat modules can only be placed on private pages. If a chat module is placed on a public page, it will not appear.

Chat Modes

Default

Key: default

This is the standard chat experience. All logged in users can send messages.

Emoji Only

Key: emoji

In Emoji Only mode, your chat is set so users can only send send emojis from the selected Quick Access Emoji.

Verified Only

Key: verified

In Verified Only mode, your chat is set so only verified users are allowed to send chat messages.

Properties

Avatar Set (required) Dropdown Sets the avatars shown next to a guest's name in chat. Options available include:

  • None

  • Initials

  • ProudFamily

  • Custom Random

Initial Chat Visibility (required) Dropdown - visible or hidden Sets the initial visibility of the chat. If set to hidden, the chat module will be minimized when the page loads.

  • default

  • emoji

  • verified

Theme (required) Dropdown - dark or light Sets the theme of the chat module.

Quick Access Emoji

Emoji(s) (required) List of or a singular emoji Array of reaction emojis displayed for users to easily use in chat.

Reactions Type Dropdown If set, allows users to use the selected reaction on chat messages. Options include:

  • None

  • Full

  • Like

Room Name String Sets a name for the "chat room". If not provided, this property defaults to the page path.

Providing a room name enables multiple chat modules on the same page or to reuse the chat room across different pages in your site.

Chat Input Background Color String - Valid color string (white) or hex code (#FFFFF)

If defined, overrides background color of chat input.

Chat Background Color String - Valid color string (white) or hex code (#FFFFF) If defined, overrides the background color of the chat container and messages.

Chat Message Color String - Valid color string (white) or hex code (#FFFFF) If defined, overrides the text color of chat messages.

Rounded Corners Checkbox, default disabled If enabled, adds rounder corners to the chat.

Display Chat Shadow (optional) Checkbox, default disabled If enabled, adds a drop shadow to the chat.

Display Chat Border (optional) Checkbox, default disabled If enabled, allows you to show or hide the chat border.

Send Button Arrow Color String - Valid color string (white) or hex code (#FFFFF) Sets the arrow button color.

Support Email String Displays defined value for support-related questions. Example: support@example.com

Pin Support Messages Checkbox, default disabled If enabled, the most recent message sent by the guest associated with the Support Email will be pinned to the top of chat once.

Nodes

Broadcasters

Chat:visibility-changes

Broadcast event to change chat visibility

Parameters

visibility - Will return hidden or visible

Chat:on-change-mode

Broadcast event on mode change this will update modes for emoji only and verified user modes

Parameters

chatMode - default | emoji | verified

Chat:on-message-send

Broadcast event on message sent

Listeners

Chat:toggle-visibility

Listens to broadcast events that toggle chat visibility

Chat:set-avatar

Listens to avatar settings for a user

Parameters

avatarSrc

Chat:change-mode

Listens to broadcast event on-change-mode

Parameters

chatMode

Chat:animationState

Listens to animation state for chat module animation

Parameters

stateName

Chat Mode (required) Dropdown Can be used to select the mode of the Chat Module. To learn more about the different settings of each mode, see . Options include:

String - Arial Sets the font for the chat to the specified name or generic family name

String Sets the font size. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 16px or 2em

UserName Color String - Valid color string (white) or hex code (#FFFFF) If defined, overrides the default username color that is inherited by the .

Verified UserName Color String - Valid color string (white) or hex code (#FFFFF) Sets the default username color for that is inherited by the .

String - Valid color string (white) or hex code (#FFFFF) Sets the border color.

String Sets the border width for the chat border. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 16px or 2em

Chat Modes
Font Name
font-family
Font Size
Theme
Verified users
Theme
Border Color
Border Width