đŦMaking a scripted chat story
A step by step guide to create your own scripted chat story in Twine
Last updated
A step by step guide to create your own scripted chat story in Twine
Last updated
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.
Open the online Twine editor.
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.
Under Story Formats select Trialogue.
See Managing Story Formats in the Twine reference for more context.
Create a new story in the Story Library.
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.
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)
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.
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.
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.
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.
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:
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)
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.
Add an image to a passage like so (replace Alt text, image URL and title with your own):
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>
You can use any HTML embed code inside a passage, so go ahead and embed a map, tweet, audio player, webpage, etc!
You don't have to start from scratch. You can save and import an existing story like so:
Navigate to the sample story: https://phivk.com/trialogue/docs/trialogue-demo
In the menu bar, choose: â File
â Save Page As... (or equivalent depending on your browser)
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:
Publishing on GitHub Pages (one of my favourite solutions)
