đŸ’ŦMaking a scripted chat story

A step by step guide to create your own scripted chat story in Twine

On July 5th 2022, Twine version 2.4.0 was released, including several updates to the user interface. Please note that several explanations and screenshots on this page still refer to the previous 2.3 version.

Import Trialogue into Twine

  1. Open the online Twine editor.

  2. Choose Formats -> Add a New Format, paste the Story Format URL (https://phivk.github.io/trialogue/dist/Twine2/Trialogue/format.js) into the input field, click Add.

  3. Under Story Formats select Trialogue.

See Managing Story Formats in the Twine reference for more context.

Creating your first chat story

  1. Create a new story in the Story Library.

  2. Edit the start passage to include:

    • Title (e.g. start)

    • Passage text (e.g. "Hi 👋")

    • One or more links (e.g. [[What's your name?]])

    • Speaker tag (e.g. speaker-bot). This will display the speaker's name (in this case bot) in above their passages. It also sets a data-speaker="bot" attribute on the passage's HTML element, which can be used for styling.

  3. Edit the newly created passage(s) to include:

    • Passage text (e.g. "My name is Bot")

    • One or more links (e.g. [[Back to start->start]])

    • Speaker tag (e.g. speaker-bot)

  4. Hit Play to test the result in a new browser tab (should look something like this)

See Editing Stories in the Twine reference for more context.

Chat bot speaker passages

The way to tell Trialogue that a passage is "spoken" by a chat bot with a particular name, is to add a speaker tag to the passage. A speaker tag starts with "speaker-" followed by the name of the chat bot.

Say, you want to create two scripted chat bots, called "One" and "Two", you would tag their respective pages with speaker-one and speaker-two Trialogue will display their capitalised names above their message.

Meta passages

Passages without a speaker tag are considered meta messages and are displayed in the center of the chat window. You could use these for making narrative statements about things that happen in the story world, e.g. "The End" or "Six months later". Thanks to ranecma for this suggestion.

Links

Create a link from one passage to another like so:

[[another passage name]]

or so:

[[A different link text to display->another passage name]]

In Trialogue links are be displayed as user responses, as explained in the terminology section.

See Linking Passage in the Twine reference for more context.

Pro tip: when you create your links in the source passage and close the passage, the Twine editor will automatically create a new passage with the name specified in the link.

Pro tip: changing a passage title will automatically update any corresponding link names pointing to that passage. Changing a link name (between [[square brackets]]) will not update the corresponding passage name.

Following one chat bot speaker passage with another

Sometimes you want to follow up one speaker passage to another, without a user passage in between. Trialogue let's you trigger a next passage from a previous one by including this snippet of javascript code in the previous passage:

<% story.showDelayed("NextPassageIdOrName"); %>

This will show the next passage (with the specified Id or Name) with a delay and typing animation:

Following one user reply with another

When you want to give the user multiple turns in replying, without a chat bot speaker passage in between, you can do so by creating a passage containing only a link (remember links get displayed as user replies)

Passage content

Trialogue is based on the Snowman story format, and as such allows you to write passage content in Markdown, which can contain any valid HTML.

Images

Add an image to a passage like so (replace Alt text, image URL and title with your own):

![Alt text](https://loremflickr.com/g/320/240/flower "a title")

Videos

Include a video hosted on YouTube by pasting in its embed code, like so:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/sgNkCrAhTGc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Or embed a video from Vimeo:

<iframe src="https://player.vimeo.com/video/56810854?h=0f89b3d316&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

Other media

You can use any HTML embed code inside a passage, so go ahead and embed a map, tweet, audio player, webpage, etc!

Importing an existing story into the Twine editor

You don't have to start from scratch. You can save and import an existing story like so:

  1. Navigate to the sample story: https://phivk.com/trialogue/docs/trialogue-demo

  2. In the menu bar, choose: → File

    → Save Page As... (or equivalent depending on your browser)

  3. In the Twine Editor:

    → Import From File

    → Browse

    → Select 'Trialogue Demo.html'

Exporting a story from the Twine editor

To export a story as an HTML file from the Twine Editor, choose "Publish to file" via the menu. This static HTML file doesn't need a server to run, so you can simply open it in your browser.

You can also host it anywhere online and share it with the world. Talk to someone who has hosted a static web page before, or have a look at:

PreviousWhat is Trialogue?NextCustomising styling

Last updated