Conversation Viewer

Featured, Programming, WordPress

With more and more conversations happening over text, I felt it was important to have a good way to convey them when I needed them. Screenshots are limited by phone resolutions, are often awkwardly stitched together, and have the potential for accidentally showing something you didn't mean to.

That’s why I created ConversationViewer, a WordPress plugin for professionally displaying messaging or texting conversations in their original context.

Me
Let me explain how it works. (This isn’t a screenshot)
You
Okay, sounds good!
Me
I type up a conversation between the two of us in plain text in the regular WordPress editor, and the plugin converts it to look like a messaging service.
You
Wow, that’s really cool!
Someone Else has joined the conversation.
Someone Else
Hey, more than one person can join?
Me
Absolutely! As many people as you want, though you as the message-sender will always keep the right side of the conversation.
You
That’s cool!

 

How It Works

I designed it to be as easy to use as possible. It works off the WordPress Shortcode functionality, so it’s easy to implement directly on your site.

 

The shortcode for that previous conversation looks like this



[conversationViewer style="messenger"]

//Me: Let me explain how it works.

//You: Okay, sounds good! ????

// Me: I type up a conversation between the two of us in plain text in the regular WordPress editor, and the plugin converts it to look like a messaging service.

//You: Wow, that's really cool!

// Command: Someone Else has joined the conversation.

// Someone Else: Hey, more than one person can join?

// Me: Absolutely! As many people as you want, though you as the message-sender will always keep the right side of the conversation.

// You: That's cool!

[/conversationViewer]

 

Different Styles

Of course, I had to build a few different styles to capture the most popular apps.

 

Facebook Messenger

Me
Hello there!
You
Hey, how’s it going?
Me
I’m great. Let me invite my friend.
Friend has joined the chat.
Friend
Hey guys!

iOS Texting

Me
Hello there!
You
Hey, how’s it going?
Me
I’m great. Let me invite my friend.
Friend has joined the chat.
Friend
Hey guys!

Android Messages

Me
Hello there!
You
Hey, how’s it going?
Me
I’m great. Let me invite my friend.
Friend has joined the chat.
Friend
Hey guys!

WhatsApp

Me
Hello there!
You
Hey, how’s it going?
Me
I’m great. Let me invite my friend.
Friend has joined the chat.
Friend
Hey guys!

Snapchat

Me
Hello there!
You
Hey, how’s it going?
Me
I’m great. Let me invite my friend.
Friend has joined the chat.
Friend
Hey guys!

 

Other Features

Here are a few other features I built in.

 

Profile Photos

With version 1.1, it is now possible to include profile photos in a conversation, like this.

James
Hey Guys!
Me
I’m well, what about you guys?
Kathy
I’m great!

 

Simply add

// Image [PersonsName] [https://example.com/image.jpg]

anywhere in the conversation, and their image will show up.

Note: Be careful when inputting in the “visual” tab. For best results, input a link with the text tab, otherwise WordPress will wrap it in anchor tags and it won’t work.

 

Clickable Conversations

Got a conversation with a lot of people? Want to make it easier for your readers to distinguish between who is talking? Add clickable=”true” to your opening shortcode tag. Click on the chat bubbles of this conversation below to see how it works.

Me
Hello there!
You
Hey, how’s it going?
Me
I’m great. Let me invite my friend.
Friend has joined the chat.
Friend
Hey guys!
You
Hello friend!
Friend
Try clicking on this message. You will see my other message shows up.
You
Wow, so cool!
Me
Yeah, that’s sweet!

 

Recent Projects