Twine Chatbot Improvements

You can build Twine chatbots quickly using the Trialogue story format. Using CSS, you can improve the appearance.

Last year, I built a simple Twine chatbot in 2 hours. It simulated a customer service chat conversation. In preparation for my demo in the TLDC eLearning Tools Summit, I revisited my chatbot and made some improvements to make it look more like a real customer service chat.

This is a rules-based chatbot, where users pick from a few pre-programmed choices. A rules-based chatbot is basically a decision tree, which means it has a lot in common with branching scenarios. (Note that this is different from an AI chatbot, where users enter open text and the chatbot analyzes and responds to the text.)

Try the Twine chatbot

You can try the improved version of the chatbot yourself. If it doesn’t appear embedded below, try opening it in a new tab.

Before and after chatbot comparison

In the original version, the chat is 50% of the width of the screen, with a brown color scheme. In the updated version, it’s 35% of the width, so it looks more like a phone or narrow chat. I updated the colors, added images, and made a few other tweaks.

Twine Chatbot: Before and After

Wider brown chat on the left, narrower blue version on the right with images for each user

Trialogue updates

This chat simulation uses the Trialogue story format. The developers hadn’t updated this format for a few years when I worked with it originally, but now someone is working on the format again. They released Version 0.0.9 in February 2022. So far, I am finding this version more stable (version 0.0.6 sometimes timed out without loading). This updated version includes an internal undo button in the top menu bar and a new format for informational passages.

Stylesheet formatting in Twine

The Trialogue documentation now includes notes on how to change the UI colors and add images for each speaker. These changes are just CSS; it’s mostly a matter of knowing which element to affect with the style changes. If you aren’t experienced with CSS, I highly recommend W3Schools as a resource.

In addition to changing the colors, I rounded the corners of the chat passages. I think this really helps it look more like an actual chat.

/* Chat Passage */
.chat-passage {
  border-radius: 10px;
}

Changing the width of the chat requires 2 adjustments in the stylesheet: one to the chat panel and one to the user response panel. The user response panel is the dark blue area at the bottom with the choices.

/* Chat Area */
.chat-panel {
  max-width: 35%;
}  

/* User Response Panel */

.user-response-panel {
  background-color: #052650;
  max-width: 35%;
}

Complete stylesheet

This is the full stylesheet with all the changes I used to adjust how my chatbot looks. Feel free to use this as a starting point for your own edits. Note that this was all entered in Twine via Edit Story Stylesheet to tweak what Trialogue already has.

:root {
    --bg-color: #9BA8B9;
    --user-color: #3168b0;
    --speaker-color: #32612D;
    --sidebar-bg-color: #FFF;
    --navbar-bg-color: #CDD4DC;
    --passage-bg-color: #E6E9EE;
    --passage-text-color: #000;
}
/* Chat Passage */
.chat-passage {
  border-radius: 10px;
}
.chat-passage-wrapper[data-speaker='Anna']:before {
  background-image: url('anna-yoga.png');
}
.chat-passage-wrapper[data-speaker='Anna'] .chat-passage::before {
  color: green;
}

.chat-passage-wrapper[data-speaker='Manager']:before {
  background-image: url('https://placekitten.com/100/100');
}
.chat-passage-wrapper[data-speaker='Manager'] .chat-passage::before {
  color: yellow;
}

.chat-passage-wrapper[data-speaker='you']:after {
  background-image: url('user-headset-icon.png');
}
.chat-passage-wrapper[data-speaker='you'] .chat-passage::before {
  color: #3168b0;
}

/* User Response Panel */

.user-response-panel {
  background-color: #052650;
  max-width: 35%;
}

.user-response-panel hr {
  margin: 0;
  border-top: 5px solid #202020;
}

.user-response-panel .user-response {
  background-color: #E6E9EE;
  color: #000;
  border-radius: 10px;
  border-top: 2px solid transparent;
  transition: border-color 0s ease-in;
}
.user-response-panel .user-response:hover {
  border-color: #3168b0;
  background-color: #fff;
  color: #000;
}

/* Chat Area */
.chat-panel {
  max-width: 35%;
}  

/* Navbar */
.navbar {
  visibility: hidden;
}

Time spent: 1+ hour on formatting, 3.5 hours total

I spent a little over an hour testing the options, which means the entire chatbot was created in under 3.5 hours. I think more could be done with this, including making it work better on phones (it’s too narrow on a small screen currently), but I’m happy with how this turned out so far for not too much time testing.

More on Twine

If you want to create something like this, start with my original post on creating a chat simulation in Twine. Then, check out all of my posts on Twine for more examples and ideas.

Leave a Reply