# What you can build with uchat

> Learn the three ways to add features to a uchat chat room on your site, and which one to pick for each job.

A uchat chat room goes on your site with two lines of install code. On top of that, you can add features with page scripts, the skin UI API, and the server API. This page explains what each one does and when to pick which.

## Starting point: the install code {#install}

Every feature starts with putting a chat room on a page. Load `uchat.js` once and add a `<u-chat room="my-room">` tag, and the chat room opens in that spot. → [5-minute setup](/en/doc/1.2)

To use your site members' nicknames and permissions in the chat room, add member integration. → [Member integration](/en/doc/2.1)

## Three ways to extend {#three-ways}

| Method | Runs in | What it does | Reference |
| --- | --- | --- | --- |
| Page script | JavaScript on your page | Gets the chat room object (`room`) with `U.chat()` and reacts to events such as joins and messages, or sends messages, runs commands, and shows notice lines | [U.chat() and the room object](/en/doc/3.2), [Events](/en/doc/3.3) |
| Skin UI API | JavaScript on your page (drawn inside the default skin) | Adds menu buttons, nickname menu items, dialogs, areas above and below the chat, overlay areas, and nickname and message styling to the default skin (`basic-v2`) | [Skin UI API](/en/doc/3.4) |
| Server API | Your server | Reads chat room visitor statistics with REST requests, or sends data to a chat room channel | [Server REST API](/en/doc/3.6) |

Page scripts and the skin UI API start from the same `room` object. The skin UI API lives in `room.skin`, so once you can write a page script, you can use it right away.

## Channels: real-time data {#channels}

A channel is a path for exchanging data that is not a chat message, either between people in the same chat room or between your server and the chat room. In a page script you open one with `room.plugin.add('channel-name')`, and on your server you send to the same channel with the server API.

- Between users: when everyone's screen must stay in sync, as in watch-together, games, or polls → [Sending and receiving real-time data](/en/doc/2.4)
- From your server to the chat room: when you announce site events such as payments, orders, or a stream going live → [Sending notifications from your server to a chat room](/en/doc/2.5)

Send limits and storage sizes are in [Channel API and limits](/en/doc/3.5).

## What to pick {#choose}

| What you want to do | Method | Start here |
| --- | --- | --- |
| Greet people who join, react on the page when a certain word appears | Page script (events) | [Your first script](/en/doc/1.3) |
| Change or block outgoing messages | Page script (`before.` events) | [Events](/en/doc/3.3) |
| Several chat rooms on one page, attach and detach in an SPA | Page script | [Async loading and multiple chat rooms](/en/doc/2.2) |
| Put buttons, input boxes, or banners inside the chat room | Skin UI API | [Extending the skin UI](/en/doc/2.3) |
| Highlight admin nicknames, color the background of certain messages | Skin UI API (resolver) | [Decorate nicknames and messages](/en/doc/4.3) |
| Keep the same video or game state for everyone in the room | Channel | [Sending and receiving real-time data](/en/doc/2.4) |
| Announce site events in the chat room | Server API + channel | [Sending notifications from your server to a chat room](/en/doc/2.5) |
| Show the current visitor count on your site | Server API | [Server REST API](/en/doc/3.6) |

You will often combine methods. For example, a [Payment completion notice](/en/doc/4.4) is sent with the server API, received through a channel in a page script, and shown in the chat room.

## Next steps {#next}

1. Add a chat room with [5-minute setup](/en/doc/1.2).
2. Receive events with [Your first script](/en/doc/1.3).
3. Read the guide for the feature you want to build, and look up details in the reference. Finished code is in the [examples](/en/doc/4.1).

Before going public, check the [Security checklist](/en/doc/2.6).