Roblox Tutorial - TextChatService

Welcome! :orangutan:


In today’s tutorial, we’ll be teaching you how you can use the brand-new TextChatService released by Roblox.

This feature allows you to:

I hope you enjoy today’s tutorial, let’s get started!

Enable Text Chat Service


:stop_sign: This step is essential to complete everything else on the list.

To enable the text chat service, it’s a simple task, first head to Model.

We’ll need to insert the TextChatservice from the advanced section. Once you’re in the Model tab, navigate to the advanced section, then click on service.

On a smaller screen?

If you’re on a smaller screen, the advanced tab may be under a dropdown.

image

Now we need to insert the service, to go ahead and do this I would recommend sizing up your “Insert Service” frame.

Gif of Insert service

Once it’s sized up you can go ahead and click on “TextChatService”, once we’ve done this click on insert.

Finally, we need to swap from the LegacyChat to the new TextChatservice. Look for TextChatService in explorer then change the Version from LegacyChat to TextChatService.

ChatVersion

:tada: You’ve now set up your TextChatService, you may now change anything of your choice!

Configure Chat Window


When we inserted the TextChatService it inserted 3 objects into TextChatservice, in this category we’re going to focus on just 2 of them, ChatWindowConfiguration & the ChatInputBarConfiguration.

2 Chat Window Options

Right now, these are a bit limited, however, we can enable and disable them, this allows us to hide the input bar to mute somebody if we wish to do so.

image

Customize Message Appearance


Right now, chat bubbles are the pretty plane, luckily, we can spice them up and make them look amazing. personally I :heart: these dark-themed chat bubbles!

Dark Themed Chat Bubbles

When we inserted the TextChatService it inserted an object called “BubbleChatConfiguration”.

BubbleChatConfiguration

This object has many properties we can mess around with to produce a picture of our choice, take a look!

BackgroundColor3 - Background Colour of your bubble
TextColor3 - Text Colour of your bubble
TextSize - Size of text inside your bubble
BubbleDuration - How long do you want the bubble to stay up
BubbleSpacing - Space between each bubble
Enabled - If bubble chat is enabled or disabled, (Enabled by default)
LocalPlayerStudsOffset - Where bubble will spawn.
MaxDistance - How far can you see the bubble from

With these properties we can get green bubbles with big text, this is what they look like!

:partying_face: Nice, you’ve now completed the bubble chat configuration guide!

Chat tags


Chat tags are a way to mark the significance of your name. Here is an example of a chat tag in-game!

image

Chat tags have all use cases, but in this scenario, we’re going to be making a VIP tag.

Copy this base code:

local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

TextChatService.OnIncomingMessage = function(message: TextChatMessage)
	local properties = Instance.new("TextChatMessageProperties")

	if message.TextSource then
		local player = message.TextSource
		if player.Name == "YourPlayerName" then
			properties.PrefixText = "<font color='YourColor'>YourTag</font> " .. message.PrefixText
		end
	end

	return properties
end

Make a local script and insert it in StarterPlayerScripts, give it a name of your choice! This script works by importing the players and TextChat service, when the TextChat service notices an incoming message, it gets the message. Following this, it creates a new TextChatMessageProperties, which creates new properties that we can alter, something such as a prefix text.

image

Our script next checks if there is a message, and then it gets the player, if the player matches a name it sets the prefix text.

To get the script working, replace YourPlayerName, with your username, mine would be Cookie_DevX. Next, we need to pick a colour for your tag, we need to supply this in an HTML value. We can use this HTML colour picker to our advantage.

Picking the colour

Once you’ve got the colour copy the Hex value. Keep it handy, the one I selected was: #fcc428

Where it says “your colour” paste your colour, For example:

properties.PrefixText = "<font color='#fcc428'>YourTag</font> " .. message.PrefixText

To set your tag name replace “YourTag” with a tag, for example: “VIP”, example:

properties.PrefixText = "<font color='#fcc428'>VIP</font> " .. message.PrefixText
An end script should look something like this
local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

TextChatService.OnIncomingMessage = function(message: TextChatMessage)
	local properties = Instance.new("TextChatMessageProperties")

	if message.TextSource then
		local player = message.TextSource
		if player.Name == "Cookie_DevX" then
			properties.PrefixText = "<font color='#fcc428'>VIP</font> " .. message.PrefixText
		end
	end

	return properties
end

This was my result:

image

:mirror_ball: Congratulations! You now have a custom chat tag!

Change Colour Of Usernames


This is simple to do, use the template below:

local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

TextChatService.OnIncomingMessage = function(message: TextChatMessage)
	local properties = Instance.new("TextChatMessageProperties")

	if message.TextSource then
		local player = message.TextSource
		if player.Name == "YourName" then
			properties.PrefixText = string.format("<font color='YourColor'>%s</font>", message.PrefixText)
		end
	end

	return properties
end

This script does everything that the previous script does. However, instead, it replaces the colour of your username.

To get started replace “YourName” with your name. For example, I’ll do the “Cookie_DevX”, example:

if player.Name == "Cookie_DevX" then

Picking the colour

Once you’ve got the colour copy the Hex value. Keep it handy, the one I selected was: #fcc428

Where it says “your color” paste your colour, For example:

properties.PrefixText = string.format("<font color='`#fcc428'>%s</font>"

This is what an end script should look like:

local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

TextChatService.OnIncomingMessage = function(message: TextChatMessage)
	local properties = Instance.new("TextChatMessageProperties")

	if message.TextSource then
		local player = message.TextSource
		if player.Name == "Cookie_DevX" then
			properties.PrefixText = string.format("<font color='#fcc428'>%s</font>", message.PrefixText)
		end
	end

	return properties
end

This is the result I got:

CustomNametag

:piñata: Great, you now have a working custom colour username!

Goodbye :wave:


I hope you enjoyed this tutorial; this is a wiki so feel free to edit away! :pencil:

Thanks for reading,

@cookie :cookie:

1 Like

Prefer Video form?

not a wiki! just telling u

Issue resolved, should be working now