How to enable NEW bubble chat, change color & font for each player

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
  • Apply backgrounds to bubble chat
  • Make special bubble chat for special players
  • 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. If you don’t know something about what to do - check the bubble chat documentation here.

Customize Script
game.Chat.BubbleChatEnabled = true

local settings = {		
	--[[ DELETE THIS LINE IF YOU HAVE BACKGROUND IMAGE
	BackgroundImage = {
		Image = "rbxassetid://6733332557",
		ScaleType = Enum.ScaleType.Slice,
		SliceCenter = Rect.new(40, 40, 360, 160),
		SliceScale = 0.5
	},
	    DELETE THIS LINE IF YOU HAVE BACKGROUND IMAGE ]]
	
	--[[ DELETE THIS LINE IF YOU WANT GRADIENT BACKGROUND
	
	BackgroundGradient = {
		Enabled = true,
		Rotation = 90,
		Color = ColorSequence.new(Color3.fromRGB(150, 225, 255), Color3.fromRGB(50, 115, 255)),
		Transparency = NumberSequence.new({
			NumberSequenceKeypoint.new(0, 0.2),
			NumberSequenceKeypoint.new(1, 0.5)
		})
	},
	
	    DELETE THIS LINE IF YOU WANT GRADIENT BACKGROUND]]

	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,
	
	--[[ DELETE THIS LINE IF YOU WANT CUSTOM ANIMATION  
	
	SizeAnimation = {
		SpringDampingRatio = 0.25
	},
	TransparencyAnimation = {
		SpringFrequency = 3
	},
	    DELETE THIS LINE IF YOU WANT CUSTOM ANIMATION]]
	
	
}

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

Per-player Customization

With the feature of UserSpecificSettings you can now apply custom settings for individual players. Meaning, you can make different bubble chats for each player. It can be useful to use as VIP Perk, Admins etc. Below, I’ll be posting three different scripts that’ll use the following feature.

Local Player Settings

The following script will make the players see their own bubble chat one color, and others a different color. Put this LocalScript in StarterPlayerScript. You can also get the script here.

--- Settings ---
-- The following settings will apply to the local player
local LocalBackgroundColor = Color3.fromRGB(45, 52, 54)
local LocalTextColor = Color3.fromRGB(223, 230, 233)

-- The following settings will apply to other players
local ServerBackgroundColor = Color3.fromRGB(250, 250, 250)
local ServerTextColor = Color3.fromRGB(57, 59, 61)

------------------


local Players = game:GetService("Players") -- Gets the Players service
local ChatService = game:GetService("Chat") -- Gets the Chat service
local MarketPlaceService = game:GetService("MarketplaceService") -- Gets the Marketplace service
local GamepassOwnersIds = {}
ChatService.BubbleChatEnabled = true -- Enables the bubble chat

local localPlayerSettings = {
	BackgroundColor3 = ServerBackgroundColor, -- Background Color of the bubblechat
	TextColor3 = ServerTextColor, -- Text Color of the bubble chat
	TextSize = 16, -- Text size of the text in bubble chat
	Font = Enum.Font.GothamSemibold, -- Font of the text in bubble chat
	
	UserSpecificSettings = {
		[Players.LocalPlayer.UserId] = {
			BackgroundColor3 = LocalBackgroundColor, -- Background Color of the bubblechat
			TextColor3 = LocalTextColor, -- Text Color of the bubble chat
			TextSize = 16, -- Text size of the text in bubble chat
			Font = Enum.Font.GothamSemibold, -- Font of the text in bubble chat
		}
	}
}
-- Apply the settings --

pcall(function()
	ChatService:SetBubbleChatSettings(localPlayerSettings)
end)
Player Only Settings

The following script will make the given UserId player special bubble chat with background color and text color… Put this LocalScript in StarterPlayerScripts. You can also get the script here.

--- Settings ---

local SpecialUserId = 468527306 -- The user id of the player who will have different bubble chat color

-- The following settings will apply to the special user id given above
local LocalBackgroundColor = Color3.fromRGB(9, 132, 227)
local LocalTextColor = Color3.fromRGB(223, 230, 233)

-- The following settings will apply to other players
local ServerBackgroundColor = Color3.fromRGB(250, 250, 250)
local ServerTextColor = Color3.fromRGB(57, 59, 61)

------------------


    local Players = game:GetService("Players") -- Gets the Players service
    local ChatService = game:GetService("Chat") -- Gets the Chat service
    local MarketPlaceService = game:GetService("MarketplaceService") -- Gets the Marketplace service
    local GamepassOwnersIds = {}
    ChatService.BubbleChatEnabled = true -- Enables the bubble chat


    local localPlayerSettings = {
    	BackgroundColor3 = ServerBackgroundColor, -- Background Color of the bubblechat
    	TextColor3 = ServerTextColor, -- Text Color of the bubble chat
    	TextSize = 16, -- Text size of the text in bubble chat
    	Font = Enum.Font.GothamSemibold, -- Font of the text in bubble chat
    	
    	UserSpecificSettings = {
    		[SpecialUserId] = {
    			BackgroundColor3 = LocalBackgroundColor, -- Background Color of the bubblechat
    			TextColor3 = LocalTextColor, -- Text Color of the bubble chat
    			TextSize = 16, -- Text size of the text in bubble chat
    			Font = Enum.Font.GothamSemibold, -- Font of the text in bubble chat
    		}
    	}
    }
    -- Apply the settings --

    pcall(function()
    	ChatService:SetBubbleChatSettings(localPlayerSettings)
    end)
Gamepass Owners Settings

The following script will make the players who owns a specific gamepass’ bubble chat look dark. You can modify the settings of gamepass owner chat as well.

local Players = game:GetService("Players") -- Gets the Players service
local ChatService = game:GetService("Chat") -- Gets the Chat service
local MarketPlaceService = game:GetService("MarketplaceService") -- Gets the Marketplace service
local GamepassSettings = {} -- Ignore this table, it's used in the script

local GamepassID = 0 -- Place gamepass ID, owners of it will enjoy dark bubble chat

ChatService.BubbleChatEnabled = true -- Enables the bubble chat

local GamepassOwnerChatSettings = { -- Settings of the person who owns the gamepass [DARK]
	BackgroundColor3 = Color3.fromRGB(45, 52, 54), -- Background Color of their bubble chat
	TextColor3 = Color3.fromRGB(223, 230, 233), -- Text Color of their bubble chat
	TextSize = 16, -- Text size of the text in bubble chat
	Font = Enum.Font.GothamSemibold, -- Font of the text in bubble chat	
}

local Settings = { -- Settings that is applied to every person who doesn't own the gamepass [DEFAULT]
	BackgroundColor3 = Color3.fromRGB(255, 255, 255), -- Background Color of the bubblechat
	TextColor3 = Color3.fromRGB(0, 0, 0), -- Text Color of the bubble chat
	TextSize = 16, -- Text size of the text in bubble chat
	Font = Enum.Font.GothamSemibold, -- Font of the text in bubble chat
}


local function UpdatePlayerBubbleChats()
	-- This function gets all players from game and applies dark chat to them if they own the gameapss
	
	for i, v in pairs(game.Players:GetChildren()) do
		if MarketPlaceService:UserOwnsGamePassAsync(v.UserId, GamepassID) then
			table.insert(GamepassSettings, v.UserId, GamepassOwnerChatSettings)
		end
	end

	game:GetService("Chat"):SetBubbleChatSettings(Settings)
end

game.Players.PlayerAdded:Connect(function()
	UpdatePlayerBubbleChats()
end)


game.Players.PlayerRemoving:Connect(function()
	UpdatePlayerBubbleChats()
end)

pcall(function()
	UpdatePlayerBubbleChats()
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

175 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.

15 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.

3 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

For some reason the background and text color doesn’t change. Amazing plugin though! Beautiful design as well :slight_smile: