Turn WhatsApp Web into a Windows desktop application

WhatsApp Web

Since WhatsApp began to allow access from the browser it became much easier to send messages, as now we can leverage the larger screen of the computer, and especially its full keyboard. But …

Yes, there's always a "but". After all, it seems that we're never satisfied, right? ūüôā

But … Wouldn't it be much nicer if, instead of using WhatsApp as a browser tab (in Chrome, Firefox etc.), it was a real app? With an icon, its own window and everything else?

Well, keep reading as I'm going to teach you how to do it!

Our trick is to use the Web Apps feature in Google Chrome. So, first of all you will need:

  1. Install Google Chrome; and
  2. Set up WhatsApp Web on your Chrome.

Step-by-step

Now, open WhatsApp in Chrome to start the process. You need to be at this point:

WhatsApp Web running on Chrome
271

Create the shortcut in the Bookmarks bar

Yes, this is the first step in the process. If the Bookmarks bar is not enabled in Chrome, press Ctrl + Shift + B (or through Chrome's main menu, as shown below):

SNAGHTML2279ce
272

Now, press Ctrl + D to add WhatsApp Web to the Bookmarks bar. Don't forget, on the screen below, to select Bookmarks toolbar ("Bookmarks Bar")

"Add bookmark" dialog in Chrome
265

Add the shortcut to the Apps page

What makes a simple shortcut to a website (as we created above on the Favorites bar) to become an "application" is where it is stored:

Links stored in one of the Bookmarks folders (the Bookmarks bar is part of them) are merely shortcuts. However, when we add the same shortcut to Web Apps folder (name that Chrome gives the Web sites that can behave like real applications) it gets "special powers".

To access this folder in Apps, enter the URL chrome://apps into the Chrome address bar:

Chrome Apps folder
445

Now, drag the WhatsApp Web shortcut (that we saved on Bookmarks bar) into the Apps page:

Dragging the WhatsApp icon to Apps
360

Almost there!

A few small settings to go ‚Äď window behavior and the application icon.

First, the window. For WhatsApp to behave as a standalone application, of course we no longer want it to be loaded in a new Chrome tab, but as an individual window instead. So, right-click the app icon (the one you just created in the Apps folder) and select the option Open as window:

"Open as window" option on the app icon
322

Finally, creating the icons. Right-click once more on the WhatsApp icon and select Create shortcuts…. Select the two options available (create icons on the desktop and on the taskbar).

"Create shortcuts"       Dialog "Create application shortcuts"

You now have an icon on the desktop and (hopefully) also on the Windows taskbar. You will probably want to rename the icon on the desktop, since Chrome uses a weird name that it generated automatically:

Renaming icon on the desktop
360

Note for Windows 10 users: For some reason the option to set the icon on the taskbar didn't work for me. I may have changed something in the new version of Windows and that Chrome has not been updated for this. Anyway, if you are using Windows 10 and want to pin your taskbar icon, just right-click on the icon created on the desktop and select the option Pin to Taskbar:

Option "PIN to taskbar" to the desktop icon of WhatsApp
364

Conclusion

Ready! Now we have a shortcut on the desktop and on the taskbar to open your app to WhatsApp. Enjoy!

SNAGHTMLb260d15
484

(Homework: try to add the icon to the Start Menu.Winking smile)

 

A hug,
Igor

Author: Igor Abade

Igor Abade V. Leite ([email protected]) is a Visual Studio ALM MVP (Microsoft Most Valuable Professional) since 2006. Speaker at various Software Development community events (TechEd Brasil, The Developers‚Äô Conference, DevOps Summit Brasil, Agile Brazil, Visual Studio Summit, QCON among others), has also written articles in magazines and websites such as MSDN Brazil. Since March/2011 is one of the owners of Lambda3, a Brazilian consulting company specialized in ALM, software development and training. Visit his blog about VS ALM at http://www.tshooter.com.br/ and follow him on Twitter @igorabade.

Leave your comment!