Chat

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.

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 Chat Modes. Options include:

  • 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.

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

Font Size 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 Theme.

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

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.

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

Border Width 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

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: [email protected]

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

Last updated

Was this helpful?