# How to make chat bubbles like Imessage **URL:** \ **Category:** Blueprint\ **Tags:** User-Interface, unreal-engine, UI, UE4-27, Blueprint, question\ **Created:** [April 17, 2022, 4:01pm UTC](https://forums.unrealengine.com/t/how-to-make-chat-bubbles-like-imessage/531563 "2022-04-17T16:01:49Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![aMustachedPotato](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/amustachedpotato/32/953940_2.png) [@aMustachedPotato](https://forums.unrealengine.com/u/aMustachedPotato)\ **Post date:** [April 17, 2022, 4:01pm UTC](https://forums.unrealengine.com/t/how-to-make-chat-bubbles-like-imessage/531563/1 "2022-04-17T16:01:49Z")
How would I make a chat bubble like Imessages uses. I have the round image effect, but I can’t figure out how to get the text to auto-fit inside to bubble. If anyone could help me out that would be great(Anything better than getting the pixel scale of each character and doing some math to auto fit)! ---
**Author:** ![BDC\_Patrick](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/bdc_patrick/32/1104221_2.png) [@BDC\_Patrick](https://forums.unrealengine.com/u/BDC_Patrick)\ **Post date:** [April 18, 2022, 10:46am UTC](https://forums.unrealengine.com/t/how-to-make-chat-bubbles-like-imessage/531563/2 "2022-04-18T10:46:49Z")
Small Pseudo Manual: You create a Widget. Delete the standard canvas, since you won’t need it for a Text Bubble. in the upper right corner of the Viewport, you’ll find the desired size as small Overlay Dropdown. This, right now, should be “Screen”. Changed it to “Desired Size” Add a Border and set its Brush to be your Beveled Image of your bubble. In the Brush Settings, set the draw Method to “Box”. Now you can enter the Margin of the Image. With that, you define the slicing and stretching parts of the Bubble. Make sure, if possible, to tick “Size to Content” at the Top of the Border Details. Now put a Text Object inside the Border. Setup the Appearance and Style. Now, scroll a bit down and you’ll find the Auto Wrap Option. Tick ist to true and set the Wrap at Float to your needs of a max Bubble Size. The Text should be present as a variable, too. now, when you give this Widget a new Text, it automatically wraps its content automatically, and the bubble stretches to fit the Text inside it. ---
**Author:** ![aMustachedPotato](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/amustachedpotato/32/953940_2.png) [@aMustachedPotato](https://forums.unrealengine.com/u/aMustachedPotato)\ **Post date:** [April 18, 2022, 6:29pm UTC](https://forums.unrealengine.com/t/how-to-make-chat-bubbles-like-imessage/531563/3 "2022-04-18T18:29:15Z")
Thank you so much for your help!! Worked perfectly! ---
**Author:** ![GsCreed](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@GsCreed](https://forums.unrealengine.com/u/GsCreed)\ **Post date:** [April 6, 2023, 1:22am UTC](https://forums.unrealengine.com/t/how-to-make-chat-bubbles-like-imessage/531563/4 "2023-04-06T01:22:05Z")
Does this method still work? As I tried, I failed to find out Size to content section. ---
**Author:** ![DuneGames](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/dunegames/32/538495_2.png) [@DuneGames](https://forums.unrealengine.com/u/DuneGames)\ **Post date:** [December 7, 2023, 10:56pm UTC](https://forums.unrealengine.com/t/how-to-make-chat-bubbles-like-imessage/531563/5 "2023-12-07T22:56:12Z")
Is there a video for this? I can’t seem to duplicate. There’s no slicing/stretching available There’s no Size to Content available What little I was able to duplicate ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/c/2/a/c2ac34d9515f6a5b5eae075cf217c293704ef6b9.png) ---
**Author:** ![Mistygo](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Mistygo](https://forums.unrealengine.com/u/Mistygo)\ **Post date:** [February 10, 2026, 8:03pm UTC](https://forums.unrealengine.com/t/how-to-make-chat-bubbles-like-imessage/531563/6 "2026-02-10T20:03:00Z")
Hi! Seems like this solution is not working in current versions (at least in 5.3), so here is another solution: 1. Create a widget, delete canvas. 2. Add `Size Box`, and put `Overlay` inside. 3. Add `Border` (or `Image`) under Overlay, set the Draw Method to Box. You can also do a nine-slice here. 4. And `Text Box` under Overlay and put your text there. 5. When you add this widget to the **parent** widget (like HUD), set “Size to Content” to Enabled. ✌