Custom Launcher

By default, Kayako messenger shows a bubble launcher to maximize and minimize the messenger window. If required you can hide the launcher icon and instead define your own launcher.

Read config guide in order to change the launcher icon.

Toggling Messenger

Let's start by building a toggle button which can be used in place of launcher icon to maximise and minimise the messenger.

<a href="" onclick="toggleMessenger(event)"> Need help? </a>

Next, let's make sure the default launcher is hidden by default.

kayako.ready(function () {
  kayako.config = {
    hideLauncher: true

Finally create the toggleMessenger method, which will use the Javascript API to toggle the messenger state.

function toggleMessenger (e) {
  if (kayako.visibility() === 'minimized') {
  } else {

Moving A Step Ahead

Let's say you also want to show a count of unread messages next to the launcher element so that the user knows when they have received a new message and click the button to open the messenger and read the message(s).

<a href="" onclick="toggleMessenger(event)">
    Need help? 
    <span id="kayako-unread-counts"></span>

Finally, listen for unread counts event and update the span element.

kayako.ready(function () {
  kayako.hideLauncher = true

  // listen for realtime updates
  kayako.on('unread_messages_count_changed', function (count) {
    const element = document.getElementById('kayako-unread-counts')

    if (count > 0) {
      var suffix = count === 1 ? '' : 's' = 'block'
      element.innerHTML = count + ' new message' + suffix
    } else { = 'none'



Above you listened for unread_messages_count_changed and update the span element HTML with the messages count, and hide the element when there are no unread messages.