---
source_url: https://www.pubnub.com/docs/chat/unreal-chat-sdk/build/sample-chat-ui
title: Sample chat UI
updated_at: 2026-06-05T11:10:11.269Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


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

:::note 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](https://github.com/pubnub/unreal-engine-chat) 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. |

:::note 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](https://www.pubnub.com/docs/chat/unreal-chat-sdk/build/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.

:::note 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](https://www.pubnub.com/docs/chat/unreal-chat-sdk/build/configuration#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](https://www.pubnub.com/docs/chat/unreal-chat-sdk/build/features/channels/typing-indicator), [presence](https://www.pubnub.com/docs/chat/unreal-chat-sdk/build/features/users/presence), and [read receipts](https://www.pubnub.com/docs/chat/unreal-chat-sdk/build/features/messages/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. |