📝Customising UI content

How to add custom content to the Trialogue user interface

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)

Exit modal content areas: modal title (red), modal body (green), modal footer (blue)

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

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 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);