Customize Chatbox

Help and Feedback Scripting Support
#1

Hey, I was wondering how I could make a customchatbox something like this and it still has the features where it fades out and fades in.

image

5 Likes
How Easy Is This To Do(Roblox Chat Design)
How can I change how the chat box looks?
#2

You’d have to edit the core chat script.
As for how you’d have to edit it, that’d be up to you, such as things as changing fonts or text colours.
Sadly I wouldn’t have the closest idea of how to do more advanced work, for example things like the whisper function or friend joined.
image

#3

AlvinBlox made a video on this once. I’ll link it below.

5 Likes
#4

A simple way to do that is hiding the main chatbox, so the idea is that the chatbox works even when it’s hidden.

So you can make a custom chatbox using player.chatted event which returns the message to you as well.

2 Likes
#5

Editing the Chat scripts is not a good idea for this, it is much easier to just create your own chat system.

People think that making a custom chat is something that is extremely difficult, but it’s not. As long as you have an understanding of TextLabels, TextBoxes, and TextService you can easily create one. You have a lot more flexibility with your own system over a premade one.

Here is some pseduo code the “fade” system, you will need to add some of your own code:

local function fade(toggle)
    if toggle then
       -- set everything to transparency 1
    else
       -- set everything to visible again
    end
end

textBox.Focused:Connect(function()
    fade(false)
end)

textBox.FocusLost:Connect(function(enterPressed)
    fade(true)
    if enterPressed then
        -- fire a remote event with the textBoxes text and clear the box.
    end
end)

Clip of my own chat system:

10 Likes
#6

Editing default roblox chat system:
When you press play in studio, you can open the chat instance in your explorer. All the core modules that handle the roblox chat are in there. Simply copy everything in there and go back to studio and paste it in that chat instance. From there you can edit anything you want in there. It’s fully customizable.

Making your own custom chat system:
This can easily be done with remotes. When a player enters something into a chat box and presses enter or send, have a remote send information to the server with all the data you want and have the server FireAllClients with the data that was sent. The information sent from the server will be used to show everyone else the message/data. Client(messager) > Server(filters message ect) > All Clients(shows message + any other data you want)

3 Likes
#7

nothing pops up in the chat instance

1 Like
#8

make sure you have your ChatVersion set to LegacyChatService

1 Like
#9

This is a great way to customise your game. Here’s how I’ve done it before:

  1. Disable the default chat entirely: StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Chat, false)
  2. Create your chat box UI, ensure it has a textbox. You can edit the textbox to be more “chatbox-like”: TextBox | Documentation - Roblox Creator Hub
  3. Upon the TextBox’s .FocusLost event, fire a RemoteEvent (from client to server, and include the text from the textbox! Wipe the TextBox’s text here as well: TextBox.Text = ""
  4. Now, via use of TextService, you can filter your text on the server in response to your event! TextService | Documentation - Roblox Creator Hub
  5. Finally, we can use :Chat() on the server, on the player’s head and your character should say what you entered into your textbox!
    Lmk if you’ve got any issues still!