# Your first script

> Use a page script to receive the chat room join event, show a notice line, and send a message.

Attach a page script to your installed chat room. It shows a greeting notice when you join and sends a message when you click a button. Start from a page where you finished [5-minute setup](/en/doc/1.2).

## Full code {#full-code}

Paste the code below into a single HTML file and open it.

```html
<!-- 1. Preload code: before uchat.js -->
<script>U=window.U=window.U||{},U.events=U.events||[],U.chat=function(n){return{on:function(e,t){U.events.push([n,e,t])},off:function(e){for(var t=U.events.length;t>0;)U.events[--t][0]==n&&U.events[t][1]==e&&U.events.splice(t,1)}}};</script>
<script async src="https://client.uchat.io/uchat.js"></script>

<!-- 2. Chat room -->
<u-chat room="my-room" style="display:inline-block; width:100%; max-width:500px; height:500px;"></u-chat>
<button id="hello" disabled>Say hello</button>

<!-- 3. Page script -->
<script>
var myRoom = null;

U.chat('my-room').on('after.join', function (room, data) {
	myRoom = room;
	document.getElementById('hello').disabled = false;
	room.print('You joined. Your nickname is ' + escapeHtml(data.my.nick) + '.');
});

U.chat('my-room').on('after.message', function (room, data) {
	if (data.user.nick !== room.my.nick) document.title = 'New message - ' + data.user.nick;
});

document.getElementById('hello').addEventListener('click', function () {
	if (!myRoom.action.send('Hello')) alert('You cannot send right now.');
});

function escapeHtml(text) {
	return String(text).replace(/[&<>"']/g, function (c) {
		return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
	});
}
</script>
```

When you join, a notice line appears in the chat room and the button turns on. Click the button to send `Hello` under your nickname. When someone else speaks, the browser tab title changes.

## Preload code {#preload}

`uchat.js` loads with `async`, so `U.chat` may not exist yet when your page script runs. The preload code on the first line stores events registered with `U.chat(...).on(...)` in `U.events`, and `uchat.js` picks them up when it is ready. That is why you must add it **before `uchat.js`**.

Without the preload code, you get a `U is not defined` error or your events are not registered. Load order and use with multiple chat rooms and SPAs are covered in [Async loading and multiple chat rooms](/en/doc/2.2).

## Receive events {#events}

```js
U.chat('my-room').on('after.join', function (room, data) { ... });
```

- Pick a chat room with `U.chat('room-id')` and register an event with `.on(eventName, callback)`.
- The callback always gets two arguments, `(room, data)`. `room` is the chat room object, and `data` depends on the event.
- `after.join` fires when joining finishes and your own info has arrived. `data.my` is your info.
- `after.message` fires for every chat message line. `data.user` is the sender and `data.content` is the text. It also fires for past messages you receive when joining and for messages you send.

Return `false` from an event that starts with `before.` to block the default handling. The list of events and which ones you can block are in [Events](/en/doc/3.3).

## Use the room object {#room}

| Use | What it does |
| --- | --- |
| `room.print(html)` | Shows a notice line on your screen only. Others do not see it. The value is parsed as HTML, so escape any user input. |
| `room.action.send(message)` | Sends a message under your nickname. Returns `false` if not yet connected, if the text is empty, or if you must wait because of slow mode. |
| `room.my` | Your info (`nick`, `auth`, and so on). It is an empty object before you join. |

All properties and functions of `room` are in [U.chat() and the room object](/en/doc/3.2).

## Next steps {#next}

- Let members join with their site nickname → [Member integration](/en/doc/2.1)
- Put buttons and dialogs inside the chat room → [Extending the skin UI](/en/doc/2.3)
- Exchange data between visitors → [Sending and receiving real-time data](/en/doc/2.4)