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! 
]
And you’re done! Now you have a cool-looking custom BubbleChat!
Final result:
Links:
- The game to see how the custom BubbleChat looks
- The modified BubbleChat model which helps you customize easily!
- The reply that helped me customize the color (@realmile) / How does my script actually work
Thanks for using my model inside your game 
! If it helped, support the model by pressing the 
and 
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
UserSpecificSettings = GamepassSettings
}
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!
