Custom text chat UI

This example shows how to use the TextChatService class to design your own frontend. It reuses the default text channels from CreateDefaultTextChannels and is very simple compared to the default UI.

Disable the default UI that comes with the TextChatService by setting the ChatWindowConfiguration.Enabled and ChatInputBarConfiguration.Enabled properties to false in Studio's Properties window.

Create a replacement for the chat input bar. This is the text box that emits messages when the user presses Enter.

Create a ScreenGui and parent it to StarterGui.
Create a TextBox and parent it to the new ScreenGui, then reposition and resize it as desired.
Create a LocalScript and parent it to the new TextBox.

Add the following code to the LocalScript:

  ```lua title="Client"
  local TextChatService = game:GetService("TextChatService")

  -- RBXGeneral is the default public channel
  local RBXGeneral = TextChatService:FindFirstChild("TextChannels"):WaitForChild("RBXGeneral")

  local textBox = script.Parent
  textBox.FocusLost:Connect(function(enterPressed)
      local text = textBox.Text
      if enterPressed and #text > 0 then
          local success, response = pcall(function()
              return RBXGeneral:SendAsync(textBox.Text)
          end)

          if not success then
              RBXGeneral:DisplaySystemMessage("Failed to send message")
          end

          -- Users expect the input box to be cleared after sending a message
          textBox.Text = ""
      end
  end)
  ```

Create a replacement for the chat window. This is the ScrollingFrame that displays messages as they are received from TextChatService.MessageReceived. This step also creates a UIListLayout to automatically layout the messages.

Create another new ScreenGui and parent it to StarterGui.
Create a ScrollingFrame and parent it to the ScreenGui, then reposition and resize it as desired.
Create a UIListLayout and parent it to the ScrollingFrame.
Create a LocalScript and parent it to the ScrollingFrame.

Add the following code to the LocalScript:

local TextChatService = game:GetService("TextChatService")

-- Function to create a new text label for each message received
local function addMessageGui(textChatMessage: TextChatMessage)
    local isOutgoingMessage = textChatMessage.Status == Enum.TextChatMessageStatus.Sending

    local parent = script.Parent

    local originalLabel = parent:FindFirstChild(textChatMessage.MessageId)
    if originalLabel then
        originalLabel.Text = textChatMessage.Text
        originalLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
    else
        local textLabel = Instance.new("TextLabel")
        textLabel.BorderSizePixel = 0
        textLabel.Font = Enum.Font.BuilderSans
        textLabel.TextSize = 18
        textLabel.TextXAlignment = Enum.TextXAlignment.Left
        textLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
        textLabel.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
        textLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
        textLabel.Name = textChatMessage.MessageId
        textLabel.AutomaticSize = Enum.AutomaticSize.XY
        textLabel.Text = textChatMessage.Text
        textLabel.Parent = parent
    end
end

-- Start listening for incoming messages
TextChatService.MessageReceived:Connect(addMessageGui)

Note

	When using the [`TextChatService.MessageReceived`](/docs/textchatservice#textchatservice-messagereceived) event, it's important to check if the message already exists in the chat window. This event is called once when sending and once when the message is received from the server.

Test your game by sending messages in the chat input bar. You should see the messages appear in the chat window. You can then expand on this example by adding features such as focusing the TextBox when a key is pressed or adding chat tags.