# Dialogs

## Description

```javascript
'[character_id][:<expression_id>][:<class_names>] <dialog_text>'
```

**Action ID**: `Dialog`

**Reversible**: Yes

**Requires User Interaction**: Yes

**Related Components:**

* [Text Box](/documentation/develop/components/text-box.md)

## Narrator Dialogs

![](/files/-MHO7Tfs9ieGzDkNS4eG)

Any statement in your script that does not match any other action will be displayed as a narrator dialog. Narrator dialogs do not show any name on the textbox.

## Character Dialogs

The say statement is used... well, for a character to say something. The syntax is as follows:

'\[Character Identifier] \[Text to Say]'

```javascript
'y Hi! My name is Yui.'
```

![A fresh Monogatari game showing Yui speaking, saying "Hi! My name is Yui."](/files/-Lnyq8SN2dUcjUjWNf2J)

It also accepts HTML, so you can show many things in a text like the Font Awesome icons.

```javascript
'y The <span class="fa fa-arrow-left"></span> button is the back button, press it to return to a previous state of the game.'
```

![An example of HTML being used inline, in this case to show a back arrow icon.](/files/-LnyqMDZ7bMd3-jDMQmX)

If no character identifier is given, it will be considered as a narration and no name will be shown.

```javascript
'This would be a narrator.'
```

![The narrator speaking. ](/files/-LnyqWwcnFPFnS9APYe3)

### Clear the Text

The `'clear'` command sends an empty line of dialog to remove all text on the screen.

```javascript
'clear'
```

The clear command automatically runs the next line without requiring a click from the player. You may want to insert a `'wait'` command immediately after it if you want the player to see a blank dialog box.

### Side Images

If you've defined the `expressions` property for your characters, adding a list of images to show, you can use them as side images with each dialog, to do so, you should use a format like this one:

```javascript
'y:Smiling Hi! My name is Yui.'
```

![Yui saying "Hi! My name is Yui." with a side image of a picture of her smiling.](/files/-Lnyrwrtgwbj4u-GnhDP)

This assumes you have a Side image called Smiling, which means with every dialog you can specify what side image to use. If you add the `'expression'` property then that image will be shown with every dialog without the need of specifying it inside the statement.

#### Custom Classes

You can apply custom CSS classes to the text-box (or centered-dialog) element by adding a third parameter to the dialog syntax. This allows for custom styling of different dialog types.

These classes get reset on every dialog so in order to mantain a class, you have to add it to every dialog you want it to be present on. The syntax is as follow:

**Syntax**

```javascript
'[character_id]:[expression]:[class_names] <dialog_text>'
```

**Examples**

**Single Class:**

```javascript
'y:happy:highlight Hello there!'
```

**Multiple Classes:**

```javascript
'm:sad:warning|urgent This is important!'
```

**Narrator with Class:**

```javascript
'narrator::thought This is a thought bubble'
```

**Centered Dialog with Class:**

```javascript
'centered::centered-highlight This is a centered message!'
```

**NVL Dialog with Class:**

```javascript
'nvl::nvl-style This is an NVL dialog!'
```

## Centered Dialogs

The `'centered'` command is like a special character-id that goes at the beginning of dialog text to display a special floating box that hovers in the very center of the screen.

```javascript
'centered This is an example of centered text.'
```

![](/files/-LnysYXUVQLCR0z6PYD5)

The text box that displays `'centered'` text is special. Rather than being inside of a `<text-box>` tag, it is instead inside of a `<centered-dialog>` tag.

```markup
<centered-dialog class="animated" data-component="centered-dialog">
            <div data-content="wrapper">Here's some more centered text.</div>
        </centered-dialog>
```

While `'centered'` text is visible on screen, the main `<text-box>` is hidden with a CSS `display:none;` attribute.

HTML can be used inside of `'centered'` text the same as normal dialog, so you can use this to display a special image that removes the text box when it displays it, or something similar, if you want to get creative!

## NVL Dialogs

The `'nvl'` command is similar to the `'centered'` command in that it is used at the beginning of a line of dialog to present a special display, similar to games like Fate/stay Night, or Radical Dreamers.

```javascript
'nvl Here is an example of NVL text.',
'nvl Here is some more NVL text.',
'nvl One more line.'
```

![](/files/-LnywIv3kK3Hb5yoOdLL)

The `'nvl'` text differs from normal Monogatari text in that clicking does not clear the current text off of the screen, and instead leaves it there, feeding consecutive NVL dialogue one at a time as the player clicks to progress.

NVL text is displayed on screen inside of a `<text-box>` with a CSS class`'nvl'`. By default, this textbox is styled to fill the entire screen. Additionally, each line of NVL text is contained inside of a `<div>` with a `data-spoken` value for whichever character is speaking. Normally it's the narrator, but if you give a character the `nvl` attribute and set it to `true` then that character can be used as an NVL character, and their text can have special CSS rules if you want to get creative with that.

![An example of some characters speaking in NVL mode.](/files/-Lnyy3VbGYLfRJMUNzjt)

Note that Expression side images are not supported in NVL mode.

The NVL mode text box is scrollable, like other text boxes in Monogatari, should there be too much text to display at once. Additionally, you can use HTML in NVL mode the same as all of the other modes!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.monogatari.io/documentation/develop/script-actions/dialogs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.