Widget Library

Message Thread Widget

3 min readUpdated

Show a phone-style text conversation, with each sender's messages in their own bubbles, for texting, social media and online-safety lessons.

A message thread draws a text-message conversation the way a phone shows it: a list of chat bubbles, top to bottom, with who sent each one and when. One person's messages, the me sender, sit on the right in an accent colour, so the thread reads like the student is holding the phone.

Use it whenever a lesson needs students to read a conversation:

  • A group chat where students work out the topic and the tone ("Is Leo upset, or joking?").
  • A pragmatics or speech lesson on polite requests over text.
  • A digital-citizenship scene: a message from a stranger, a rumour being passed along, or a late-night text where the time it was sent is the clue.

A message thread is for reading. It isn't graded. Put the question beside it, like a multiple choice asking "How does Maya feel?".

Set it up

Add Message Thread from the Display group in the widgets panel. Select it on the canvas and click the floating ⚙ Configure button. A live preview sits beside the settings.

  • Title: the chat's name at the top, like "Group chat" or "Mom". Leave it empty to hide it.
  • Me: whose messages go on the right. Pick one of the senders in the thread, or No one to put every message on the left (useful for a thread students only watch, like a public comment section).
  • Show names: shows each sender's name above their bubble. Names never show above the "me" bubbles, the way a phone doesn't label your own messages.

Messages

Each message has a sender, a time and the text.

  • Click + Add message to add one at the bottom. A new message starts as a reply from the other person, so a back-and-forth is quick to type.
  • The time is shown exactly as you type it: "9:41 PM", "Wed", "Yesterday". It's never read as a clock, so write it the way the phone in your story would.
  • Type emoji straight into the text (😬 👍). Students see them as typed.
  • Use the arrows to move a message up or down, and the bin to remove it.

A sender's name must match exactly for their messages to land on the same side, so "Maya" and "maya" are two different people.

Read messages aloud

For students who can't read the messages yet, turn on Read messages aloud at the bottom of the Configure dialog. Each bubble gets a speaker beside it, so a student can hear one message again as often as they like, and a Read all button in the thread's header says the whole conversation in order, outlining each bubble as it's said. Turn off Read all button to keep only the speakers.

  • Spoken words: each message says its own text by default, not who sent it or when. Type other words under a message to change what it says, for example "Maya says: Is the quiz tomorrow?" when hearing the name matters, or to leave out an emoji. Say nothing silences one message and removes its speaker.
  • Voice: Narration voice plays audio made in the lesson's voice. Press Generate audio for all messages after the messages are written; a message you edit later shows Out of date until you generate again. Messages without audio, and words with a variable in them, are read by the student's device instead. Device voice always uses the device.

Hearing a message never records anything. Publishing warns you if some messages will use the device's voice, the same as for a multiple choice that reads its choices aloud.

Style

The sidebar's Style & Layout section sets the font, the font size, the background, both bubble colours and their text colours, and the colour of names and times. Keep the text colour in each bubble dark enough on its bubble to read easily; the defaults already are.

What students see

Each bubble grows to fit its message, so nothing is cut off. If the thread is longer than the widget, students scroll it, and keyboard users can tab to it and scroll with the arrow keys. On the canvas, messages past the bottom of the widget are cut off at its edge, so make the widget taller if the last messages don't show.

Screen readers read each message once, as who sent it, when, and what it says: "Maya, 9:40 PM: Is the quiz tomorrow?". With read-aloud on, each speaker is a button named for its sender ("Hear Maya's message"), so keyboard users can tab to it and press Enter.

Use variables

The title, senders, times and message text can include variables, like {{ variables.name }}, so a message can greet the student by the name they typed earlier.

Was this article helpful?