> For the complete documentation index, see [llms.txt](https://phivk.gitbook.io/trialogue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phivk.gitbook.io/trialogue/customising-ui-content.md).

# Customising UI content

## Content Areas

Trialogue defines several content areas in the User Interface where custom content can be inject via helper functions. This allows fitting content to the context of your story, or translating UI texts into any language.

![Content areas: left side bar (red), right side bar (yellow), user resonse hint (purple), nav bar back link (green), nav bar undo link (coming soon) (blue)](/files/DTrgGr6KB0ZxuJasI8uH)

![Exit modal content areas: modal title (red), modal body (green), modal footer (blue)](/files/PASWPiUSeR4gDbEqnkpZ)

## Injecting content via helper functions

To inject custom content into these content areas, edit the Story Javascript:

![Editing the Story Javascript via the bottom left menu](/files/TTmyho9OD6hOp2DpZQbB)

and use the following helper functions:

* `inject_nav_back(navLinkBackContent)`
* `inject_nav_menu(navLinkMenuContent)`
* `inject_left_sidebar(leftSidebarContent)`
* `inject_right_sidebar(rightSidebarContent)`
* `inject_hint(userResponseHintContent)`
* `inject_modal(modalTitleContent, modalBodyContent, modalFooterContent)`

## Code example

The code example below shows these functions in use as part of the [Chatterpast](https://chatterpast.tolerantfutures.com/) story:

```
var leftSidebarContent       = `
  <div class="text-center pt-5 mt-5 dark-blue">
    <img class="mw-100 mb-4" src="https://raw.githubusercontent.com/phivk/chatterpast/main/assets/img/avatars.png" alt="chatterpast avatars">
    <h1 class="fw8">Chatterpast</h1>
    <h4 class="fw6">
      Tolerant Futures<br>
      through<br>
      Ancient Identities
    </h4>
  </div>`;
var rightSidebarContent      = `
  <p class="lead fw4">Explore life in Iron Age and Roman Britannia with Enica and her friends.</p>
  <p>Old lifeways are being challenged by the arrival of new people, new ideas, and new ways of living. Sharing experiences on Chatterpast has allowed a small group of kids to become friends, despite their differences. </p>
  <p>Discover their unique stories from across Britannia. Question them about their lives and reflect on how these relate to the present.</p>
  <p>The friends are also curious about how things turned out around 2000 years in their future!</p>`;
var userResponseHintContent  = 'Choose one option to continue the conversation';
var modalTitleContent        = 'Leave the chat?';
var modalBodyContent         = '<p>If you leave the chat, your history will be lost and you will have to start from the beginning.</p>';
var modalFooterContent       = '<button type="button" class="btn rounded-0 btn-link" data-dismiss="modal">Stay</button><a href="/" type="button" class="btn rounded-0 btn-danger">Leave</a>';
var navLinkBackContent       = '<img class="nav-icon nav-icon-back" src="https://chatterpast.tolerantfutures.com/assets/img/icon-back.svg">';
var navLinkMenuContent       = '<img class="nav-icon nav-icon-menu" src="https://chatterpast.tolerantfutures.com/assets/img/icon-hamburger.svg">';

inject_nav_back(navLinkBackContent);
inject_nav_menu(navLinkMenuContent);
inject_left_sidebar(leftSidebarContent);
inject_right_sidebar(rightSidebarContent);
inject_hint(userResponseHintContent);
inject_modal(modalTitleContent, modalBodyContent, modalFooterContent);
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://phivk.gitbook.io/trialogue/customising-ui-content.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.