How I Implemented Private Messages on my Website

Published on 2019.12.29

After implementing the dark mode, I wanted to continue in the process of improving my website with other useful functionalities. Now, if you have a Twitter account, you can send me a private message, much like as you do every day on Facebook, WhatsApp, Instagram, etc. If you feel more comfortable using messages instead of e-mails, you can write me one now. I’ll explain how I implemented this feature.

I’m sure most of you already know what an image like this means, especially in social networks like Facebook, Instagram, or in services like WhatsApp or Telegram:

Private message icon

It means the person is online. Usually, you can click on the icon to start a conversation sending him/her a private message. That’s a handy feature for every website. That simple, sometimes animated green circle is a visual clue that wants to suggest to you, “Hey, I’m online; you can write to me.” I find it to be profitable when it’s used as a mean of support on websites, for example, and I tend to use it much more than slow-to-respond e-mails.

The Button

I wrote the button’s code from scratch, an SVG made of three circles. The first one contains an image. The other two are used to represent the animated green icon. The HTML code that generates the button is this:

<svg viewBox="0 0 20 20" width="4rem" height="4rem">
  <defs>
    <clipPath id="circle">
      <circle cx="10" cy="10" r="10" />
    </clipPath>
  </defs>
  <a href="https://twitter.com/messages/compose?recipient_id=724172156796542976"><image href="/imgs/io.jpg" height="20" width="20" clip-path="url(#circle)" /></a> 
  <circle cx="3" cy="3" r="1.5" fill="#6ee559">
    <animate attributeName="r" dur="1s" repeatCount="indefinite" from="1.5" to="3" />
    <animate attributeName="fill" dur="1s" repeatCount="indefinite" from="#6ee559" to="rgba(110, 229, 89, 0)" />
  </circle>
  <circle cx="3" cy="3" r="1.5" fill="#6ee559" />
</svg>

There’s a defs element, which contains a clipPath one. This lets me make the rectangular image looks like a circle. The image itself is surrounded by an a element, which makes it a link. The green indicator is made of two green circles, one above the other. The one under uses animations, instead of the one over, which is static. Both the r and the fill attributes are animated; the transition lasts for one second.

Where am I going to write my personal message?

The functionality is implemented by the most effective and typical element of the entire World Wide Web: the a element. Using a simple link, Twitter lets you jump to a conversation with a specific Twitter user. Probably this same behavior is made available by other social media. Twitter makes it extremely simple, providing a snippet like this:

<a href="https://twitter.com/messages/compose?recipient_id=3805104374" class="twitter-dm-button" data-screen-name="@furni"> 
  Message @furni
</a>

I removed everything except for the href attribute. To be clear, Twitter calls these messages “Direct Messages.”

Where is JavaScript?

Nowhere. That’s the beauty of the Web: using a simple, static thing like a link, I’m now able to use the power and robustness of Twitter to let my users send me a private message. No JavaScript code, no back-end code, no databases. This allows me to get rid of other pressing issues, like privacy and management of users’ data: I wash my hands of it, delegating the responsibility to Twitter. This functionality doesn’t add weight to my website then, in terms of code.

Now you can click on the profile picture you find on the homepage of my website to send me a message. Try this functionality and write to me! I assure you that I’ll reply!

If you have any questions, ideas, advice, suggestion, or if you want to tell me something or get in touch with me, please: do it! You can find me on Twitter (you can click on the profile picture on the homepage to send me a Direct Message), or you can e-mail me.