---
title: Writing transformations for chat
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

Chat web parts use **jQuery templates** to display their content. This includes on-line users lists, room lists, messages and other elements. In Kentico, the templates are stored as ordinary transformations that have their type set to _**jQuery**_.

You can find all transformations that Chat needs in **Page types -> Chat - Transformations -> Transformations**.

A jQuery transformation consists of HTML code and **template tags** that dynamically insert values of the object that is currently being processed. There are also tags that control the flow of the transformation.

## Displaying data

An example transformation could look like this:

```html

<div>
    <strong>${Nickname}</strong>: ${MessageText}
</div>

```

The example can be used to display a chat message. It displays the sender's nickname in bold and the text of the message.

In this example, template tags are used to display data. Tags that display data should always start with a dollar sign ($), followed by the name of the variable that you want to display enclosed in brackets.

To learn what data you can display, see [Chat transformations reference](https://docs.kentico.com/k82/community-features/chat/customizing-chat-appearance/chat-transformations-reference.md).

## Creating conditions

You can also add conditional template tags that will control what content will be displayed based on a true/false condition.

A condition begins with the `{{if}}` tag. As an argument, you can enter any statement that returns a boolean value (_true_ or _false_). The following are examples of a valid conditional statement:

- IsSystem
- Nickname == 'administrator'
- ! IsCurrentUser

An _if_ condition can have two branches - one that gets rendered when the condition is true, and one indicated by the tag `{{else}}` that gets rendered when the condition is false. You must always close the body of the condition with the `{{/if}}` closing tag.

In the following example, we'll add the recipient's nickname in case the message is a whisper. Otherwise, the transformation will display only the standard nickname and text combination.

```html

<div>
    {{if Whisper}}
        <strong>${Nickname} -> ${Recipient}</strong>: ${MessageText}
    {{else}}
        <strong>${Nickname}</strong>: ${MessageText}
    {{/if}}
</div>

```

Conditional tags support multiple conditions joined by logical operators. The syntax is similar to that of C#, as you can see in the following example:

```html

{{if IsSystem || Nickname == 'administrator' }}
    <div>
        <strong>System message:</strong> ${MessageText}
    </div>
{{/if}}

```

## Integrating macro expressions

You can insert [K# macro expressions](https://docs.kentico.com/k82/macro-expressions.md) into templates and combine them with template tags.

By using **localization macros** in transformations, you can ensure that all elements will be displayed in the correct language. The elements that can be translated include:

- system messages
- notifications
- buttons

All of these elements are already prepared in the form of resource strings.

The following code example shows how to inform that a message has been rejected using a resource string.

```html

{{if Rejected}}
    <span class="Rejected">{$chat.messagerejected$}</span>
{{/if}}

```

You can find the complete list of resource strings belonging to Chat in [Chat transformations reference](https://docs.kentico.com/k82/community-features/chat/customizing-chat-appearance/chat-transformations-reference.md).

## Inserting action commands

Users can perform actions on objects, provided they have permission to do so. For example, you can allow room administrators to reject messages directly in the list, or you can allow them to disable or delete rooms.

The following example shows how you can insert a command control for the **reject message** action. You need to insert the action command into the _**onclick**_ attribute with the same syntax as if you were displaying a variable.

The _if_ condition ensures that the action command will be rendered only if the current chat user has permission to reject the message, i.e., if the user is an administrator or a creator of the room.

```html

{{if RejectMessage}}
    <a href="#" onclick="${RejectMessage}">Reject</a>
{{/if}}

```

For a complete list of available commands, see [Chat transformations reference](https://docs.kentico.com/k82/community-features/chat/customizing-chat-appearance/chat-transformations-reference.md).