My good friend Gabriel Valdivia had a great idea to do interviews that push people to be as honest and candid as possible and then present the conversations in the same format they occurred.
I thought this was rad, so I helped him build a website that acts and feels like a chat app where you can browse the interviews. We got real geeky on the details, so I thought I would share some of them here:
The custom input system for conversations in WordPress
- People seem to be surprised that this site runs on WordPress. The secret is Advanced Custom Fields. We crafted a backend that allows Gabe to fully manage the interviews and customize the related information accordingly. The chat bubbles are repeater fields and Gabe only has to choose whether it was himself or the interviewee who made the comment when entering the conversation.
- The theme is responsive and completely custom, based off Underscores starter template. Gabe laid out a front-end in HTML and CSS and we converted that code into the WordPress PHP templates. On mobile you land in the conversations list view, when you land on a large desktop screen the info panel is pre-expanded, etc.
- The chat bubbles auto-propagate into the correct shape depending on which bubbles come before and after. There are four types of bubbles: initial bubbles, closing bubbles, continuing bubbles, and single bubbles. It was important to have this step be automated instead of having to make this choice for every bubble in the WordPress back-end.
- Gabe gets to choose the color of every interview from a color picker UI in WordPress. He usually bases it of the primary color of the interviewee’s Twitter profile.
- The site has a read count at the end of each chat which gets kind of amusing being in public. We used a plugin called WordPress Post View and hacked it to fit our needs.
- If you leave the site in the middle of an article, the browser tab will ping you that there are new messages until you complete the article. This implimentation was custom JavaScript. We detect when the window focus is lost. When your scroll position brings the end of the page into view we stop activating the function to alert you.
- The 404 page is exactly what you’d expect. Check out how it responds on mobile vs desktop.
- If you compose a reply to the message thread, you are actually composing a Tweet to the author of the article. We propogate the share url with the custom field of the interviewee’s Twitter name via PHP, as well as whatever you have entered in the composer via JavaScript.
- You can use the up and down arrows to move between conversations in any view. You can also tap the enter key to start composing a tweet. These commands are using jQuery’s keydown function.
- Another plugin hack was using Mark New Posts to create an unread indicator dot when there were new conversations on the site since you had last visited.
- We added browser push notifications for new articles using OneSignal which seemed like the easiest way to get them up and running as fast as possible.
Talk Turkey launch look
There is some other fun stuff in there, but I’ll let you find it yourself. One of our next steps is to automate the process of moving a conversation into WordPress completely.
Gabe also sat down with Mark Wilson of Co.Design this week to talk about the experience. We helped them actually embed the chat with Gabe on Talk Turkey into the article. Super cool.
Check out the site, there are really interesting reads about authenticity, anxiety, heartbreak and more!
—