Custom chat bubble color

I have been looking for years on how to make a certain player’s chat bubble text be a different color.
This, for me, is hard since I’m kind of a beginner dev.

I have looked on youtube how to make it but there seems to be no video on what I was looking for.

I am puzzled and confused, can someone please help?

This has been asked many times before, most posts will direct you to this:

Please use the search bar before posting in the future.

I think you mistaken me, I want it to be for a certain player, not for everyone.

Ahah, sorry. I assumed you meant globally from the title of the thread. That thread still helps a lot, but you’ll just have to change the colors in a different place.

Here’s some steps to achieve this:

  1. Fork the chat system by play testing and copying all descendants of game.Chat, stop the play test and paste them into game.Chat to override the chat system.
  2. Open the BubbleChat script. At the top of the script, create your dictionaries to map UserIds against their custom chat color like so:
local bgColors = {
	[157510912] = Color3.fromRGB(192, 48, 32); -- UsernameMissingOrNil
	[692837183] = Color3.fromRGB(255, 215, 0); -- NormalBaconHair13
}

local textColors = {
	[157510912] = Color3.fromRGB(255, 255, 255); -- UsernameMissingOrNil
	[692837183] = Color3.fromRGB(16, 16, 16); -- NormalBaconHair13
}
  1. Add 2 parameters to the this:CreateChatLineRender function, one called bgColor, the other called textColor.
  2. Inside the same function, under the line that creates the chat bubble render (local chatBubbleRender = ...), add this code:
if bgColor then
	chatBubbleRender.ImageColor3 = bgColor
	chatBubbleRender.ChatBubbleTail.ImageColor3 = bgColor
end
  1. Inside the same function, under the line that creates the bubble text (local bubbleText = ...), add this code:
if textColor then
	bubbleText.TextColor3 = textColor
end
  1. Moving to the this:OnPlayerChatMessage function, pass the arguments bgColors[sourcePlayer.UserId], and textColors[sourcePlayer.UserId] to where this:CreateChatLineRender is called from inside this function.

After you’ve followed these steps, bubble chat messages should now be rendered in the specified colours you have chosen!

If you’d like to skip the steps and go straight to pasting the edited version of the chat, you can take this file and insert it into game.Chat: CustomChatBubbles.rbxm (114.4 KB)

NOTE FOR FUTURE VIEWERS: This chat script was forked on 11th of February 2019. I cannot guarantee that this will always work as the chat gets updated, but following the steps will give you a better chance at getting the latest chat features.

3 Likes

Thanks so much, I have been looking for years! This is what I needed. And again, thanks alot!

1 Like

@UsernameMissingOrNil

Do you think that this would be possible to do this without having to clone the Chat, but only by a single ServerScript?

It’s possible that you could get away with just cloning the BubbleChat script with little risk of any updates in the near-future breaking it. However, if and when they decide to update the chat entirely, I highly doubt they will have backwards compatibility for the spaghetti code chat we currently have. I highly suspect at some point in the future, that a chat update may break or cause problems for the forked BubbleChat script. This is why it’s common practise to fork the entire chat system when you make changes, as no modifications are guaranteed to be supported by future updates of the chat system.

1 Like