Sample chat UI

The Unreal Chat SDK ships with a plug-and-play chat UI built from UMG widgets so you can drop a full chat screen into your project without building one from scratch.

Starter sample

These widgets are starter samples you migrate into your project and customize. Treat them as a reference implementation, not a production UI component.

What is included

The widgets live under Content/SampleChat/ in the Unreal Chat SDK plugin and cover the full chat layout:

Widget / Asset	Path	Purpose
W_PubnubChat_Sample	Content/SampleChat/W_PubnubChat_Sample.uasset	Top-level chat screen. Composes the channel inbox and message view and handles sending, receiving, and scrolling.
W_PubnubChat_ChannelInbox	Content/SampleChat/W_PubnubChat_ChannelInbox.uasset	Channel list. Lets the user switch between conversations.
W_PubnubChat_Message	Content/SampleChat/W_PubnubChat_Message.uasset	Individual message row used inside the message list.
Textures/	Content/SampleChat/Textures/	Button states (T_PubnubChat_Button, T_PubnubChat_ButtonH, T_PubnubChat_ButtonS) and T_PubnubChat_Background used by the widgets.

Blueprint-only

The sample widgets are pure Blueprint. There is no C++ base class to subclass.

Prerequisites

Install and initialize the Unreal Chat SDK before using the sample widgets. Refer to Initial configuration.

Enable the sample

1. Enable the PubnubChatSDK and PubnubSDK plugins in your project and restart the editor.
2. In the Content Browser, open Settings -> Show Plugin Content to make plugin assets visible.
3. Navigate to Plugins -> PubNub Chat Content -> SampleChat. The three sample widgets and the Textures folder appear there.

Use the sample

Add W_PubnubChat_Sample to your HUD widget or to a new User Widget you create for the chat screen.

Initialize the Chat SDK first

Call InitChat on UPubnubChatSubsystem before the widget mounts. If the Chat instance is missing, the widget displays empty panels. For setup details, see Initialize PubNub Chat.

1. Open your HUD widget, or create a new User Widget that will host the chat.
2. In the Palette, search for W_PubnubChat_Sample and drag it onto the canvas. Use a Canvas Panel as its parent for the most layout flexibility.
3. Adjust the Anchors and Size on the placed widget to position the chat where you want it on screen.
4. If you created a new widget, add Blueprint logic to construct it and call Add to Viewport. Your Player Controller is usually the best place for that logic.
5. Optional: call Set Input Mode UI Only (or UI and Game) so the input field receives keystrokes and the player controller keeps gameplay input where needed.
6. Compile the Blueprint and start a Play-In-Editor session. The chat screen appears in the viewport.

Customize

Use the sample as a starting point and adapt it to your game:

Customization	Description
Migrate into your project	Right-click W_PubnubChat_Sample in the Content Browser, select Asset Actions -> Migrate, and pick your project's Content/ folder. Migrate the other widgets and the Textures/ folder so references stay intact.
Duplicate and rename	Once migrated, duplicate the widgets and rename them (for example, W_Game_Chat) so future plugin updates do not overwrite your edits.
Restyle	Swap the textures under Content/SampleChat/Textures/, change fonts and colors in the Designer tab, or replace panels with your own UMG elements.
Rebind Chat SDK calls	Open the Graph tab to change which channel the widget opens, how messages are filtered, or to hook into typing indicators, presence, and read receipts.
Themed variants	Duplicate W_PubnubChat_Sample to create themed variants (for example, lobby chat versus team chat) and spawn the one that fits the current level.