Display stylized conversations in your content using this addon for the Aesop Story Engine plugin.

Download from WordPress View on Github

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.

Hello.

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.

Chat Addon Playground

Feel free to play around with the chat appearance here!

Sweet jelly-o powder liquorice liquorice gingerbread jelly-o chocolate bar.

Lollipop gummi bears topping.

Chocolate bar cotton candy tootsie roll.

Candy canes ice cream sugar plum brownie lollipop. Ice cream chupa chups ice cream pudding gummies.

If you have any suggestions, comments, or complaints, leave a comment here or submit an issue on Github.

Conversations brought to you by Lorem Ipsum Cupcake. Thanks to @rogie for letting me use his avatar in the demo of this plugin.