Easy (hacky) Dynamic Tawk Chat Buttons on Phone and Desktop

by | May 21, 2021 | Web Design | 0 comments

Some customers have been using Tawk.to for live web chats with their customers. There are a number of similar offerings but Tawk seems fine and the free version is feature-rich enough to give the product a good try before exploring the (paid) addons. Tawk comes with adequate customisations out-of-the-box via their web/app UI and they do provide an API so you could build a full-fat UI all of your own. I quite like the default Chat button and the background coloured-circle (green) is configurable using hex values. There is an an additional overlay available from a gallery or the ability to upload your own ‘attention grabber’ that can be made to hang-around the Chat button or display over it. I wasn’t overly-keen on the gallery myself. As all this sits within an iframe in your web page you can’t ‘reach inside’ to mess with the icon or colours dynamically*.

There are a number of ways to approach this, with only a tiny bit of (free) API usage. Personally, I only need to dynamically alter the colour of the Chat button but you could easily modify any other property or swap out a spritesheet of buttons. I’m simply going to construct an icon, place it above the default Chat button and dynamically alter the background.

Tl;dr – you’ll need to make your own event to hide your button on phone screens when it is clicked/tapped.

Build a Custom Button

Tawk seem to use SVG – which is good – but they don’t to let you upload SVG format? I’m going to use SVG, you could use a PNG with transparency, spritesheet or text element. But, we’ll need to cover the default Tawk Chat button completely. I quite like the default button so I will replicate that with a circular background and white icon in the centre.

SVG is nice here because for relatively simple shapes you can inline the SVG code and access the colours there, or target them with CSS.

If you need to brush-up on SVG https://css-tricks.com/using-svg/Using SVG | CSS Tricks

Alternatively, use a PNG with transparency and a simple CSS shape for the background. You can quickly construct a red CSS circle with:

.red-circle{
    border-radius: 50%;
    background-color: red;
}

So we could, use a variable in place of the ‘background-color’ property ‘red’ to change the colour dynamically, or change some other property you prefer.

This isn’t really anything to do with the Chat button of course, we’re just going to hide it with a new button, and we’re doing the colour here, rather than in the Tawk UI.

Position Your Button

The default Chat button is something like:

position: fixed;
bottom: 20px;
right: 20px;

Placing it 20 pixels from the bottom-right corner of the viewport. Their outer circle is something like 60px diameter, so we can easily work out how to cover the default icon in its default position. Obviously (if you think about it) the Tawk button will try to grab the top z-index (so as to sit above all other page elements in a clickable position). To place a custom button on top you will need to give it a very high z-index, like maybe 9999999999 – wow!

custom-chat-button{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #ff0000;
    border-radius: 50%;
    z-index: 9999999990;
}

Would probably work fine as a starting point.

A Little bit of API

Even if you aren’t familiar with the Tawk API, you probably already know it’s possible to open the Tawk Chat box from an external button with a little bit of JavaScript.

javascript:void(Tawk_API.toggle())

So we could place that on our custom button to make the Chat box open (having hidden the default button under ours). However, once opened, we find the Chatbox is below our button in the z-index stacking order. This is fine on the desktop, but on the phone screen, the button is partially obscuring other UI elements and is dangerously close to a person’s right-thumb. Tawk provide a couple of useful callbacks here: Tawk_API.onChatMaximized and Tawk_API.onChatMinimized we can hook to hide our button once the Chatbox has open and show it again when the chat is closed. Maybe something like this

Tawk_API.onChatMaximized = function(){
     document.getElementById("my-chat-button").style.display="none";
};

If you aren’t compiling everything you can simply add these API functions after the Tawk widget code – still inside the <script></script> tags.

To make this work on the phone version I had to add my own event listener to hide the custom button when it is tapped.

Sit Back and Relax

That works for me, I can now change the colour of the Chat button along with my page theme accent colour. Do your own thing. With a background speech bubble you could easily swap out some text on the button dynamically :- “Dentists hate this one trick”, for example.

* Uh, well with an intermediate, hidden page and some scraping you can sometimes…