Public Chat

📘

Note: This feature is only available on mobile applications (iOS, Android, React Native) and web.
On CTV platforms, interactive features are not supported directly, but you can enable a second screen setup so viewers can participate from their phone while watching on TV.

StreamLayer provides channels where any viewer can join and experience livestream messaging in a public channel.
Viewers who join a channel can participate in conversation for a particular stream/event.

In order to join and initiate messages in a public channel, viewers are required to be authenticated with the StreamLayer SDK. Key features of the public chat messaging system are:

• Offline support: send messages, edit messages and send reactions while offline
• Link previews: generated automatically when you send a link
• Commands: type / to use commands like /giphy
• Reactions: long-press on a message to add a reaction
• Attachments: use the paperclip button to attach images and files
• Edit message: long-press on your message for message options, including editing
• Threads: start message threads to reply to any message
• Post emojis
• Invite friends

Step 1 - Find public chat sub-menu icon

Step 2 - Choose available channels and join public conversation

Custom Attributes and Themes are available:

Custom Attributes

<!--Public chat -->

<attr name="slrPublicChatMessageSenderBackgroundColor" format="reference|color"/>
<attr name="slrPublicChatMessageReceiverBackgroundColor" format="reference|color"/>
<attr name="slrPublicChatMessageSenderTextColor" format="reference|color"/>
<attr name="slrPublicChatMessageReceiverTextColor" format="reference|color"/>
<attr name="slrPublicChatMessageAvatarSize" format="reference|dimension"/>

Theme

<style name="StreamLayerSDK_PublicChat" parent="StreamLayerSDK_AppTheme">
   <item name="slrPublicChatMessageSenderBackgroundColor">@color/slr_blue80</item>
   <item name="slrPublicChatMessageReceiverBackgroundColor">@color/slr_gray700_a15</item>
   <item name="slrPublicChatMessageSenderTextColor">@color/slr_white</item>
   <item name="slrPublicChatMessageReceiverTextColor">@color/slr_white</item>
   <item name="slrPublicChatMessageAvatarSize">@dimen/slr_chat_message_avatar_size</item>
   <item name="streamUiTheme">@style/SlStreamTheme</item>
</style>

<style name="SlStreamTheme" parent="@style/StreamUiTheme">
   <item name="streamUiMessageListItemAvatarStyle">@style/StreamLayerSDK_MessageListAvatarTheme</item>
   <item name="streamUiChannelListItemAvatarStyle">@style/StreamLayerSDK_ChannelListAvatarTheme</item>
</style>

<style name="StreamLayerSDK_MessageListAvatarTheme" parent="StreamUi.MessageList.Item.Avatar">
   <item name="android:layout_width">@dimen/slr_chat_message_avatar_size</item>
   <item name="android:layout_height">@dimen/slr_chat_message_avatar_size</item>
</style>

<style name="StreamLayerSDK_ChannelListAvatarTheme" parent="StreamUi.MessageList.Item.Avatar">
   <item name="streamUiAvatarTextColor">@color/slr_white</item>
   <item name="android:layout_width">@dimen/slr_contact_avatar</item>
   <item name="android:layout_height">@dimen/slr_contact_avatar</item>
</style>

<array name="stream_ui_avatar_gradient_colors">
   <item>@color/slr_avatar_turquoise</item>
   <item>@color/slr_avatar_emerald</item>
   <item>@color/slr_avatar_piter_river</item>
   <item>@color/slr_avatar_amethyst</item>
   <item>@color/slr_avatar_wet_asphalt</item>
   <item>@color/slr_avatar_green_sea</item>
   <item>@color/slr_avatar_nephritis</item>
   <item>@color/slr_avatar_belize_holde</item>
   <item>@color/slr_avatar_wisteria</item>
   <item>@color/slr_avatar_midnight_blue</item>
   <item>@color/slr_avatar_sunflower</item>
   <item>@color/slr_avatar_carrot</item>
   <item>@color/slr_avatar_alizarin</item>
   <item>@color/slr_avatar_concrete</item>
   <item>@color/slr_avatar_orange</item>
   <item>@color/slr_avatar_pumpkin</item>
   <item>@color/slr_avatar_pomegranate</item>
   <item>@color/slr_avatar_silver</item>
   <item>@color/slr_avatar_asbestos</item>
</array>