My good friend 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. Gabriel Valdivia I thought this was rad, so I helped him build a 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: website The custom input system for conversations in WordPress People seem to be surprised that this site runs on . The secret is . 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 only has to choose whether it was himself or the interviewee who made the comment when entering the conversation. WordPress Advanced Custom Fields Gabe The theme is responsive and completely custom, based off 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. Underscores 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 and hacked it to fit our needs. WordPress Post View 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 . 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. JavaScript The is exactly what you’d expect. Check out how it responds on mobile vs desktop. 404 page 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 to create an unread indicator dot when there were new conversations on the site since you had last visited. Mark New Posts We added browser push notifications for new articles using which seemed like the easiest way to get them up and running as fast as possible. OneSignal 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 of Co.Design this week to . We helped them actually embed the chat with Gabe on Talk Turkey into the article. Super cool. Mark Wilson talk about the experience Check out the , there are really interesting reads about , , and more! site authenticity anxiety heartbreak — Follow me on or . Twitter Facebook
