How to enable NEW bubble chat, change color & font

Old Bubblechat Method

Hey developers!
I’m here with my first ever tutorial on DevForum. I’ll be showing you guys how to enable bubble chat, and customize it easily! It will include-

  • Enabling BubbleChat
  • Changing BubbleChat Font
  • Changing BubbleChat Color

Let’s not talk too much and start!


Step 1: Enabling Bubblechat

Insert a LocalScript in ReplicatedFirst. Now write this script inside the LocalScript.

local Chat = game:GetService("Chat")

Chat:RegisterChatCallback(Enum.ChatCallbackType.OnCreatingChatWindow, function()
    return {
        ClassicChatEnabled = true,
		BubbleChatEnabled = true,
    }
end)

Here, if ClassicChatEnabled = true then the classic chat will be enabled. If false, then it’ll be disabled. Same for the BubbleChatEnabled as well. Pretty simple, huh?


Step 2: Changing BubbleChat Color & Font

Take this model, insert it in your game. It should insert a LocalScript called “BubbleChat”. Once you have taken it, put it inside Chat.

To change Bubble color, find the BubbleColor Color3Value inside the script. Change it’s value to any color you want.
To change Text color, find the TextColor Color3Value inside the script. Change it’s value to any color you want.

To change Font, Open the script. And in line 10, you’ll see this line:
local chatBubbleFont = Enum.Font.SourceSans
Here, replace SourceSans with any Font you want. If you don’t know what fonds exists, click below.

List of fonts
  • Arcade
  • Antique
  • Arial
  • ArialBold
  • Bodoni
  • Cartoon
  • Code
  • Fantasy
  • Gotham
  • GothamBold
  • GothamSemiBold
  • GothamBlack
  • Highway
  • Legacy
  • SciFi
  • SourceSans
  • SourceSansBold
  • SourceSansSemibold
  • SourceSansLight

Default Background Color: Black
Default Text Color: Cyan
Default Text Font: Cartoon

[ Credits to @realmile for this awesome idea! Here’s the reply which gave me this idea. I just modified it and simplified it. Give this man a cookie! :clap: ]



And you’re done! Now you have a cool-looking custom BubbleChat! :clap:

Final result:
image

Links:


Thanks for using my model inside your game :heart:! If it helped, support the model by pressing the :+1: and :star: button of the model! Any suggestion? Feel free to message me here or in Discord, Techy#9999!


Hey developers,
The new bubble chat (of 2020) was released and this time, it made it VERY easy to customize the bubblechat. But I am still keeping the old bubblechat method, but I do not recommend using it since it’s deprecated.

From this post, you’ll be able to:

  • Enable Bubble Chat for your game
  • Change Bubble Chat color
  • Change Bubble Chat font
  • Change distance between bubble and head (useful for overhead GUIs)
  • Change corner radius
  • And many more!

Though this is already included in the original announcement post, I’ll use the same script, but in details. Let’s start!


Enabling Bubblechat

It’s really easy to enable bubble chat now. To enable bubble chat, find Chat in Explorer and open it’s properties. Then set BubbleChatEnabled value to true. And bam! You enabled bubblechat for your game!

Customizing

It’s way a lot easier to customize bubble chat now. To customize, get this model and insert it. It should insert a LocalScript. Put the LocalScript inside ReplicatedFirst and open the script to customize. You can also copy the code below and paste it inside the LocalScript if you don’t want to take the model.

Customize Script
if game.Chat.BubbleChatEnabled == false then
	print("Bubblechat is disabled. Did you enable it from Chat properties?")
end

local settings = {
	BubbleDuration = 15,
	MaxBubbles = 3,
	
	BackgroundColor3 = Color3.fromRGB(250, 250, 250),
	TextColor3 = Color3.fromRGB(57, 59, 61),
	TextSize = 16,
	Font = Enum.Font.GothamSemibold,
	Transparency = .1,
	CornerRadius = UDim.new(0, 12),
	TailVisible = true,
	Padding = 8,
	MaxWidth = 300,

	VerticalStudsOffset = 0,

	BubblesSpacing = 6,

	MinimizeDistance = 40,
	MaxDistance = 100,
}

pcall(function()
	game:GetService("Chat"):SetBubbleChatSettings(settings)
end)

Now, let’s come to the point. What does what do? Most important properties and their default values are described here.


(Not all properties are mentioned here)

Edit the customize script according to the what you want, and customize the new bubble chat easily!


Since this post got so many views, I decided to make a plugin to customize bubble chat easily, without any scripting knowledge. And here it is bois!

Banner


Links

119 Likes

FYI: Instead of forking, you can simply bind a function to Chat::RegisterChatCallback for specifically the ChatCallbackType of OnCreatingChatWindow and return your dictionary of settings to be merged with ChatSettings. This must be done in a LocalScript within ReplicatedFirst (chat window is created pretty early).

Sadly, this excludes customisation however.

14 Likes

You should just be able to fork the bubble chat script and the rest will work.

It will work but forking means using current version.
When chat updates, you’ll be left with old version and will have to migrate it manually.

1 Like

I know.
But he’s forking the whole chat, while instead you can just fork the bubble chat script.

Thanks! I’ll update this post!

Edit: UPDATED

2 Likes

This is an easy way to customise your scripts in a game, I will definitely use this guide to make an easier way for people with epilepsy in my game for easier reading for the chat messages. I really appreciate it and will momentarily add it to my game, thank you. :wink:

1 Like

The model and the tutorial as well has been updated. Due to popularity, I have decided to make it more easier to use. Now you can change values to change color. You no longer have to edit the script to change colors.

Thanks for this tutorial, really appreciate it :slight_smile:

I have updated the post to make it comfortable with the newest bubble chat.

5 Likes

I have attempted to edit the in-game new bubble chat but i doesn’t seem to be changing at all after the changing it.

I do not know what is going on. I have tried the same thing from the original post of the release of this new feature but also doesn’t work.

4 Likes

Move the LocalScript to StarterGui that should do it :+1:

2 Likes

This bubble chat was released recently, thus it has tons of bugs. For a lots of users, bubble chat’s body doesn’t appear in Studio. And some players can’t see the bubble chat as well. As said in the original post, 20% of the mobile players can’t see the new bubble chat. So I’d recommend you to wait until the bugs are fixed. Or try some methods, as @AlejandroDZ said.

2 Likes

It appears that the bubble chat body for the Roblox studio gameplay has been fixed.

EDIT: I will be trying the other method tho.

2 Likes

Do you still have the issue? You still can’t see the bubble chat? Make sure you enabled bubble chat, and put the code into a LocalScript and put the Script inside ReplicatedFirst.

1 Like

Oh, then it appears that you have made a mistake here if I should put it in ReplicatedFirst. I will be trying ReplicatedFirst and StarterGui.

2 Likes

Oops, looks like i said the wrong thing. My bad, extremely sorry. Will fix this now.

1 Like

It’s okay. Everybody does a mistake sometimes.

1 Like

It appears that there was an error within the post and it’s actual place should be in ReplicatedFirst.

I do appreciate your help tho!

2 Likes