# How do I write a template for the publication website?

A template for the publication website is a single HTML page which uses the Handlebars templating language (<https://handlebarsjs.com/>) to control the output based on the available expressions.

The Restreamer default template is available at <https://github.com/datarhei/restreamer-ui/blob/main/public/_playersite/index.html>.

#### Expressions

The available Handlebars expressions are:

<table><thead><tr><th width="207">Expression</th><th width="102.33333333333331">Type</th><th>Description</th></tr></thead><tbody><tr><td>player</td><td>string</td><td>Currently this value is always <code>videojs</code>.</td></tr><tr><td>playersite</td><td>boolean</td><td>Whether the playersite is enabled.</td></tr><tr><td>title</td><td>string</td><td>The sitename of the playersite as defined in the <code>General</code> section.</td></tr><tr><td>share</td><td>boolean</td><td>Whether to enable share buttons.</td></tr><tr><td>support</td><td>boolean</td><td>Whether to display a link to the datarhei project website.</td></tr><tr><td>chromecast</td><td>boolean</td><td>Whether to enable chromecast in the player.</td></tr><tr><td>airplay</td><td>boolean</td><td>Whether to enable airplay in the player.</td></tr><tr><td>url</td><td>string</td><td>The URL to the playersite.</td></tr><tr><td>textcolor_title</td><td>string</td><td>Text color for titles as defined in the <code>Design</code> section.</td></tr><tr><td>textcolor_default</td><td>string</td><td>Default text color as defined in the <code>Design</code> section.</td></tr><tr><td>textcolor_link</td><td>string</td><td>Link color as defined in the <code>Design</code> section.</td></tr><tr><td>textcolor_link_hover</td><td>string</td><td>Link :hover color as defined in the <code>Design</code> section.</td></tr><tr><td>bgcolor_header</td><td>string</td><td>Background color for the header as defined in the <code>Design</code> section.</td></tr><tr><td>bgcolor_selected</td><td>string</td><td>Background color for selected items as defined in the <code>Design</code> section.</td></tr><tr><td>bgcolor_unselected</td><td>string</td><td>Background color for unselected items as defined in the <code>Design</code> section.</td></tr><tr><td>bgcolor_default</td><td>string</td><td>Default background color as defined in the <code>Design</code> section.</td></tr><tr><td>hrcolor</td><td>string</td><td>Separator color as defined in the <code>Design</code> section (linecolor).</td></tr><tr><td>bgimage_url</td><td>string</td><td>URL of the background image, empty if no background image has been uploaded.</td></tr><tr><td>imprint_html</td><td>string</td><td>Imprint HTML content as defined in the <code>Notes</code> section.</td></tr><tr><td>terms_html</td><td>string</td><td>Terms HTML content as defined in the <code>Notes</code> section.</td></tr><tr><td>inject1</td><td>string</td><td>HTML content for the extended header as defined in the <code>Code injection</code> section.</td></tr><tr><td>inject2</td><td>string</td><td>HTML content for the extended channel list as defined in the <code>Code injection</code> section.</td></tr><tr><td>inject3</td><td>string</td><td>HTML content for the extended content area as defined in the <code>Code injection</code> section.</td></tr><tr><td>inject4</td><td>string</td><td>HTML content for the extended footer as defined in the <code>Code injection</code> section.</td></tr><tr><td>channels</td><td>array</td><td>List of all available channels, i.e. channel objects. See below.</td></tr><tr><td>channel_id</td><td>string</td><td>ID of the currently selected (or default) channel.</td></tr><tr><td>channel_name</td><td>string</td><td>Name of the currently selected (or default) channel.</td></tr><tr><td>channel_description</td><td>string</td><td>Description of the currently selected (or default) channel.</td></tr><tr><td>channel_descriptionhtml</td><td>string</td><td>Description of the currently selected (or default) channel as HTML.</td></tr><tr><td>channel_creator_name</td><td>string</td><td>Name of the creator of the currently selected (or default) channel.</td></tr><tr><td>channel_creator_description</td><td>string</td><td>Description of the creator of the currently selected (or default) channel.</td></tr><tr><td>channel_creator_description_html</td><td>string</td><td>Description of the creator of the currently selected (or default) channel as HTML.</td></tr><tr><td>channel_license</td><td>string</td><td>License of the currently selected (or default) channel.</td></tr><tr><td>channel_poster</td><td>string</td><td>URL of the poster (snapshot) image of the currently selected (or default) channel.</td></tr><tr><td>channel_width</td><td>number</td><td>The witdh of the player, currently always <code>640</code>.</td></tr><tr><td>channel_height</td><td>number</td><td>The height of the player, currently always <code>360</code>.</td></tr></tbody></table>

#### Channel object

<table><thead><tr><th width="161">Expression</th><th width="130.33333333333331">Type</th><th>Description</th></tr></thead><tbody><tr><td>id</td><td>string</td><td>Full channel ID, e.g. <code>restreamer-ui:ingest:[UUID]</code></td></tr><tr><td>channelid</td><td>string</td><td>UUID of the channel.</td></tr><tr><td>name</td><td>string</td><td>Name of the channel.</td></tr><tr><td>available</td><td>boolean</td><td>Whether the channel is available, i.e. connected.</td></tr><tr><td>thumbnail</td><td>string</td><td>URL to the latest snapshot of that channel, empty if not available.</td></tr><tr><td>egresses</td><td>array(string)</td><td>List of egress UUIDs.</td></tr></tbody></table>

Many of those expressions are for manipulating the default template. If you write your own template you are not required to use all expressions. Pick the ones that are suitable for your needs.

The template is used to create the `/index.html` for the default channel and for each channel a `/playersite_[channelid].html`. The `[channelid]` will be replaced by the respective ID of that channel. This can be used to link to the rendered template of an individual channel.

### Handlebars

The template language "Handlebars" is used for the publication website templates. If you are new to Handlebars, please check out their guide (<https://handlebarsjs.com/guide/>) in order to get up to speed.

There are two additional helper defined:

#### ifEquals

This helper lets you check if two values are equal, e.g.

```
{{#ifEquals player "videojs"}}
   ...
{{/ifEquals}}
```

#### ifnoteq

This helper lets you check if two values are not equal, e.g.

```
{{#ifnoteq channel_license "none"}}
   ...
{{/ifnoteq}}
```


---

# 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://docs.datarhei.com/restreamer/knowledge-base/user-guides/how-do-i-write-a-template-for-the-publication-website.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.