I found myself wanting to display a chat log in a post. Rather than get into the entire thought process that started me down adding post type support to Cover — and primary for the “chat” post type? Ugh — suffice to say I arrived at the decision to create an addon for Aesop Story Engine.
In trying to determine what should be defined and in how fine-grained detail it should be, I decided that a single chat component is one piece of conversation: one chat bubble.
Using a single chat bubble as the building block, any number of chat bubble components can comprise the end result. Short or long, it’s completely up to you, the content creator.
Options
Using the component’s built-in options, the chat colors can vary on a post-by-post basis. Multiple conversations in a single post can have varied colors, due to the modular nature of the components.
Appearance defines the style of chat bubble. There is a default style, but it’s not very interesting. There are options to imitate the appearance of chat styles used by Google Hangouts, Facebook Messenger, and iOS Messaging.
Width defines the maximum width of the chat bubble. It will never exceed this value, but it can be shorter, if there is not enough text to fill a single line. Please note that the “px” suffix is already included, so all this field requires is a number.
Background Color defines the background color behind the chat bubble. It’s always the full width of the screen.
Chat Color defines the background color of the chat bubble itself. The bubble arrow also takes on this color.
Text Color defines the text color in the chat bubble.
Direction defines where the chat bubble, its arrow, and avatar (optional) come from: left or right.
Content defines the text inside the chat bubble. Enter as much or as little as you want!
Avatar defines the picture associated with the chat bubble. This is optional.
Avatar Style defines the shape of the avatar. By default, it’s just a square image. It can be changed to rounded corners (I call this a “squircle”) or a circle.
If you have any suggestions, comments, or complaints, leave a comment here or submit an issue on Github.
Leave a Reply