Text Message Emulator

An in-depth text message emulator

The text message emulator is a component that mimics a messaging thread. It gets placed by asset swap, and probably should replace a pullquote featuring key text from the message exchange. The messages should be stored on the CDN in a data file (detailed below). The messages in a thread/text exchange will animate as if they are being sent in realtime. The animation will start once the reader scrolls it into view.

Options

The following options are available, and should be written inside the target asset's configuration block.

value	purpose	required	default
`storytellingComponent`	Must be set to `textMessages`	Yes	None
`dataUrl`	Should be an absolute url for the data file. You can upload it using the in-depth asset upload feature.	Yes	None
`recipientColor`	The color of the recipient's text bubble can be set with any valid CSS color (except HSL).	No	`#e5e5ea`
`recipientColorText`	The color of the text in the recipient's bubble can be set to any valid CSS color (except HSL), but probably should be black or white (whichever offers most contrast with the background color).	No	`black`
`senderColor`	The color of the sender's text bubble can be set with any valid CSS color (except HSL).	No	`#1288fe`
`senderColorText`	The color of the text in the sender's bubble can be set to any valid css color (except HSL), but probably should be black or white (whichever offers most contrast with the background color).	No	`white`
`messageInterval`	The time, in milliseconds, in between each message (1000 = 1 second).	No	`1000`
`loadingInterval`	The time, in milliseconds, that the "typing" animation for the recipient should display before showing the message (1000 = 1 second).	No	`2000`

Sample configuration

{assets.123456}
storytellingComponent: textMessages
dataUrl: https://www.gannett-cdn.com/path/to/file.txt
senderColor: #fafafa
recipientColorText: black
senderColorText: black
recipientColor: white
messageInterval: 1000
loadingInterval: 1000
{}

Making the messages

The emulator relies on the message strings being written in the following format, the placed on the CDN as a text file (.txt).

There are two (and only two, at the moment) "characters" in each set of messages:

The Sender: Think of this as the person whose phone/device we are looking at.
The Receiver: The person to whom the sender is writing messages.

Each message has an optional timestamp. Also, at any point in the content, the name of the receiver can be configured.

In the data file, each message in a thread needs to be a single line beginning with a key then a colon.

r: This is a single text message

HTML (such as <br />) is supported. The converter will look for "keys". Each line needs to have a key. Keys are used to identify parts of a message. The values are used as written, even the timestamps. Keys are followed by a : (colon).

Key Definitions

n: Name of receiver
t: Timestamp of the message
s: Message from sender
r: Message from receiver

Example Usage

This example would yield a message from Stannis Baratheon at 10:53 this morning. There would be two messages from Stannis, and one reply from the recipient (the person who owns the phone).

n: Stannis Baratheon
t: Today 10:53 AM
s: let's go to a movie tonight. I'm bored.
r: but there is a horrible pandemic!!!!!!!!
s: ur right. We'll stay home.

The messages content should be uploaded as a .txt file to the CDN. The component requires the full CDN url to operate.

Finding errors in the data

Errors in the data will appear in the browser console as a browser error, prefixed with TEXT MESSAGE ERROR with a (hopefully) helpful description of the problem.

Emoji and other fancy characters

Emoji, Gifs, stickers and the like generally are not supported. There are many emoji with special codes known as HTML entities. These can be used.

In the message data	In the browser
`I agree! 👍`	I agree! 👍
`I ❤ you`	I ❤ you
`Lol! ☺`	Lol! ☺
`This food tastes like 💩`	This food tastes like 💩

The exact appearance of the emoji is different between browsers, operating systems and platforms. You'll get what you get. You can find more HTML entities online. Try this site: https://graphemica.com/

Images in messages

Currently, images in messages are not supported. A future update might include this. Reach out to the Storytelling Studio (well before publishing) if this need arises.

What about Apple News and Google AMP?

The emulator will not appear on distributed platforms. In its place will be the asset you targeted in the first place. This probably should be a pull quote.

Emulator analytics events

Event	Action	Category	Label
Scrolls into view	`scroll tracking`	`in view`	`text-message`
When a reader scrolls up in a message thread, the animation stops and all messages are immediate displayed.	`scroll tracking`	`text message emulator`	`scroll messages`
When a reader clicks the "show all messages" button	`content`	`text message emulator`	`see all click`