# Making a scripted chat story {% hint style="warning" %} On July 5th 2022, [Twine version 2.4.0](https://github.com/klembot/twinejs/releases/tag/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. {% endhint %} ## Import Trialogue into Twine ![how to import Trialogue into Twine](https://4085427665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmNZnjWXxJyOlZsAFjscN%2Fuploads%2F4pk1zSK7w5eVpGapmBpe%2Ftrialogue-import.gif?alt=media\&token=dbae48b1-884b-4cbf-82a5-610437b0ea82) 1. Open the online [Twine editor](http://twinery.org/2/#!/stories). 2. Choose `Formats` -> `Add a New Format`, paste the Story Format URL () into the input field, click `Add`. 3. Under `Story Formats` select Trialogue. {% hint style="info" %} See [Managing Story Formats](https://twinery.org/reference/en/story-formats/index.html) in the Twine reference for more context. {% endhint %} ## Creating your first chat story ![how to create a story with multiple passages](https://4085427665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmNZnjWXxJyOlZsAFjscN%2Fuploads%2F9UKrW19UsRpPqTbCcj3B%2Ftrialogue-create.gif?alt=media\&token=6c454f95-2271-47d6-b9a6-d124885808f2) 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](https://phivk.github.io/trialogue/docs/trialogue-demo.html)) {% hint style="info" %} See [Editing Stories](https://twinery.org/reference/en/editing-stories/index.html) in the Twine reference for more context. {% endhint %} ## 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. ![Passages tagged speaker-one and speaker-two](https://4085427665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmNZnjWXxJyOlZsAFjscN%2Fuploads%2FscxX25abuTkWos20rH1b%2Fafbeelding.png?alt=media\&token=a454ac21-1897-4551-afca-67ad319f7917) ## 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](https://github.com/phivk/trialogue/pull/18) for this suggestion. ![Passage without a speaker tag are discplay as centered 'meta messages'](https://4085427665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmNZnjWXxJyOlZsAFjscN%2Fuploads%2Fw1KAoqkVxeoDK1qmw4i9%2Fafbeelding.png?alt=media\&token=f752f214-42af-453b-a784-731352425647) ## 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](https://phivk.gitbook.io/trialogue/#twine-terminology). {% hint style="info" %} See [Linking Passage](https://twinery.org/reference/en/editing-stories/linking-passages.html) in the Twine reference for more context. {% endhint %} {% hint style="success" %} **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. {% endhint %} {% hint style="success" %} **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. {% endhint %} ### Following one chat bot speaker passage with another Sometimes you want to follow up one [speaker passage](https://phivk.gitbook.io/trialogue/making-a-scripted-chat-story#chat-bot-speaker-passages) 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: ![Displaying multiple chat bot speaker passages after each other](https://4085427665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmNZnjWXxJyOlZsAFjscN%2Fuploads%2FfgyXIKIhkySSpRuKNHHr%2Ftrialogue-bot-responses.gif?alt=media\&token=2c809a84-d815-4d0d-8ca4-3978967a80e3) ### 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) ![from one user reply...](https://4085427665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmNZnjWXxJyOlZsAFjscN%2Fuploads%2FDeDTBVfXz9ivHj6XDneW%2Fafbeelding.png?alt=media\&token=6a0633ad-dbc5-4363-9e63-6d88cbd0e63a) ![... to another](https://4085427665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmNZnjWXxJyOlZsAFjscN%2Fuploads%2FXtLO7cwR6cYGXITOvf67%2Ftrialogue-user-responses.gif?alt=media\&token=3a6ab638-6591-4d3f-9a62-2fab9ac5ed8c) ## Passage content Trialogue is based on the Snowman story format, and as such allows you to write passage content in [Markdown](https://www.markdownguide.org/), which can contain any valid [HTML](https://developer.mozilla.org/en-US/docs/Web/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: `` Or embed a video from **Vimeo**: `` ### 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: 2. In the menu bar, choose:\ → File → Save Page As... (or equivalent depending on your browser) 3. In the [Twine Editor](https://twinery.org/2/#/!/stories): → **I**mport 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: * [Publishing on itch.io](https://twinery.org/cookbook/starting/twine2/publishing_on_itchio.html) * [Publishing on Borogrove](https://twinery.org/cookbook/starting/twine2/publishing_on_borogoveio.html) * [Publishing on Wordpress](https://opensource.com/article/20/2/embed-twine-wordpress) * Publishing on GitHub Pages (one of my favourite solutions) * [A Guide to Hosting Twine Stories Using GitHub](https://www.reddit.com/r/twinegames/comments/hmq9wm/a_guide_to_hosting_twine_stories_using_github/) * [Getting started with GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages)